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属性详析 #### 一、Ext.grid.GridPanel概述 `Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。...
Ext.grid.GridPanel 删除线 放到example文件夹下运行
解决Ext.grid.GridPanel中的单元格不能选中复制的问题需要从两个方面入手:添加新的CSS样式和修改Ext.grid.GridPanel的protoType。这些解决方案可以帮助开发者解决这个棘手的问题,提高用户体验。
var grid = new Ext.grid.GridPanel({ store: store, // 绑定数据存储 columns: [/* 定义列 */], plugins: [editor], // 使用 RowEditor 作为插件 title: 'My Grid', width: 500, height: 300, renderTo: ...
2. Ext.grid.EditorGridPanel:EditorGridPanel是Ext JS中的一种网格组件,它扩展了GridPanel,增加了单元格级别的编辑功能。用户可以直接在表格中修改数据,而无需跳转到单独的编辑页面。 二、核心特性 1. 可编辑...
为了实现在数据刷新时滚动条位置不变的效果,我们需要对`Ext.grid.GridView`进行扩展或覆盖。具体做法是监听`beforerefresh`和`refresh`事件,在这些事件中记录并恢复滚动条的位置。 ##### 监听beforerefresh事件 ...
Ext.grid.ColumnModel显示不正常
右键菜单的资料,代码已经详细描写。请仿照文件中所描述即可使用,不限于EXT4.0以上版本使用。
这个插件主要用于改进Ext Grid的用户体验,特别是处理大量数据时,通过列锁定和多表头功能,使得用户能够更有效地浏览和操作数据。 首先,"列锁定"是Ext Grid中一个非常实用的功能,特别是在显示宽广、多列的数据表...
var grid = Ext.create('Ext.grid.Panel', { store: store, columns: columns, renderTo: Ext.getBody() // 渲染到页面 }); ``` 接下来,我们需要为GridPanel添加双击事件监听器。在ExtJs中,我们可以使用`...
在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...
解决 ExtJS GridPanel 单元格无法选中复制的问题需要两个步骤:添加新的 CSS 样式和修改 Ext.grid.GridPanel 的 prototype。通过这些步骤,我们可以使得单元格的内容可以被选中和复制,从而提高用户体验。
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
**2.6 Grid Panel (Ext.grid.GridPanel)** - **xtype**: `grid` - **功能描述**:Grid Panel 是一个用于展示表格数据的组件。 - **主要用途**:展示结构化数据,支持排序、过滤等功能。 **2.7 Paging Toolbar (Ext...
EXT GridPanel是EXT JS库中的一个核心组件,用于创建数据密集型的表格视图。它在Web应用程序中常用于展示大量结构化数据,并提供多种交互功能,如排序、分页、筛选和编辑等。在EXT GridPanel中,获取某一单元格的值...
总之,解决Ext的gridpanel控件二次加载时丢失的问题需要对Ext JS的生命周期管理有深入的理解,并结合实际应用场景选择合适的策略。无论是使用全局变量还是优化加载机制,关键在于确保GridPanel实例和数据的正确管理...
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
在探讨“Ext Grid表格的自动宽度及高度的实现”这一主题时,我们深入解析如何在Ext JS框架下,利用其强大的Grid组件自适应容器尺寸,实现表格宽度与高度的自动调整。这一技术对于构建响应式、用户友好的界面至关重要...
其表格组件(`Ext.grid.GridPanel`)是其最具特色的功能之一,广泛应用于数据展示和管理。 #### 二、代码分析 在本例中,我们首先引入了必要的 ExtJS 相关文件,包括样式表、脚本等资源。 ```html ...
ExtJS是一款基于JavaScript的RIA(Rich Internet Application,富互联网应用)框架,它提供了许多强大的功能和组件,其中之一就是表格组件Ext.grid.GridPanel。 Ext.grid.GridPanel是一个功能强大的表格控件,它...