블로그 이미지
Xeon의 세상 Xeoness

카테고리

Xeon World (23)
Diary (1)
Tuning (0)
Project (0)
Scrap (0)
Media (0)
L ♡ L (0)
일상생활 (4)
Web Programming (14)
IT 강국? 노가다 강국 (4)
Linux (0)
아리아리 동동~ (0)
Total
Today
Yesterday

달력

« » 2024.4
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

공지사항

최근에 올라온 글

Ext JS - 8. List of component xtype.

Web Programming/Ext JS / 2010. 1. 21. 12:08

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 의 목록
저작자표시

'Web Programming > Ext JS' 카테고리의 다른 글

[Error] Error with simple grid app: this.config[a] is undefined  (0) 2011.07.13
Ext JS - 7. Simple container layout 생성  (0) 2010.01.21
Ext JS - 6. Form 생성  (0) 2010.01.21
Ext JS - 5. applyTo, renderTo, contentEl 의 차이점  (0) 2010.01.14
Ext JS - 4. Events 등록과 Event Listeners  (0) 2010.01.14
Posted by Xeoness
, |

Ext JS - 7. Simple container layout 생성

Web Programming/Ext JS / 2010. 1. 21. 11:42

<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이 생성된다.

주석 참고!
저작자표시

'Web Programming > Ext JS' 카테고리의 다른 글

[Error] Error with simple grid app: this.config[a] is undefined  (0) 2011.07.13
Ext JS - 8. List of component xtype.  (0) 2010.01.21
Ext JS - 6. Form 생성  (0) 2010.01.21
Ext JS - 5. applyTo, renderTo, contentEl 의 차이점  (0) 2010.01.14
Ext JS - 4. Events 등록과 Event Listeners  (0) 2010.01.14
Posted by Xeoness
, |

Ext JS - 6. Form 생성

Web Programming/Ext JS / 2010. 1. 21. 11:14


<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>


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

저작자표시

'Web Programming > Ext JS' 카테고리의 다른 글

Ext JS - 8. List of component xtype.  (0) 2010.01.21
Ext JS - 7. Simple container layout 생성  (0) 2010.01.21
Ext JS - 5. applyTo, renderTo, contentEl 의 차이점  (0) 2010.01.14
Ext JS - 4. Events 등록과 Event Listeners  (0) 2010.01.14
Ext JS - 3. Burst Events in action  (0) 2010.01.14
Posted by Xeoness
, |

Ext JS - 5. applyTo, renderTo, contentEl 의 차이점

Web Programming/Ext JS / 2010. 1. 14. 14:58
뭐가 다른건지 잘 알지 못하겠어서 forum에 가서 뒤적였더니 누군가가 이미 질문을 하고 Animal(유명하군... 저게 진짜 그 사람 얼굴일까??? 중후하게 생긴게 분위기가 숀 코넬린데 ㅋ)님이 답글을 이미 달아놓았다.

renderTo renders the Component into the specified existing element.

==> renderTo는 기존의 element에 component를 rendering 하는 것이다.(즉, 컴퍼넌트 내의 새로운 element를 생성해서 사용할 때 사용한다는 말)

applyTo uses the specified alement as the main element of the Component. A Component created using applyTo does not need rendering - its main element already exists.

==> applyTo는 component의 기본 element에 적용시킬 때 사용.  applyTo를 이용해 생성된 component는 rendering을 필요로 하지 않는다. (기본 element는 component가 생성될 때 이미 만들어지므로)

contentEl is only for Panels. It simply moves the specified element into the body of the Panel when the Panel is rendered to use... as the content!

==> contentEl은 Panel에서만 사용됩니다. Panel이 생성되어진 이후 content와 같은 지정된 element를 Panel의 body로 손쉽게 넣을 수 있습니다.


대충 이런 느낌? ㅋㅋㅋ
저작자표시

'Web Programming > Ext JS' 카테고리의 다른 글

Ext JS - 7. Simple container layout 생성  (0) 2010.01.21
Ext JS - 6. Form 생성  (0) 2010.01.21
Ext JS - 4. Events 등록과 Event Listeners  (0) 2010.01.14
Ext JS - 3. Burst Events in action  (0) 2010.01.14
Ext JS - 2. Dom based Events  (0) 2010.01.14
Posted by Xeoness
, |

Ext JS - 4. Events 등록과 Event Listeners

Web Programming/Ext JS / 2010. 1. 14. 12:00

Ext-based event가 실행되기 전에 각각의 event가 등록이 되어야 한다. 일반적으로 addEvent method를 이용한다. 아래의 예제를 보자.

var myObservable = new Ext.util.Observable();
myObservable.addEvents('sayHello');
myObservable.addEvents('sayGoodbye');

하나 이상의 event를 등록할 때 아래와 같이 해도 된다.

myObervable.addEvents('sayhello', 'saygoodbye');

Object 형식을 event로 지정할 수도 있다.

myObservable.addEvents({
    'sayHello'        : true,
    'sayGoodbye'  : true
})

event를 생성하였으면 event handler가 필요하다.

myObservable.on('sayHello', function() {
console.log('Hello stranger');
});

sayHello event에 대한 event handler를 생성하였다. 3강에서의 예제처럼 event가 발생하면 firebug의 console 창으로 'Hello stranger' 라는 message를 출력하는 event이다. 아래와 같이 event를 호출해본다.

myObservable.fireEvent('sayHello');


event가 호출되며 Firebug console 창에 'Hello stranger' 라는 message가 호출되는 것을 볼 수 있다.

완성 src :

var myObservable = new Ext.util.Observable();

myObservable.addEvents({
    'sayHello' : true,
    'sayGoodbye' : true
    })
   
myObservable.on('sayHello', function() {
console.log('Hello stranger');
});

myObservable.fireEvent('sayHello');

console 창에 나타난 결과:









대부분의 event들은 파라미터를 사용한다. 'sayGoodbyeFn' event에 2개의 파라미터를 주어보자.

var sayGoodbyeFn = function(firstName, lastName) {
console.log('Goodbye ' + firstName + ' ' + lastName + '!');
}
myObservable.on('sayGoodbye', sayGoodbyeFn);

2개의 파라미터를 인자로 받는 sayGoodbyeFn 이라는 event를 생성하였다.
이제 myObservable.on 함수를 이용하여 event를 호출해 보자. 아래와 같이 추가해 준다.

myObservable.fireEvent('sayGoodbye', 'John', 'Smith');

FireFox에서 실행을 해보자.

console 결과:



 
event를 호출할 때 scope 영역을 지정해 주지 않으면 호출한 component 안에서만 유효하다는 것을 기억해 두자.

event가 더 이상 필요없다면 삭제해 주는 method가 있다.

myObservable.removeListener('sayGoodbye', sayGoodbyeFn);

저작자표시

'Web Programming > Ext JS' 카테고리의 다른 글

Ext JS - 7. Simple container layout 생성  (0) 2010.01.21
Ext JS - 6. Form 생성  (0) 2010.01.21
Ext JS - 5. applyTo, renderTo, contentEl 의 차이점  (0) 2010.01.14
Ext JS - 3. Burst Events in action  (0) 2010.01.14
Ext JS - 2. Dom based Events  (0) 2010.01.14
Posted by Xeoness
, |

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

티스토리툴바