关键对象:
Ext.data.HttpProxy 创建访问服务端的代理
Ext.data.JsonReader 创建读取器
Ext.data.Store 数据存储器
Ext.grid.ColumnModel gridPanel呈现时,显示的列集合
Ext.PagingToolbar gridPanel分页
Ext.grid.GridPanel 数据呈现
var proxy = new Ext.data.HttpProxy({
url:'yourserverurl.ashx?action=get',
method:'GET'
});
var readerOption = {root:'Data',totalProperty:'TotalRecord',id:'ID'};
var product = Ext.data.Record.create([
{name:'ID',mapping:'ID'},//name:js下对象属性名称,mapping:对应服务器端属性名称
{name:'Name'}
]);
var reader = new Ext.data.JsonReader(
readerOption,
product
);
var store = new Ext.data.Store({
proxy:proxy,
reader:reader,
remoteSort:false//用于客户端排序[点击列头时升序/倒序]
});
var cm = new Ext.grid.ColumnModel({
columns:[
{header:'序号',tooltip:'提示序号',align:'right',width:40,dataIndex:'ID'},
{header:'产品名称',tooltip:'XX产品名称',align:'left',width:100,dataIndex:'Name'}//注意此dataIndex要与product中的name对应,且却分大小写
],
defaults:{sortable:false}//不允许客户端点击列头排序,可以打开s
});
//cm用于显示gridpanel时的列呈现
var pageBar = new Ext.PagingToolbar({
pageSize:25,
store:store,
displayInfo:true,
displayMsg:'总记录数{0}-{1}of{2}',
emptyMsg:'没有记录'
});
var grid = new Ext.grid.GridPanel({
store:store,
renderTo:'div_grid',//html页面上面必须要有以此div_grid为id的标签
cm:cm,
columnLines:true,
frame:true,
autoScroll:true,
loadMask:true,
autoExpandColumn:'Position',
height:500,
width:800,
stripeRows:true//相邻两行背景色不同
});
grid.store.on('load',function(){});//在服务器数据获取后,呈现之前自行处理结果集[比如,增加合计]
grid.loadMask.msg='加载中...';
grid.load({params:{start:0,limit:25},callback:overLoad});//callback用于在数据加载完成后处理页面的按钮状态,或其他业务需求。如果无其他需求可以去掉callback
grid.load({params:{start:0,limit:25}});
以上解释属个人理解,如有不妥,望指正。
分享到:
相关推荐
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
NULL 博文链接:https://atian25.iteye.com/blog/1019910
主要介绍了ExtJs的Ext.Ajax.request实现waitMsg等待提示效果,需要的朋友可以参考下
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
Extjs4.1多个扩展 1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide ...注明:在Extjs4.1上是可以使用的,Extjs4.2部分会有问题。
NULL 博文链接:https://sonckchi.iteye.com/blog/1958861
关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this....
ExtJs选中var editor = new Ext.ux.grid.RowEditor详解.txt
ExtJS tooltip功能组件实例
EXTjs的上传组件
Ext Extjs 禁止文本和日期编辑 ExtJS中动态设置TextField的readOnly属性
ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例
extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....
代码如下: Ext.onReady(function() { Ext.Msg.alert(‘提示’, ‘逗号分隔参数列表’); //这种方式非常常见的 }); 效果图: 代码如下: Ext.onReady(function() { //定义 JSON(配置对象) var config = { ...
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
Ext.ux.GoogleChart extjs插件Ext.ux.GoogleChart extjs插件
该ext.jsb2文件是ExtJS3.4.0中的,因ExtJS4.0.0中没有这个文件,但可以与4.0.0版本共用。