Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   Корректный каркас окна (https://javascript.ru/forum/extjs/60467-korrektnyjj-karkas-okna.html)

GRAF-8269 02.01.2016 00:26

Корректный каркас окна
 
Всем привет, прошу помощи, так как новичок в работе с ExtJs.
Прошу подсказать как правильно создать каркас окна, так как практически все окна, которые будут - по типу создаваемого.

Ничего сложного, в принципе, однако возникло два вопроса.

app.js
Ext.application({
    name: 'HelloExt',
    launch: function() {
Ext.create('Ext.window.Window', {
    title: 'Сотрудники (version test)',
    height: 400,
    width: 800,
    closable: true,
    border: false,
    plain:true,
                layout: 'border',
			maximizable: true,
			resizable: true,
			maximized: true,
			contrain: true,
			constrainHeader: true,
    items: [{
                    region: 'center',
                    xtype: 'tabpanel',
		    border: false,
                    items: [
{title: 'Группы сотрудников'}, 
{title: 'Список сотрудников', layout: 'border', border: false, items: [{
                    region: 'west',
                    title: 'Navigation',
                    width: 200,
                    split: true,
                    collapsible: true,
                    floatable: false
                }, {
                    region: 'center',
                    //xtype: 'tabpanel',
                    items: [Ext.create('App.views.WorkersListGrid')]
                }]},
{title: 'Сегменты сотрудников'}]
                }]
}).show();
    }
});

var store = Ext.create('Ext.data.ArrayStore', {
    fields: [
       {name: 'user_id'},
       {name: 'user_status'},
       {name: 'user_SN'},
       {name: 'user_login'}], 
    data: [
    [1, 'Worked', 'Ivanov Ivan', 'ivanov'],
]    
});


WorkersListGrid.js
Ext.define('App.views.WorkersListGrid', {
  extend: 'Ext.grid.Panel',
  //defaults:{autoScroll:true},
  layout: 'fit',
  autoHeight: true,
  autoWidth: true,
  border: false,
  //constrainHeader: true,
  store: store,
  columns: [ 
				{text: 'ID', dataIndex: 'user_id', width: 65},
				{text: 'Статус', dataIndex: 'user_status', width: 100},
	  			
				{text: 'Фамилия, имя', dataIndex: 'user_SN', width: 175},
				
				{text: 'Логин', dataIndex: 'user_login', width: 100},
				], 
tbar: [{text: 'Добавить Сотрудника', iconCls: 'plus'}],
bbar: new Ext.PagingToolbar({
            //store: store,
				            defaults:{autoScroll:true},
				autoHeight: true,
			region: 'south',
            pageSize: 4,
            displayInfo: true,
            displayMsg: 'Показано {0} - {1} из {2}',
            emptyMsg: "Нет данных для отображения"
        })
});


Собственно, вопросы:

1) Правильно ли написан код? Почему, спросите Вы, я задаю такой вопрос? Потому что, при смене layout: на 'border' все ломается к чертям. :(
2) Как растянуть таблицу с данными во весь экран? :help:

0022.png

novikov 02.01.2016 10:17

чтобы растянуть грид по высоте, layout:'fit' нужно определять в контейнере грида, а не в самом гриде. Посмотреть.

Где меняете на border?

GRAF-8269 02.01.2016 19:22

есть сменить на Border у App.views.WorkersListGrid то вообще каша.

novikov 02.01.2016 22:08

У гдида layout лучше не менять. В гриде по дефолту fit или hbox. Грид можно поместить внутрь контейнера с layout:border в качестве одного из элементов. См. пример.


Часовой пояс GMT +3, время: 10:41.