/**
* 封装GridPanel
*/
Ext.dream = {
/**
* url:请求的地址 record:记录对象 tbar:顶部工具栏 columnModel:需要显示的列 pageSize:每页显示的记录数
* var cfg = {};
* cfg['fields'] = fields;
* cfg['url'] = 'server.jsp';
* cfg['recordName'] = "Menu";
* cfg['record'] = Menu;
* cfg['tbar'] = topBar;
* cfg['columnModel'] = columnModel;
* cfg['pageSize'] = 4;
* cfg['sm'] = sm;配置列选择模式
*/
createGridPanel : function(cfg) {
// 定义信息数据集对象
var dataStore = new Ext.data.Store( {
autoLoad : false,
url : cfg.url,
reader : new Ext.data.XmlReader( {
totalRecords : "totalNum",
record : cfg.recordName
}, cfg.record)
// XmlReader结束
});// 数据集对象创建结束
var pagingBar = new Ext.PagingToolbar( {
store : dataStore,
pageSize : cfg.pageSize,
displayInfo : true,
displayMsg : '第{0}条到第{1}条,一共{2}条',
emptyMsg : "没有信息"
});
// 创建Grid表格组件
var gridPanel = new Ext.grid.GridPanel( {
border : false,
width : Ext.get('box').getWidth(),
frame : true,
tbar : cfg.tbar,
bbar : pagingBar,
store : dataStore,
stripeRows : true,
viewConfig : {
forceFit : true
},
sm : cfg.sm,// 列选择模式
cm : cfg.columnModel
});// 创建grid表格结束
dataStore.load( {
params : {
start : 0,
limit : cfg.pageSize
}
})
return gridPanel;
}
};
分享到:
相关推荐
在ExtJS中,`GridPanel`是用于展示表格数据的重要组件,它提供了丰富的配置选项和数据操作方法。 #### 配置选项 - `colModel`: 定义列模型,包括列名、宽度、是否隐藏等。 - `store`: 数据存储,负责提供数据源。 -...
在Ext JS框架中,`GridPanel` 是一种用于展示和管理表格数据的重要组件。它提供了丰富的功能,例如排序、缓存、拖动列、隐藏列、自动显示行号、列汇总以及单元格编辑等功能。`GridPanel` 类继承自 `Panel` 类,并且...
它提供了丰富的组件,如GridPanel,用于展示和操作表格数据。GridPanel不仅支持数据的动态加载和排序,还允许开发者将其数据导出到多种格式,包括Excel。 导出GridPanel数据至Excel通常涉及到以下几个步骤: 1. **...
总的来说,跨行合并是增强ExtJS 4.0 GridPanel用户体验的一个有效手段,通过自定义模板和计算逻辑,我们可以灵活地控制表格的显示效果,使数据呈现更加清晰、有条理。通过上述步骤和示例代码,你应该能够成功地在你...
表格组件GridPanel是Extjs中的亮点之一,它不仅可以展示大量数据,还支持复杂的列模型和行操作。此外,GridPanel的分页功能和扩展组件如摘要行、可展开行、分组视图等,让数据的展示更加直观和易于管理。 通过学习...
- **分页**: 展示了如何实现表格数据的分页显示。 #### GridPanel扩展 GridPanel的功能可以通过多种方式进行扩展,以适应不同的业务需求。 - **学会自学吧,朋友**: 鼓励读者自主探索和学习GridPanel的相关知识。...
### ExtJs中文教程知识点概览 #### 一、ExtJs简介 - **ExtJs**是一款基于JavaScript的开源前端框架,用于构建复杂的Web应用程序。 - 它提供了丰富的UI组件库、强大的数据... - 实现按特定字段对表格数据进行分组显示。
2、演示控件封装如:表格控件,文本框控件,布局控件,列表控件,图表控件,分页控件等等。 3、演示插件使用和封装插件、面向对象继承等等。4、演示更换皮肤功能。5、演示json数据封装。 6、演示前台和后台数据的...
- **表格面板**:`GridPanel`是Extjs中用于展示大量数据的高级组件,支持排序、过滤等功能。 - **列模型与数据**:解释如何定义列模型以及如何将数据绑定到表格中。 #### 十九、行模型与Grid视图 - **行选择模型**...
而Extjs在展示表格数据时,可以进行高度的定制化处理,例如根据特定条件来改变表格某一行的背景色。 要实现这样的效果,可以通过Extjs的渲染器(Renderer)功能来实现。渲染器实际上是一个函数,它根据传入的数据...
例如,FormPanel用于创建表单,GridPanel用于展示数据表格,Toolbar用于提供操作按钮等。 3. **数据绑定**:EXT 3.0支持双向数据绑定,允许UI组件与数据源(如Store)之间实时同步。数据可以通过Ajax请求从服务器...
- **GridPanel**:数据网格是显示大量表格数据的有效方式,支持排序、分页、行选择、编辑等功能。 - **Column Model**:定义网格列的展示和行为。 - **Editor Grid**:允许用户直接在网格中编辑数据。 4. **表单...
在EXTJS框架中,`GridPanel`组件是一种常用的数据展示工具,它能够以表格形式呈现数据集。而分页功能是`GridPanel`一个重要的特性,它能够帮助用户更有效地管理大量的数据记录,避免一次性加载过多数据导致的性能...
5. **GridPanel**:ExtJS的GridPanel是展示大量结构化数据的理想选择。它支持分页、排序、过滤和编辑等功能,可以轻松地创建功能完备的数据表格。 6. **Form组件**:ExtJS提供了多种表单控件,如文本框、下拉框、复...