目的:V80202 – 工單查詢 - 畫面底部如何加一ToolBar
處理說明: 1> Ext.Panel.AddDocked( {
dock: ":元件位置, Ex:bottom",
dockedItem:[{Items: [":元件,Ex: cmp_mytoolBar]}],
},1);
2> Ext.getCmp("grid_Single").dockedItems : 列出目前Panel的DockedItems
3> 加入[過濾欄位]Toolbar,
Ext.getCmp("grid_Single").AddDocked({
dock:"top",
dockedItem:[{items{Query,Query1}}]
});
4> 加入[額外按鈕]Toolbar
Ext.getCmp('grid_Single').addDocked({
dock: "bottom",
dockedItems: [{items: [cmp_mytoolBar]}],
},3);
5>grid_ptb的 dockedItem.index 必需固定為 1
否則 .insertBtn(xxx); 會Error
1>*.js - 上方 -加入過濾欄位 Bar
var cmp_filter1 = get_cmp_filter1("過濾條件1", "s_filter1", 80, 130, Tmp_Store);
var cmp_filter2 = get_cmp_filter1("過濾條件2", "s_filter2", 80, 130, Tmp_Store);
var cmp_filter3 = get_cmp_filter1("過濾條件3", "s_filter3", 80, 130, Tmp_Store);
var Query1 = new Ext.FormPanel({
id: 's_form1',
layout: { type: 'hbox', align: 'stretch' },
fieldDefaults: { labelAlign: 'right' },
defaults: { margin: { top: 3 } },
items: [{
xtype: 'panel', id: 'panel21', layout: { type: 'hbox', align: 'stretch' }, flex: 14, border: 0, height: 25, items: [ cmp_filter1, cmp_filter2, cmp_filter3,]
}]
});
Ext.getCmp('grid_Single').addDocked({
dock: "top",
dockedItems: [{
items: [Query, Query1]
}]
},0);
2>*.js - 底部 -加入按鈕
var cmp_mytoolBar =
{
xtype: 'toolbar',
dock: 'bottom',
id: 'mytoolBar1',
items: [
{
xtype: 'button', text: '整機抽換紀錄匯出', id: 'Call_V80202I_Btn',
iconCls: 'icon-excel',
listeners: {
click: function () {
Call_V80202I();
}
}
},
{
xtype: 'button', text: 'F16V_CHECK', id: 'Call_V80202K_Btn',
iconCls: 'icon-check',
listeners: {
click: function () {
Call_V80202K();
}
}
},
{
xtype: 'button', text: 'SAP單況比對', id: 'Call_V80202L_Btn',
iconCls: 'icon-check',
listeners: {
click: function () {
Call_V80202L();
}
}
},
{
xtype: 'button', text: 'Finding處置匯入', id: 'Call_V80202M_Btn',
iconCls: 'icon-add',
border: '2',
listeners: {
click: function () {
Call_V80202M();
}
}
},
]
};
Ext.getCmp('grid_Single').addDocked({
dock: "bottom",
dockedItems: [{
items: [cmp_mytoolBar]
}],
},1);
3>Ext.getCmp("grid_Single").dockedItems內容
.Items[1]: 底部, ToolBar
.Items[2]: grid , Grid 內容
.Items[3]: grid_ptb , 分頁按鈕
-->實際內容階層
Items[0]-dockedItems-Items[0].items.keys : [s_form,s_form1]
Items[1]-dockedItems-Items[0].items.keys : [mytoolBar1]
4>TMGrid.js
insertBtn: function (i_btnJson) {
//console.log('insertBtn_1');
//如下因為在TMGrid Source, grid_ptb.index限定為1, 所以若 grid_ptb.index 改變時,會Error
var bar = Ext.getCmp(this.dockedItems.keys[1]);
if (i_btnJson.length > 0) {
for (var i = 0; i < i_btnJson.length; i++) {
bar.insert(bar.items.length - 2, i_btnJson[i]);
}
} else {
bar.insert(bar.items.length - 2, i_btnJson);
}
},
reloadGridData: function (i_is_warnalert, i_idx) {
--> 所以改成 3
Ext.getCmp('grid_Single').addDocked({
dock: "bottom",
dockedItems: [{
items: [cmp_mytoolBar]
}],
},3);
