/* 创建选择模式对象.多选框*/
var cb = new Ext.grid.CheckboxSelectionModel(
{
width:20,//宽度
singleSelect:true//是否是单选,true为单选。默认false。
});
var colM = new Ext.grid.ColumnModel([
cb,
new Ext.grid.RowNumberer({//创建行号
header : 'NO.',
width : 30,
dataIndex : "id"
}), {
header : "名称",
width : 2,//注意如果girdPanel中设置了viewConfig: {forceFit:true},
// 此时分配列宽时时按着各列的width的比例分配的。如果不写width则平均分配。
//例如三列的比例为:2:4:1
//可以直接将width写为2,4,1.这时候会按着2:4:1的比例自动分配列宽
dataIndex : 'name',
sortable : true//可排序
}, {
header : "备注",
width :4,
dataIndex : 'memo',
sortable : true
}, {
header : "日期",
width : 1,
dataIndex : 'time'
}
]);
/*gird的数据装载器*/
var store = new Ext.data.JsonStore({
url : 'myUrl',//action路径
root : 'items',//要求返回数据json格式为:{results:3,items:[{},{},{}]}
totalProperty : "results",
fields : ['id','name','memo','time']
});
/*分页工具栏*/
var pageBar = new Ext.PagingToolbar({
store : store,
pageSize : pageSize,
displayInfo : true,
displayMsg : '第 {0} 条到 {1} 条, 一共 {2} 条',
emptyMsg : "没有记录",
beforePageText : '页码',
afterPageText : '总页数 {0}',
firstText : '首页',
prevText : '上一页',
nextText : '下一页',
lastText : '末页',
refreshText : '刷新'
});
var grid = new Ext.grid.GridPanel({
id : 'grid',//唯一标示
frame : true,//背景颜色
store : store,//数据装载器
region : "center",//如果父容器用borer布局时,该grid位于中心。
enableHdMenu : false,//设置表头不可用
labelAlign : 'left',//文字居左
viewConfig: {forceFit:true}, //自动分配列宽
loadMask : true,//显示加载提示
cm : colM,//列模型
sm:cb,//多选框
bbar : pageBar//分页工具栏
});
分享到:
相关推荐
### Ext.grid.GridPanel属性详析 #### 一、Ext.grid.GridPanel概述 `Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。...
- `viewConfig.forceFit: true` 设置列宽自动调整以填充整个容器宽度。 - `bbar` 配置了底部工具栏,包含了分页控制、操作按钮等功能。 #### 五、数据操作 - **删除数据**:点击“ɾ”按钮时,根据选中的行数据进行...
这个"extjs动态表头"的资源很可能是一个插件或组件,名为`Ext.ux.grid.DynamicGridPanel.js`,它扩展了ExtJS的标准GridPanel,增加了动态调整列的能力。 动态表头的核心功能包括: 1. **实时编辑**:用户可以在...
#### 一、Ext.grid.GridPanel 组件概述 `Ext.grid.GridPanel` 是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。接下来,我们将详细探讨`Ext....
var grid = new Ext.grid.GridPanel({ store: store, columns: [/*...*/], // 列定义 viewConfig: { forceFit: true // 自动调整列宽 }, bbar: new Ext.PagingToolbar({ store: store, // 关联数据存储 ...
Ext.grid.ColumnModel 是 GridPanel 的一个子组件,用于定义表格的列模式。其主要配置项包括: * `columns`: 字段数组。 * `defaultSortable`: 是否进行默认排序,默认为 false。 * `defaultWidth`: 默认宽度。 ...
### EXTGrid属性方法详解 #### 一、Ext.grid.GridPanel `Ext.grid.GridPanel`是ExtJS 4.0中的一个关键组件,用于创建数据表格。以下为该组件的一些核心属性及其含义: - **store**: 数据存储器,用于存放表格的...
**EXT基本表格(GridPanel)介绍**:EXT的表格组件,即`Ext.grid.GridPanel`,是一种功能强大的数据展示工具。它可以与服务器端进行数据交互,支持排序、筛选、分页等功能。开发者可以自定义列头、行样式,甚至实现...
var grid = new Ext.grid.GridPanel({ store: ds, cm: cm, renderTo: Ext.getBody() }); ``` `store`属性指定了数据源,`cm`设置了列模型,`renderTo`决定GridPanel将在页面的哪个元素内渲染。 EXTJS ...
`Ext.grid.ColumnModel` 是用于定义 `GridPanel` 列结构的类。在创建 `ColumnModel` 时,我们需要提供一个包含列信息的 JavaScript 数组。数组中的每个元素都是一个对象,该对象定义了列的属性,如 `header`(列头...
ExtJS表格面板(GridPanel)是Sencha Ext JS框架中的一个核心组件,它用于展示大量结构化数据。在本文中,我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例,以及与其相关的源码和工具。 首先,让我们...
EXT论坛摘要中提到的核心知识点是EXT GridPanel的高级操作,主要涵盖了行选择、单元格选择、自定义渲染和数据交互。以下是对这些知识点的详细解释: 1. **行选择模式**: EXT GridPanel提供了两种选择模式:行选择...
1. **store**: 这个属性定义了GridPanel所绑定的数据源,通常是一个Ext.data.Store实例,用于存储和管理数据。 2. **columns/colModel**: 定义了表格的列结构,每个列都是一系列配置项,包括列头文本、数据索引等。...
var grid = new Ext.grid.GridPanel({ store: store, cm: cm, viewConfig: { forceFit: true // 自适应列宽 }, bbar: new Ext.PagingToolbar({ store: store, displayInfo: true, pageSize: 25 }) }); ```...
1. **GridPanel**:动态表头的实现基于`Ext.grid.Panel`(或简称为`GridPanel`)。首先,我们需要创建一个GridPanel实例,并配置其`columns`属性,这个属性可以动态地更新。 2. **Column模型**:`Ext.grid.column....
2. **使用Ext的Grid, Form, Dialog来实现分页列表、创建、修改、删除功能**: - Grid:展示数据,支持分页、排序、选择行等操作。 - Form:用于数据输入和编辑,可以包含各种表单字段,如文本框、复选框、下拉框等...
5. **配置项(Configurations)**:配置项允许你在创建类实例时预设对象的状态,如`Ext.grid.ColumnModel`的`width`配置项可以设定列宽。 EXTJS 3.3的中文API文档还涵盖了布局管理、数据绑定、数据模型、远程操作...
var grid = new Ext.grid.GridPanel({ store: myStore, // 数据源 colModel: cm, viewConfig: { forceFit: true // 自动调整列宽以适应Grid的宽度 } }); ``` 5. **注意事项** - 多表头的宽度自动调整可能...
这个问题主要是由于GridPanel的宽度不足以容纳所有的列宽,因此浏览器会自动显示横向滚动条以便用户查看全部数据。本文将详细介绍如何解决这个在Extjs GridPanel中出现横向滚动条的问题。 首先,我们需要理解Extjs ...