Extjs Grid 数据绑定 json 分页 不分页

第一种不分页

?

var itemsPerPage = 10;

            

Ext.define('User', {

    extend: 'Ext.data.Model',

               // fields定义字段和数据类型

    fields: [

                         

        { name: 'usename', type: 'string' },

        //{ name: 'time', type: 'string' } ,

      { name: 'time', type: 'date',dateFormat:'Y-n-j H:i:s' } ,

        //{ name: 'time', type: 'date',dateFormat:Ext.Date.patterns.ISO8601Long } ,

    //  { name: 'time', type: 'date',renderer:Ext.util.Format.dateRender('Y-n-j H:i:s')} ,

        { name: 'dataname', type: 'string' },

        { name: 'datatype', type: 'string' } ,

        { name: 'danwei', type: 'string' } ,

        { name: 'address', type: 'string' } ,

        { name: 'yongtu', type: 'string' } ,

        { name: 'telephone', type: 'string'}

            ]

});

 

           //定义数据集

var store3 = Ext.create('Ext.data.Store', {

     

    model: 'User',

    autoLoad: true,

     pageSize: itemsPerPage,  //分页数据条数

//  autoLoad: {start:0,limit:10},

    

    proxy: {

        type: 'ajax',

        url: '../XiaZaiGl.ashx?dtype=all&dtime=all', //获取json地址

        //  url: '../Test.ashx',

                   //Reader 解码json数据

        reader: {

            type: 'json',

            root: 'data',

            totalProperty: 'totle'

                }

            }

    //sortInfo:{field:'ID',direction:'ASC'}

});

            

var grid3=Ext.create('Ext.grid.Panel', {          

    store: store3,        //设置数据源

   // title: 'asdasd',   //标题

 

               //定义列名

    columns: [

        {

            text: '姓名', width: 120, dataIndex: 'usename', editor: 'textfield'

        },

        {

            text: '日期', width: 120, dataIndex: 'time',renderer:Ext.util.Format.dateRenderer('Y-n-j H:i:s')//*******显示时间格式

 

         },

         {

            text: '数据名称', width: 120, dataIndex: 'dataname'

         },

         {

            text: '数据类型', width: 120, dataIndex: 'datatype'

         },

         {

            text: '申请单位', width: 60, dataIndex: 'danwei'

         },

         {

            text: '地址', width: 50, dataIndex: 'address'

         },

         {

            text: '用途', width: 50, dataIndex: 'yongtu'

         },

         {

            text: '电话', width: 50, dataIndex: 'telephone'

         }

            ]

 

});

 第二种 不分页

在html 页面添加 样式类

?

<script type="text/javascript" charset="utf-8" src="ext-4.0.7-gpl/ext-all.js"></script> 

    <script type="text/javascript" src="ext-4.0.7-gpl/examples/ux/data/PagingMemoryProxy.js"></script>

      <script type="text/javascript" src="ext-4.0.7-gpl/examples/ux/ProgressBarPager.js"></script>

   <script type="text/javascript" src="ext-4.0.7-gpl/locale/ext-lang-zh_CN.js"></script>

 分页写法如下

?

第二种 分页

 var  DD=[

     ['55','laoyang,'2012-1-2','09-532-02','bb','vv','nn','hh']

     ]

     

    var youData=[

     

        ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],

        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],

        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],

        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],

        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],

        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],

        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am']

     

      ];

 

 

    // register model

    Ext.define('Company', {

        extend: 'Ext.data.Model',

       // idProperty: 'company',

        fields: [

        {name: 'usename', type: 'string'},

        {name: 'time', type: 'date',dateFormat:'Y-n-j H:i:s'},

        {name: 'dataname', type: 'string'},

        { name: 'datatype', type: 'string' } ,

        { name: 'danwei', type: 'string' } ,

        { name: 'address', type: 'string' } ,

        { name: 'yongtu', type: 'string' } ,

        { name: 'telephone', type: 'string'}

        ]       

    });

     

 

    // create the data store

    var Recordstore = Ext.create('Ext.data.Store', {

        model: 'Company',

        autoLoad:true,

        remoteSort: true,

       pageSize: 10,

        proxy: {

            type: 'pagingmemory',

            data: DD,

            reader: {

                type: 'array'

            }

        }

    });

   

 

var itemsPerPage = 10;

            

Ext.define('User', {

    extend: 'Ext.data.Model',

               // fields定义字段和数据类型

    fields: [

                         

        { name: 'usename', type: 'string' },

        //{ name: 'time', type: 'string' } ,

      { name: 'time', type: 'date',dateFormat:'Y-n-j H:i:s' } ,

        //{ name: 'time', type: 'date',dateFormat:Ext.Date.patterns.ISO8601Long } ,

    //  { name: 'time', type: 'date',renderer:Ext.util.Format.dateRender('Y-n-j H:i:s')} ,

        { name: 'dataname', type: 'string' },

        { name: 'datatype', type: 'string' } ,

        { name: 'danwei', type: 'string' } ,

        { name: 'address', type: 'string' } ,

        { name: 'yongtu', type: 'string' } ,

        { name: 'telephone', type: 'string'}

            ]

});

 

           //定义数据集

var store3 = Ext.create('Ext.data.Store', {

     

    model: 'User',

    autoLoad: true,

     pageSize: itemsPerPage,  //分页数据条数

//  autoLoad: {start:0,limit:10},

    

    proxy: {

        type: 'ajax',

        url: '../XiaZaiGl.ashx?dtype=all&dtime=all', //获取json地址

        //  url: '../Test.ashx',

                   //Reader 解码json数据

        reader: {

            type: 'json',

            root: 'data',

            totalProperty: 'totle'

                }

            }

    //sortInfo:{field:'ID',direction:'ASC'}

});

     

    // create the Grid

 

var grid3=Ext.create('Ext.grid.Panel', {          

    store: Recordstore,        //设置数据源

    columns: [

        {

            text: '姓名', width: 120, dataIndex: 'usename', editor: 'textfield'

        },

        {

            text: '日期', width: 120, dataIndex: 'time',renderer:Ext.util.Format.dateRenderer('Y-n-j H:i:s')//*******显示时间格式

 

         },

         {

            text: '数据名称', width: 120, dataIndex: 'dataname'

         },

         {

            text: '数据类型', width: 120, dataIndex: 'datatype'

         },

         {

            text: '申请单位', width: 60, dataIndex: 'danwei'

         },

         {

            text: '地址', width: 50, dataIndex: 'address'

         },

         {

            text: '用途', width: 50, dataIndex: 'yongtu'

         },

         {

            text: '电话', width: 50, dataIndex: 'telephone'

         }

            ],

       bbar: Ext.create('Ext.PagingToolbar', {

            pageSize: itemsPerPage,

            store: Recordstore,

            displayInfo: true,

           plugins: Ext.create('Ext.ux.ProgressBarPager', {})

        })

 

});

 

 

 

function  ShowRecordGrid()

{

    //var pwin;

    if (!pwin) {

        pwin = Ext.create('widget.window', {

            title: '记录查询',

            closable: true,

            closeAction: 'hide',

            width: 650,

            minWidth: 350,

            height: 450,

            layout: 'fit',

            bodyStyle: 'padding: 5px;',

            tbar:[

            {

                 text:'刷新',

                 handler:function(){

                     var datatype=Ext.getCmp('XZGL_MENU_Comb').getValue();

                     var datatime=Ext.getCmp('XZGL_MENU_TIME_Combo2').getValue();

                     if(datatype==="")

                     {

                        datatype="all";

                     }

                     if(datatime==="")

                     {

                         datatime="all";

                     }

                    // store3.proxy.url="../XiaZaiGl.ashx?dtype="+datatype+"&dtime="+datatime

                    // store3.load();      

                   getdatafromserver(datatype,datatime);                   

                 }

            },

            {

                 xtype:'combo',

                 hideLabel:true,

                 id:'XZGL_MENU_Comb',

                 name:'XZGL_NAME_Combo',

                 displayField:'bbb',

                 valueField:"aaa",

                 typeAhead:true,

                 mode:'local',

                 triggerAction:'all',

                 width:100,

                 emptyText:"数据类型",

                 selectOnFocus:true,

                 store: new Ext.data.SimpleStore({

                     fields:['aaa','bbb'],

                     data:[ ['TF',"图幅"],['KZD',"控制点"],['all',"全部"]]

                  })

 

            },

            '-',

            {

                xtype:'combo',

                hideLabel:true,

                id:'XZGL_MENU_TIME_Combo2',

                name:'XZGL_NAME_MENU_Combo2',

                displayField:'Tb',

                valueField:'Ta',

                mode:'local',

                triggerAction:'all',

                width:100,

                emptyText:'查询时间',

                selectOnFocus:true,

                store:new Ext.data.SimpleStore({

                     fields:['Ta','Tb'],

                     data:[ ['onemonth',"本月"],['threemonth',"近三个月"],['oneyear',"一年"],['all',"全部"]]

                 

                })

            }],

            //html:'<div>aaa</div>'

             items:grid3    ,

             listeners:{

                  "show":function(){

                    // alert("初始化");

                     getdatafromserver("all","onemonth");

                  }

              }              

        })

       }

    pwin.show();

 

}

 

    function  getdatafromserver(type,time)

    {

        Ext.Ajax.request({

        url:"../XiaZaiGl.ashx?dtype="+type+"&dtime="+time,

        waitMsg : '正在查询分析....',

        success:Suceeresult,

        failure:function(response,opts){

         

         Ext.Msg.alert('查询提交失败：', response.responseText);

         window.status=" ";

        }      

        })

     

     

     

    }

    function Suceeresult(response,opts)

     {

       // alert(response.responseText);

        var strjson=response.responseText;        

        var HesData=Ext.JSON.decode(strjson)['data'];

        var leng=HesData.length;

        var Bigitems=[];

        for(var i=0;i<leng;i++)

        {

             var itemsarray=[];

             var a1=HesData[i]['usename'];

             var a2=HesData[i]['time'];

             var a8=HesData[i]['dataname'];

             var a3=HesData[i]['datatype'];

             var a4=HesData[i]['danwei'];

             var a5=HesData[i]['address'];

             var a6=HesData[i]['yongtu'];

             var a7=HesData[i]['telephone'];

              

             itemsarray.push(a1,a2,a8,a3,a4,a5,a6,a7);

             Bigitems.push(itemsarray);

        }

        Recordstore.proxy.data=Bigitems;

                 

        Recordstore.load();

         

        

     }