Панели это один из основных “строительных кирпичиков” ExtJS. Класс панелей ExtJS.panel.Panel
Создадим панель с одним элементом внутри – кнопкой.
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 |
var myPanel=Ext.create('Ext.panel.Panel', { title: 'myApp', width: 400, height: 300, margin: '0 0 0 0', html:'hello', id : 'myPanel_id', draggable: true, collapsible:true, //сворачиваемость closable: true,// закрываемость //Далее, добавим кнопку items:[ { x:20, y:20, xtype: 'button', text: 'Click here', //style:'margin-left:100px; margin-top:70px;', listeners:{ click:function(){alert('You have just clicked');} } } ], renderTo: Ext.getBody() }); |
Расположение элементов внутри панели
Есть интересные свойства для расположения внутри панели
dockedItems
addDocked
fbar / tbar
lbar, rbar, tbar, bbar
Для примера рассмотрим свойство tbar, сокращенно от top bar, по аналогии есть и fbar (footer bar)
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 31 32 33 34 |
var myPannel=Ext.create('Ext.panel.Panel', { title: 'Приложение Ext JS 4', width: 400, height: 300, margin: '0 0 0 0', html:'hello', id : 'myPanel_id', draggable: 'true', //Далее, добавим кнопки в top bar tbar tbar:['->',// заменитель Ext.toolbar.Fill { xtype: 'button', text: 'Click this button', listeners:{ click:function(){alert('You have just clicked');} } }, '-', // заменитель Ext.toolbar.Separator (верт. черта) { xtype: 'button', text: 'Click another button', listeners:{ click:function(){alert('You have just clicked another button');} } } ], renderTo: Ext.getBody() }); |