помогите создать View
Вложений: 1
делаю шаг-за-шагом как в документации. Вроде работает.
Теперь хочу сделать свой View на основе Panel-и, куда я вставил "Menu" (работает) и хотелось бы вот такое "Вью" (на картинке ) . Что мне надо добавит в код что бы было приблизительно как на картинке? Какои "layout" надо? Т.е. слева "FieldSet" куда я буду добавлять кнопки и проч , а справа Grid . Я понимаю, что для "paging"-a мне надо вниз ещё "тулбар" добавить
Ext.define('MyApp.view.ui.mainWindow', {
extend: 'Ext.form.Panel',
height: 773,
width: 727,
layout: {
type: 'absolute'
},
bodyPadding: 10,
preventHeader: true,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
id: 'top_menu_New_Quote',
text: 'New Quote',
menu: {
xtype: 'menu',
items: [
{
xtype: 'menuitem',
id: 'add_prospect_menu',
text: 'Add PR'
},
{
xtype: 'menuitem',
id: 'add_defend_menu',
text: 'Add DE'
},
{
xtype: 'menuitem',
text: 'Add GR'
}
]
}
},
{
xtype: 'button',
id: 'top_menu_Quote_List',
text: 'Quote List',
menu: {
xtype: 'menu',
width: 120,
items: [
{
xtype: 'menuitem',
id: 'print_menu',
text: 'Print'
},
{
xtype: 'menuitem',
id: 'export_to_excel_menu',
text: 'Export to Excel'
}
]
}
}
]
}
],
items: [
{
xtype: 'fieldset',
height: 670,
width: 253,
title: 'My Fields',
items: [
{
xtype: 'textfield',
fieldLabel: 'Label',
anchor: '100%'
}
]
},
{
xtype: 'gridpanel',
height: 650,
width: 410,
title: 'My Grid Panel',
x: 290,
y: 20,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
],
viewConfig: {
}
}
]
});
me.callParent(arguments);
}
});
|
Тебе надо view который будет содержать контейнер с двумя элементами? В левом поле ввода, а в правом таблица? И ты не знаешь какой layuot использовать?
Ext.define('MyApp.view.Groups', {
extend: 'Ext.panel.Panel',
alias : 'widget.groups',
layout: 'column',
border: 0,
initComponent: function() {
this.items = [
{
xtype: 'gridpanel',
itemId: 'grid-goods',
padding: '10px 5px 10px 10px',
title: 'Товары',
store: 'Good',
columnWidth: 0.5,
columns: [
{
dataIndex: 'name',
flex: 1,
text: 'Товары'
},
{
width: 50,
dataIndex: 'count',
text: '№'
}
]
},
{
xtype: 'gridpanel',
itemId: 'grid-services',
padding: '10px 10px 10px 5px',
title: 'Услуги',
store: 'Service',
columnWidth: 0.5,
height: 585,
columns: [
{
dataIndex: 'name',
flex: 1,
text: 'Услуги'
},
{
width: 50,
dataIndex: 'count',
text: '№'
}
]
}
];
this.callParent(arguments);
}
});
view-шка имеет layout: 'column', а внутренним элементам (у меня 2-м) задается columnWidth (у меня columnWidth: 0.5). Надеюсь я помог |
layout: {
type: 'absolute'
},
Не очень удачное решение. |
Спасибо. Забыл заметить, что докуменитация на Sencha по MVC !!!.
Я так понимаю, что скажем браузер отобразил мой VIEW. Пользователь дергает за рамку (resizing) (меняет размер окна всяко разно) . И вот тут-то (как я понимаю) "layout должен работать" !! Если слева у меня fieldset ( а в нем textfield-ы, button-ы, dropdown-ы и пр.) а справа grid , то я как-то (с помощъю layout-а_ должен запрограммировать "масштабирование" этих "textfield-ов, button-от, dropdown-ов и проч ? Правильно ? Если да, то дайте пож-та пример. PS: Absolut layout - не очень удачное решение - согласен |
Цитата:
|
Спасибо ! "въющку" сделал! Работает !
правда в IE медленнее чем в Chrome. Теперь надо dropdown "заполнять". Локально (store) -работает. Хочется что-бы из Sevleta. Будем читать и вас спрашивать. Еще раз Спасибо ! |
| Часовой пояс GMT +3, время: 19:17. |