V80202 – 工單查詢 - 畫面底部如何加一ToolBar -分成2行 - AddDocked - DockedItems

 目的: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[0] : 上方,過濾條件

.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);