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: '姓名',  120, dataIndex: 'usename', editor: 'textfield' 
        }, 
        { 
            text: '日期',  120, dataIndex: 'time',renderer:Ext.util.Format.dateRenderer('Y-n-j H:i:s')//*******显示时间格式

         },
		 {
		    text: '数据名称',  120, dataIndex: 'dataname'
		 },
		 {
		    text: '数据类型',  120, dataIndex: 'datatype'
		 },
		 {
		    text: '申请单位',  60, dataIndex: 'danwei'
		 },
		 {
		    text: '地址',  50, dataIndex: 'address'
		 },
		 {
		    text: '用途',  50, dataIndex: 'yongtu'
		 },
		 {
		    text: '电话',  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: '姓名',  120, dataIndex: 'usename', editor: 'textfield' 
        }, 
        { 
            text: '日期',  120, dataIndex: 'time',renderer:Ext.util.Format.dateRenderer('Y-n-j H:i:s')//*******显示时间格式

         },
		 {
		    text: '数据名称',  120, dataIndex: 'dataname'
		 },
		 {
		    text: '数据类型',  120, dataIndex: 'datatype'
		 },
		 {
		    text: '申请单位',  60, dataIndex: 'danwei'
		 },
		 {
		    text: '地址',  50, dataIndex: 'address'
		 },
		 {
		    text: '用途',  50, dataIndex: 'yongtu'
		 },
		 {
		    text: '电话',  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',
             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',
				 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',
				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();
	    
	   
     }