//下面红色部分设置属性值,看注释
var _store = Ext.create('Ext.data.Store', {
fields : ['name', 'name2','name3'],
proxy : {
type : 'ajax',
url : 'test!request.action',
reader : {
type : 'json',
root : 'data'
}
},
listeners : {
'load' : function(t, records, successful, eOpts) {
if (successful && records.length == 1
&& records[0].raw.state == -1) { 根据后台返回异常状态,如果load加载错误,返回错误信息。
t.removeAll();
Ext.Msg.alert('异常', records[0].raw.exMsg);
}
}
}
});
Ext.create('Ext.grid.Panel', {
columnLines : true,
store : _store,
border : false,
bodyBorder : false,
lazyLoad : true,
columns : [new Ext.grid.RowNumberer(), {
header : '列1',
dataIndex : 'name',
sortable : false,
flex : 4.5 //占比9/20
}, {
header : '列2',
dataIndex : 'name2',
sortable : false,
flex : 4.5 //占比9/20
}, {
text : '列三',
dataIndex : 'name3',
sortable : false,
flex : 1, //占比1/10
renderer : function(v, m, r) {
return '列3(占1/10)';
}
}];,
loadMask : true,
forceFit : true, //按照比例分配宽度属性。总数为10
});
相关推荐
这篇博客"EXTJS_GridPanel_ColumnModel_列的宽度随数据变化而变化"探讨了如何使GridPanel的列宽根据数据内容自动调整,以确保最佳的用户界面体验。 在EXTJS中,ColumnModel允许我们定义每列的标题、数据字段、宽度...
在EXTJS中,GridPanel是一种常用的组件,用于展示表格数据。在实际应用中,我们经常需要在GridPanel底部显示一行“合计”行,以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加...
ExtJS的GridPanel导出excel文件,方便快捷易懂!
在本文中,我们将深入探讨ExtJS4中的GridPanel样式及其选择模式。GridPanel是ExtJS框架中用于展示数据的一种重要组件,它允许用户以表格形式查看、操作和管理大量信息。 首先,我们来看一个简单的GridPanel示例。在...
在ExtJs中,GridPanel是用于展示数据的常用组件,它可以提供丰富的功能,如排序、分页、筛选等。在实际应用中,我们经常需要监听用户的交互行为,比如双击行进行进一步的操作。本篇文章将深入讲解如何在ExtJs ...
尽管EXTJS GridPanel功能强大,但也有其局限性,比如在EXTJS 2.02版本中可能不支持列锁定和默认的统计功能,也不直接支持数据导出为Excel或PDF格式。然而,随着EXTJS版本的迭代,这些问题在后续版本中得到了改进。 ...
在深入探讨ExtJS.GridPanel中的日期格式设置之前,我们首先简要回顾一下ExtJS是什么以及GridPanel组件的基本功能。ExtJS是一个用JavaScript编写的开源框架,用于构建交互式的Web应用程序,它提供了丰富的UI组件和...
后来公司让改变一个Gridpanel的展现方式,要求实现滚屏的效果。于是我就开始找API相关的功能了。找了很久,也没有找到框架的相应控制方法,然后在网上找了很久,也没有找到有人给去示例,无奈就只能自己写JS来控制...
4. **width**: 列的宽度。 5. **align**: 列内数据的对齐方式(左、中、右)。 6. **hidden**: 是否隐藏列。 7. **fixed**: 列是否固定宽度。 8. **menuDisabled**: 是否禁用列的上下文菜单。 9. **resizable**...
列模型定义了每一列的属性,如宽度、标题、对齐方式等。通过 ColumnModel,可以设置列的可编辑性、默认排序和隐藏/显示状态。 3. **getSelectionModel()**: `getSelectionModel()` 返回 GridPanel 的选择模型...
4. 实例化GridPanel:配置GridPanel的各种属性,如高度、宽度、是否可拖动列等,然后将Store和ColumnModel传递给GridPanel。 5. 渲染GridPanel:将GridPanel添加到容器中,完成渲染。 在实际应用中,GridPanel还...
在给定的"ExtJs GridPanel延时加载.rar"文件中,主要涉及的核心概念是ExtJs中的GridPanel组件以及延时加载技术。GridPanel是ExtJs中一个非常重要的组件,它用于展示表格数据,而延时加载则是一种优化大量数据处理的...
ExtJS表格面板(GridPanel)是Sencha Ext JS框架中的一个核心组件,它用于展示大量结构化数据。在本文中,我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例,以及与其相关的源码和工具。 首先,让我们...
4. **事件处理**:GridPanel 提供了多种事件,如 cellClick、rowDblClick 等,可以绑定事件处理器函数以响应用户交互。 5. **排序和分页**:通过设置 GridPanel 的 sortableColumns 和 pagingToolbar 属性,可以...
2. 创建GridPanel:定义Grid的数据模型,设置列配置,添加行操作和列筛选。 3. 数据绑定:通过store将TreePanel和GridPanel连接起来,使得选择树节点可以动态改变Grid的数据。 4. 事件监听:添加事件监听器来响应...
通过配置列定义(columns),我们可以指定列的标题、宽度、对齐方式等属性。 2. **数据绑定**: GridPanel 通常与 Store 关联,Store 是一个内存中的数据集合,可以从中加载和保存数据。通过 Store,GridPanel ...
Extjs4中的GridPanel是一个用来展示数据列表的强大组件,其功能之丰富在Web前端开发领域广受好评。为了更好地理解和使用Extjs4 GridPanel,下面将详细介绍其主要配置参数。 首先,GridPanel的store配置项是表格的...
在ExtJS 4中实现两个GridPanel间的数据拖拽功能涉及到了ExtJS框架提供的丰富的组件和插件支持。拖拽功能让用户可以通过交互式地拖动界面元素来执行操作,如移动或复制数据项等。这里的主要知识点是使用ExtJS提供的...
在ExtJs中,`GridPanel` 是一个非常重要的组件,用于展示数据表格。在实际的业务场景中,我们经常需要对表格内的文本进行格式化,例如使其垂直居中。本篇将详细介绍如何在ExtJs中设置`GridPanel`表格文本垂直居中。 ...