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();
}
