Ext.onReady(function(){
var proxy=new Ext.data.HttpProxy({url:'JsonServlet? action=moneyList'});
var record=new Ext.data.Record.create([{name:'id',type:'string',mapping:'id'},
{name:'userName',type:'auto',mapping:'userName'},
{name:'idCard',type:'auto',mapping:'idCard'},
{name:'docId',tpye:'auto',mapping:'docId'},
{name:'date',type:'auto',mapping:'date'},
{name:'ymoney',type:'auto',mapping:'ymoney'},
{name:'smoney',type:'auto',mapping:'smoney'}
]);
var reader=new Ext.data.JsonReader({totalProperty:'count',root:'root'},record);
var store=new Ext.data.Store({
proxy:proxy,
reader:reader
});
store.load({params:{start:0,limit:300}});
//表格列
var cm=new Ext.grid.ColumnModel([
{header:'薪酬发放单号',dataIndex:'id'},
{header:'姓名',dataIndex:'userName'},
{header:'身份证号',dataIndex:'idCard'},
{header:'档案编号',dataIndex:'docId'},
{header:'登记时间',dataIndex:'date'},
{header:'应发金额',dataIndex:'ymoney'},
{header:'实发金额',dataIndex:'smoney'}]);
//表格
var grid=new Ext.grid.GridPanel({
store:store,
cm:cm,
autoHeight:true,
bodyStyle:"width:100%",
autoWidth:true,
renderTo:'div1',
frame:true,
/*
*默认情况下,grid可以拖放列,也可以改变列的宽度,如果要禁用这两个功能,可以在定义Grid对象时分别设置enableColumnMove和enableColumnResize为false即可
*/
enableColumnMove:false,
enableColumnResize:false,
//grid还支持一种读取数据时的遮罩和提示功能,设置属性loadMask:true,在store.load()完成之前会一直显示"Loading。。。。。。。。。"
loadMask:true
});
});
如上代码:loadMask:true没有任何效果
解决办法:store.load()这句话需要放在var grid=new Ext.grid.GridPanel({})之后
修改后的代码:
Ext.onReady(function(){
var proxy=new Ext.data.HttpProxy({url:'JsonServlet?action=moneyList'});
var record=new Ext.data.Record.create([{name:'id',type:'string',mapping:'id'},
{name:'userName',type:'auto',mapping:'userName'},
{name:'idCard',type:'auto',mapping:'idCard'},
{name:'docId',tpye:'auto',mapping:'docId'},
{name:'date',type:'auto',mapping:'date'},
{name:'ymoney',type:'auto',mapping:'ymoney'},
{name:'smoney',type:'auto',mapping:'smoney'}
]);
var reader=new Ext.data.JsonReader({totalProperty:'count',root:'root'},record);
var store=new Ext.data.Store({
proxy:proxy,
reader:reader
});
//表格列
var cm=new Ext.grid.ColumnModel([
{header:'薪酬发放单号',dataIndex:'id'},
{header:'姓名',dataIndex:'userName'},
{header:'身份证号',dataIndex:'idCard'},
{header:'档案编号',dataIndex:'docId'},
{header:'登记时间',dataIndex:'date'},
{header:'应发金额',dataIndex:'ymoney'},
{header:'实发金额',dataIndex:'smoney'}]);
//表格
var grid=new Ext.grid.GridPanel({
store:store,
cm:cm,
autoHeight:true,
bodyStyle:"width:100%",
autoWidth:true,
renderTo:'div1',
frame:true,
/*
*默认情况下,grid可以拖放列,也可以改变列的宽度,如果要禁用这两个功能,可以在定义Grid对象时分别设置enableColumnMove和enableColumnResize为false即可
*/
enableColumnMove:false,
enableColumnResize:false,
//grid还支持一种读取数据时的遮罩和提示功能,设置属性loadMask:true,在store.load()完成之前会一直显示"Loading。。。。。。。。。"
loadMask:true
});
store.load({params:{start:0,limit:300}});
});
分享到:
相关推荐
Ext.grid.GridPanel属性祥解, 表格部门的详解,通俗易懂,适合初学人员,以及想对GridPanel有个精析认识的Web开发人员
Ext.grid.GridPanel 删除线 放到example文件夹下运行
Ext.grid.ColumnModel显示不正常
右键菜单的资料,代码已经详细描写。请仿照文件中所描述即可使用,不限于EXT4.0以上版本使用。
此文档是可编辑表格Ext.grid.EditorGridPanel的说明以及示例的源代码,放到eclipse里面即可运行,显示出效果!
Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作
Ext.grid.GridPanel有一个重大缺陷,就是单元格的内容不能选中,没法选中就没法复制,给用户带来很多不便,下面是从网上搜到的解决方案。
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
Ext grid panel 滚动条位置不变,适用于实时数据的刷新
将页面的GridPanel中的数据导出到Excel中 测试Ext:版本2.2.1 支持GridSummary,GroupSummary和GroupHeaderPlugin插件 使用方法: 1)把三个JS文件引入到页面中 2)调用例句: var data2Excel = new Ext.icss.Data2...
EXT GridPanel获取某一单元格的值
该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。
Ext修改GridPanel数据和字体颜色等,不是单指EditGridPanel 首先获取选中的行(当然也可以获取单元格): 代码如下: var selectedRow = grid.getSelectionModel().getSelected(); 修改设置: 代码如下: selectedRow....
// not rendered } var g = this.grid; var c = g.getGridEl(); var csize = c.getSize(true); var vw = csize.width; if (!g.hideHeaders && (vw < 20 || csize.height < 20)) { // display: // none? ...
使用ext.net代码动态创建gridpanel后任意显示在各种窗口中
详细介绍GridPanel各项属性,ExtJS 普通表格:Ext.grid.GridPanel属性详解
Ext的gridpanel控件二次加载时丢失解决方案
var grid = new Ext.grid.GridPanel({ bbar: new Ext.PM3PagingToolbar({ store : store, displayInfo : true, displayMsg: '显示 {0} - {1} 行 总数 {2} 行', emptyMsg : '没有数据显示' }) }); store...
表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid。ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store。表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义)、而...