블로그 이미지
Xeon의 세상 Xeoness

카테고리

Xeon World (22)
Diary (1)
Tuning (0)
Project (0)
Scrap (0)
Media (0)
L ♡ L (0)
일상생활 (4)
Web Programming (14)
IT 강국? 노가다 강국 (3)
Linux (0)
아리아리 동동~ (0)
Total30,960
Today0
Yesterday0

'ria'에 해당되는 글 3건

  1. 2010.01.21 Ext JS - 8. List of component xtype.
  2. 2010.01.21 Ext JS - 7. Simple container layout 생성
  3. 2010.01.21 Ext JS - 6. Form 생성

Class Ext.Component

Package: Ext
Defined In: Component.js
Class: Component
Subclasses: BoxComponent, ColorPalette, DatePicker, Editor, BaseItem
Extends: Observable

Base class for all Ext components. All subclasses of Component may participate in the automated Ext component lifecycle of creation, rendering and destruction which is provided by the Container class. Components may be added to a Container through the items config option at the time the Container is created, or they may be added dynamically via the add method.

The Component base class has built-in support for basic hide/show and enable/disable behavior.

All Components are registered with the Ext.ComponentMgr on construction so that they can be referenced at any time via Ext.getCmp, passing the id.

All user-developed visual widgets that are required to participate in automated lifecycle and size management should subclass Component (or Ext.BoxComponent if managed box model handling is required, ie height and width management).

See the Creating new UI controls tutorial for details on how and to either extend or augment ExtJs base classes to create custom Components.

Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype like getXType and isXType. This is the list of all valid xtypes:

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


자주 사용하게 되는 xtype 의 목록
Posted by Xeoness

댓글을 달아 주세요


<html>
<head>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" /> <!-- 1 -->
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script> <!-- 2 -->
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript"> // 3
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
</script>
</head>
<body>
<script type="text/javascript">
    var childPnl1 = { // childPnl1 이라는 panel 생성
        frame : true,
        height : 50,
        html : 'This is first child panel',
        title : 'First child panel'
    };
   
    var childPnl2 = { // childPnl2 라는 panel 생성
        width : 150,
        html : 'Here is second child',
        title : 'Thanks god it's friday'
    };
   
    var myWin = new Ext.Window({ // childPnl1과 childPnl2를 나타낼 window 생성
        height : 300,
        width : 300,
        modal : true,   // mask 씌우기 true (window가 나타나면 다른 영역은 선택이 불가능)
        title : 'A window with a container layout',
        autoScroll : true, // autoscroll 활성화
        items : [ // window에 들어갈 item
            childPnl1,
            childPnl2
        ],
        tbar : [ // top bar의 내용 (bottom bar 는 bbar)
            {
                text : 'Add child',
                handler : function() {  // handler 를 걸어 버튼으로 작동 가능 (클릭시 panel을 child로 생성)
                    var numItems = myWin.items.getCount() + 1; // window의 item의 갯수 + 1을 식별 번호로...
                    myWin.add({  // window에 panel add
                        title : 'Another child ' + numItems,  // child panel의 title
                        height : 60,
                        frame : true,
                        collapsible : true,  // flip 가능
                        collapsed : true, // 기본으로 접혀 있음
                        html : 'Congratuations!!! you maid another child!' // panel의 내용
                    });
                    myWin.doLayout(); // child panel을 생성한 이후에는 반드시 window에 그려주는 작업을!!
                }
            }
        ]
    });
   
    myWin.show();
</script>
</body>
</html>


-->
기본적으로 페이지가 로딩되면 window 안에 두 개의 패널이 포함되어 있다.
window의 mask를 true로 했으므로 window가 닫히기 전까지는 다른 element를 선택 불가.

상단 바의 'Add child' 버튼을 누르면 새로운 자식 panel이 생성된다.

주석 참고!
Posted by Xeoness

댓글을 달아 주세요


<html>
<head>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript"> // 3
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
</script>
</head>
<body>
<script type="text/javascript" src="formLayout.js">
    var myWin = new Ext.Window({             // window 생성
        width       : 200,                              // width 200
        bodyStyle   : 'padding: 5px',            // window style 지정 : padding 5px
        layout      : 'form',                          // layout 은 form 형태
        labelWidth  : 50,                            // 각각의 필드에 사용될 라벨의 width 50
        defaultType : 'field',                      // default type 은 field 로 지정
        items       : [                                // window 내부에 들어가는 item 지정
                       {
                           fieldLabel   : 'Name', // 첫 번째로 Name이라는 fieldLabel을 가진 field 생성
                           anchor       : '-4'
                       },
                       {
                           fieldLabel   : 'Age', // 두 번째로 Age라는 fieldLabel을 가진 field 생성
                           width        : 25
                       },
                       {
                           xtype        : 'combo', // 세 번째로 combobox 생성(html의 select)
                           fieldLabel   : 'Location', // combobox의 fieldLabel을 Location으로 지정
                           anchor       : '-4',  // anchor는 100%에서 -4px 
                           store        : ['Here', 'There', 'Anywhere'] // combobox의 option
                       },
                       {
                           xtype        : 'textarea', // 네 번째로 textarea 생성
                           fieldLabel   : 'Bio',      // fieldLabel
                           anchor       : '-4, -134' // anchor 지정
                       },
                       {
                           xtype        : 'panel',    // panel type의 field 생성
                           fieldLabel   : '',
                           labelSeparator : '',
                           frame        : true,
                           title        : 'Instructions',
                           html         : 'Please fill in the form',    // panel 안에 들어갈 html 형식의 text
                           anchor       : '-4'
                       }
                ]
    });
   
    myWin.show();
</script>
</body>
</html>


주석만 보아도 다 알만한 내용들.

Posted by Xeoness

댓글을 달아 주세요

최근에 달린 댓글

최근에 받은 트랙백

글 보관함