2010/09/26 00:18

증상 :

다이얼로그안에 textfield와 textarea가 'visibility:hidden'으로 처리되어서 높이를 차지하고 있었음.

원인 : 

managediframe 사용시 miframe의 소스가 구 버전을 사용해서 발생한 문제.

해결방법 :

http://code.google.com/p/managediframe/ 여기서 Extjs의 버전에 맞는 소스를 받아서 최신으로 업데이트 할것.
저작자 표시 비영리 변경 금지
크리에이티브 커먼즈 라이선스
Creative Commons License
2010/03/03 10:24

증상 :

Ext.MassageBox의 모든 메소드를 사용시 다이얼로그의 높이가 비정상적으로 길게 보임.
다이얼로그안에 textfield와 textarea가 'visibility:hidden'으로 처리되어서 높이를 차지하고 있었음.

원인 :

managediframe 사용시 miframe의 소스가 구 버전을 사용해서 발생한 문제.

해결방법 :

http://code.google.com/p/managediframe/ 여기서 Extjs의 버전에 맞는 소스를 받아서 최신으로 업데이트 할것.
크리에이티브 커먼즈 라이선스
Creative Commons License
2010/03/03 10:12
Extjs를 사용하다보면 종종 tabpanel이나 window에 iframe을 사용해야 하는 경우가 있지만 Extjs API에서는 아무리 찾아봐도 iframe에 관한 클래스는 없습니다.

하지만 역시나 많은 사용자층을 가진 Extjs에 그런 컴포넌트가 없을리가 없습니다. 단, Extjs committer가 아닌 BeamGate라는 개발자가 google code managediframe 에서 업데이트 하고 있습니다.
프로필을 보면 miframe 뿐만 아니라 Extjs에 관한 여러가지를 업데이트하고 있습니다. 시간이 나시면 한번 둘러보세요.

ManagedIFrame 사용법

managediframe에서 사용중인 Extjs의 버전에 맞는 소스를 다운받고 miframe.js를 추가해 주세요.
miframe의 API를 참고하면서 보세요.
miframe은 다음과 같은 클래스들이 있습니다.

MIF.Component  (xtype : mif)
MIF.Panel          (xtype : iframepanel)
MIF.Portlet        (xtype : iframeportlet)
MIF.Window       (xtype : iframewindow)

여기서는 MIF.Window를 사용했습니다.

var MIF = Ext.ux.ManagedIFrame;
var mifWindow = new MIF.Window({
id : 'iframe-panel',
title : 'Test',
width : 800,
height : 600,
defaultSrc : 'http://westzero.net'
}).show();

이 소스를 실행시키면 http://westzero.net이 window로 뜹니다. 아주 간단하죠?^^

사용자 삽입 이미지


이제 자세한 기능은 API를 보면서 한 번 해보시기 바랍니다.
크리에이티브 커먼즈 라이선스
Creative Commons License
2010/02/23 15:08
extjs 3.1.1

아래 코드는 TabPanel 예제 코드입니다.

아래코드에서 addTab() 메소드를 실행시 tab이 추가됩니다.
이때 만약 같은 ID의 tab이 있다면 extjs는 새로운 탭을 추가하는게 아니라 자동으로 동일한 id를 가진 tab을 활성화 해줍니다.
하지만 그렇게 사용하게 될 경우 tab에서 getCmp()등을 사용하게 되면 정상적으로 작동하지 않습니다.
아무래도 container와 관련이 있는듯 싶지만 정확한 원인은 저도 아직 잘 모릅니다.

만약 이미 존재하는 탭을 다시 활성화 시켜야 할 경우setActiveTab() 메소드를 사용하시기 바랍니다.



Ext.onReady(function(){
    var tabs = new Ext.TabPanel({
        renderTo:'tabs',
        resizeTabs:true, // turn on tab resizing
        minTabWidth: 115,
        tabWidth:135,
        enableTabScroll:true,
        width:600,
        height:250,
        defaults: {autoScroll:true},
        plugins: new Ext.ux.TabCloseMenu()
    });
    // tab generation code
    var index = 0;
    while(index < 7){
        addTab();
    }
    function addTab(){
        tabs.add({
            title: 'New Tab ' + (++index),
            iconCls: 'tabs',
            html: 'Tab Body ' + (index) + '<br/><br/>'
                    + Ext.example.bogusMarkup,
            closable:true
        }).show();
    }
    new Ext.Button({
        text: 'Add Tab',
        handler: addTab,
        iconCls:'new-tab'
    }).render(document.body, 'tabs');
});
크리에이티브 커먼즈 라이선스
Creative Commons License
2010/02/02 09:11
출처 : http://www.extjs.com/deploy/dev/docs/

xtype            Class
-------------    ------------------
box              Ext.BoxComponent
button           Ext.Button
buttongroup      Ext.ButtonGroup
colorpalette     Ext.ColorPalette
component        Ext.Component
container        Ext.Container
cycle            Ext.CycleButton
dataview         Ext.DataView
datepicker       Ext.DatePicker
editor           Ext.Editor
editorgrid       Ext.grid.EditorGridPanel
flash            Ext.FlashComponent
grid             Ext.grid.GridPanel
listview         Ext.ListView
panel            Ext.Panel
progress         Ext.ProgressBar
propertygrid     Ext.grid.PropertyGrid
slider           Ext.Slider
spacer           Ext.Spacer
splitbutton      Ext.SplitButton
tabpanel         Ext.TabPanel
treepanel        Ext.tree.TreePanel
viewport         Ext.ViewPort
window           Ext.Window

Toolbar components
---------------------------------------
paging           Ext.PagingToolbar
toolbar          Ext.Toolbar
tbbutton         Ext.Toolbar.Button        (deprecated; use button)
tbfill           Ext.Toolbar.Fill
tbitem           Ext.Toolbar.Item
tbseparator      Ext.Toolbar.Separator
tbspacer         Ext.Toolbar.Spacer
tbsplit          Ext.Toolbar.SplitButton   (deprecated; use splitbutton)
tbtext           Ext.Toolbar.TextItem

Menu components
---------------------------------------
menu             Ext.menu.Menu
colormenu        Ext.menu.ColorMenu
datemenu         Ext.menu.DateMenu
menubaseitem     Ext.menu.BaseItem
menucheckitem    Ext.menu.CheckItem
menuitem         Ext.menu.Item
menuseparator    Ext.menu.Separator
menutextitem     Ext.menu.TextItem

Form components
---------------------------------------
form             Ext.form.FormPanel
checkbox         Ext.form.Checkbox
checkboxgroup    Ext.form.CheckboxGroup
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
displayfield     Ext.form.DisplayField
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden
htmleditor       Ext.form.HtmlEditor
label            Ext.form.Label
numberfield      Ext.form.NumberField
radio            Ext.form.Radio
radiogroup       Ext.form.RadioGroup
textarea         Ext.form.TextArea
textfield        Ext.form.TextField
timefield        Ext.form.TimeField
trigger          Ext.form.TriggerField

Chart components
---------------------------------------
chart            Ext.chart.Chart
barchart         Ext.chart.BarChart
cartesianchart   Ext.chart.CartesianChart
columnchart      Ext.chart.ColumnChart
linechart        Ext.chart.LineChart
piechart         Ext.chart.PieChart

Store xtypes
---------------------------------------
arraystore       Ext.data.ArrayStore
directstore      Ext.data.DirectStore
groupingstore    Ext.data.GroupingStore
jsonstore        Ext.data.JsonStore
simplestore      Ext.data.SimpleStore      (deprecated; use arraystore)
store            Ext.data.Store
xmlstore         Ext.data.XmlStore
크리에이티브 커먼즈 라이선스
Creative Commons License
Extjs, xtype