var popupWindow = Ext.create('Ext.window.Window', { title: 'Setting Window', height: 500, width: 500, modal: true, layout: 'fit', items: [ { xtype: 'form', bodyPadding: 10, items: [ { xtype: 'textfield', fieldLabel: 'ID', name: 'id', allowBlank: false, readOnly: true } ] } ], buttons: [ { text: 'Submit', handler: function() { var form = popupWindow.dow..

Case1{ xtype: 'panel', bodyStyle: 'background-color:black', html: 'Logout', listeners: { afterrender: function(panel) { panel.getEl().on('click', function() { Ext.Msg.alert('Panel Clicked', 'You clicked on the panel!'); }); } }},Case2{ xtype: 'panel', bodyStyle: 'background-color:black', html: 'Logout', listeners: { click: { lement: 'el', //bind to the underlying el property on ..

정의: widget.{이름}으로 정의Ext.define('{App}.view.menu.LeftMenu', { extend: 'Ext.tree.Panel', alias: 'widget.leftmenu',호출: leftmenu로 호출: /app/view/menu/LeftMenu.js를 찾음 { region: 'west', width: leftWidth, xtype: 'leftmenu', },만약 LeftMenu.js가 존재하지 않는 경우: /widget/leftmenu.js를 찾음

/index.html/bootstrap.js/classic.json: {app}에 종속적임/build/development/{app}/classic/resources/{app}-all_1.css/build/development/{app}/classic/resources/{app}-all_2.css/ext/**/app.js/app/Application.js: 이후부터는 sencha build에 의해서 결정됨: /build 디렉토리 아래의 내용을 참조하여 이후의 내용이 호출됨/app/model/Base.js/app/model/Personnel.js/app/store/Personnel.js/classic/src/view/main/List.js/classic/src/view/main/Main.js/app/vie..

컴포넌트를 수평으로 나열하기hbox 사용 { region: 'north', height: 50, layout: 'hbox', items: [ { width: 200, bodyStyle: 'background-color:black', html: '  Home' }, { bodyStyle: 'background-color:black', html: '  Home' }, ] },화면을 반응형으로 구성flex 사용 { region: 'north', height: 50, layout: 'h..

처음 로딩되는 파일(index.html)에 원하는 변수 선언 var Ext = Ext || { aaa: { name: 'aklsfd' } }; // Ext namespace won't be defined yet... var leftWidth = 200; 생략다른 컴포넌트에서 사용Ext.define('Test.view.main.Main', { extend: 'Ext.container.Container', xtype: 'main', requires: [ ], title: 'Test', layout: 'border', items: [ { region: 'north', ..