ExtJS 4 測試 : TabPanel 中的 GridPanel

今天想說提早測試一下未來使用 ExtJS 給工作日誌改版時最重要的應用 : Grid within Tab Panel, 所以草草地根據下面四篇舊作寫了一個測試, 經過一番折騰後, 終於證實可行 :

1. ExtJS 4 測試 : GridPanel (一)
2. ExtJS 4 測試 : GridPanel (二)
3. ExtJS 4 測試 : GridPanel (三)
4. ExtJS 4 測試 : 頁籤面板 TabPanel

測試範例 1 : http://tony1966.xyz/test/extjstest/grid_in_tab_1.htm [看原始碼]   

    Ext.onReady(function() {
      var columns=[{header:"股票名稱",dataIndex:"name",width:60},
                   {header:"股票代號",dataIndex:"id",width:60},
                   {header:"收盤價 (元)",dataIndex:"close",width:60},
                   {header:"成交量 (張)",dataIndex:"volumn",width:60},
                   {header:"股東會日期",dataIndex:"meeting"},
                   {header:"董監改選",dataIndex:"election",width:50}];
      var data=[["台積電","2330",123,4425119,"2014/06/04",false],
                ["中華電","2412",96.4,5249,"2014/06/15",false],
                ["中碳","1723",192.5,918,"2014/07/05",true],
                ["創見","2451",108,733,"2014/06/30",false],
                ["華擎","3515",118.5,175,"2014/07/20",true],
                ["訊連","5203",97,235,"2014/05/31",false]];
      var store1=Ext.create("Ext.data.ArrayStore", {
          autoLoad:true,
          data:data,
          fields:[
            {name:"name"},
            {name:"id"},
            {name:"close"},
            {name:"volumn"},
            {name:"meeting"},
            {name:"election"}
            ]
          });
      var store2=Ext.create("Ext.data.Store", {
          autoLoad:true,
          proxy:{
            type:"ajax",
            url:"get_stocks.php",
            reader:{
              type:"json",
              totalProperty:"totalProperty",
              root:"root",
              idProperty:"id"
              }
            },
          fields:[
            {name:"name"},
            {name:"id"},
            {name:"close"},
            {name:"volumn"},
            {name:"meeting"},
            {name:"election"}
            ]
          }); 
      var grid1=Ext.create("Ext.grid.Panel",{
        title:"台股 (近端資料)",  //一定要設 title
        columns:columns,
        store:store1,
        width:500,
        forceFit:true
        });
      var grid2=Ext.create("Ext.grid.Panel",{
        title:"台股 (遠端資料)",  //一定要設 title
        columns:columns,
        store:store2,
        width:500,
        forceFit:true
        });
      var tp=Ext.create("Ext.TabPanel",{
        title:"台股",
        width:600,
        height:300,
        style:"margin:10px;",
        frame:true,
        autoScroll:false,
        defaults:{bodyPadding:10},
        items:[
          grid1,
          grid2,
          {title:"管理",html:"管理"}
          ],
        renderTo:Ext.getBody()
        });         
      }); //end of onReady

測試範例 2 : http://tony1966.xyz/test/extjstest/grid_in_tab_2.htm [看原始碼]  

參考資料 :

# extjs tabpanel 中添加gridpanel如何实现？
# ExtJs TabPanel Scrollbar behaviour if Tab items bigger than tab size