EXTJS分别用数组和JSON对象数组填充表格数据

1,首先说一下用数组填充ExtJS表吧,这个在网上随处找得到

下面的代码是我写的弹出窗口的一个JS函数:

function trialTotal(){
      var tablecol = new Ext.grid.ColumnModel([
                                          {header:"",dataIndex:"rowname"},
                                          {header:"借方科目",dataIndex:"loanaccount"},
                                          {header:"贷方科目",dataIndex:"lendaccount"}           
                                          ]);

       var tabledata = [//此处定义一个要加载的数据数组
                        ["年初数","214324","234234324"],
                        ["","+","-"],
                        ["借方累计","0.00","0.00"],
                        ["","-","+"],
                        ["贷方累计","0.00","0.00"],
                        ["","=","="],
                        ["期初余额",","214324","234234324"]
                        ];
          var tablestore = new Ext.data.Store({
               proxy: new Ext.data.MemoryProxy(tabledata),
               reader: new Ext.data.ArrayReader({},[//注意在用数组填充数据时,为ArrayReader
                     {name:"rowname"},
                     {name:"loanaccount"},
                     {name:"lendaccount"}
               ])
              });
          tablestore.load();
          var grid = new Ext.grid.GridPanel({
           region:"center",         
           store:tablestore,
              cm:tablecol                                          
          });
  
   var trialwin = new Ext.Window({
    //el:"trialwin",
    title:"试算平衡",
    layout:"border",
    width:400,
    height:300,
    modal:true,
    colseAction:"colse",
    items:[grid],
    buttons:[{
     text:"确定"
     },{
     text:"取消"     
      }]
   });
   trialwin.show();
    }

在JS中用一个按钮的事件调用此函数即可弹出的窗口

2,下面是用JSON对象数组填充EXTJS表格

其实改动两处代码就可以了,但为了方便查看,还是将全部代码粘下吧

function trialTotal(){
   var data= "[{rowname:'年初数',loanaccount:'35435',lendaccount:'354523554'}"
            +",{rowname:'',loanaccount:'+',lendaccount:'-'}"
            +",{rowname:'借方累计',loanaccount:'0.00',lendaccount:'0.00'}"
            +",{rowname:'',loanaccount:'-',lendaccount:'+'}"
            +",{rowname:'贷方累计',loanaccount:'0.00',lendaccount:'0.00'}"
            +",{rowname:'',loanaccount:'=',lendaccount:'='}"
            +",{rowname:'期初余额',loanaccount:'34525',lendaccount:'354532'}]";

var tablejsondata= Ext.util.JSON.decode(data);//将json字符串转换为JSON对象数组
   var tablecol = new Ext.grid.ColumnModel([
                                          {header:"",dataIndex:"rowname"},
                                          {header:"借方科目",dataIndex:"loanaccount"},
                                          {header:"贷方科目",dataIndex:"lendaccount"}           
                                          ]);
          var tablestore = new Ext.data.Store({
               proxy: new Ext.data.MemoryProxy(tablejsondata),
               reader: new Ext.data.JsonReader({},[//注意此处为JsonReader,而不再是ArrayReader了
                     {name:"rowname"},
                     {name:"loanaccount"},
                     {name:"lendaccount"}
               ])
              });
          tablestore.load();
          var grid = new Ext.grid.GridPanel({
           region:"center",         
           store:tablestore,
              cm:tablecol                                          
          });
  
   var trialwin = new Ext.Window({
    //el:"trialwin",
    title:"试算平衡",
    layout:"border",
    width:400,
    height:300,
    modal:true,
    colseAction:"colse",
    items:[grid],
    buttons:[{
     text:"确定"
     },{
     text:"取消"     
      }]
   });
   trialwin.show();
     }

你可能感兴趣的:(json,function,header,layout,ExtJs,border)