显示行号
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>03.grid</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); var data = [ ['1','male','name1','descn1'], ['2','female','name2','descn2'], ['3','male','name3','descn3'], ['4','female','name4','descn4'], ['5','male','name5','descn5'] ]; var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'sex'}, {name: 'name'}, {name: 'descn'} ]) }); store.load(); var grid = new Ext.grid.GridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm }); }); </script> </head> <body> <script type="text/javascript" src="../shared/examples.js"></script> <div id="grid"></div> </body> </html>
删除行并刷新行号
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>03.grid</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); var data = [ ['1','male','name1','descn1'], ['2','female','name2','descn2'], ['3','male','name3','descn3'], ['4','female','name4','descn4'], ['5','male','name5','descn5'] ]; var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'sex'}, {name: 'name'}, {name: 'descn'} ]) }); store.load(); var grid = new Ext.grid.GridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm }); Ext.get('remove').on('click', function() { store.remove(store.getAt(1)); grid.view.refresh(); }); }); </script> </head> <body> <script type="text/javascript" src="../shared/examples.js"></script> <div id="grid"></div> <input type="button" id="remove" value="删除第二行" /> </body> </html>
选择模型,复选框
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>03.grid</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ //点击行即可选择 var sm = new Ext.grid.CheckboxSelectionModel(); //只允许点击复选框选择 //var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn}); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); var data = [ ['1','male','name1','descn1'], ['2','female','name2','descn2'], ['3','male','name3','descn3'], ['4','female','name4','descn4'], ['5','male','name5','descn5'] ]; var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'sex'}, {name: 'name'}, {name: 'descn'} ]) }); store.load(); var grid = new Ext.grid.GridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm, sm: sm }); }); </script> </head> <body> <script type="text/javascript" src="../shared/examples.js"></script> <div id="grid"></div> </body> </html>
选择模型,仅允许单行选中
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>03.grid</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); var data = [ ['1','name1','descn1'], ['2','name2','descn2'], ['3','name3','descn3'], ['4','name4','descn4'], ['5','name5','descn5'] ]; var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'name'}, {name: 'descn'} ]) }); store.load(); var grid = new Ext.grid.GridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm, sm: new Ext.grid.RowSelectionModel({singleSelect:true}) }); }); </script> </head> <body> <script type="text/javascript" src="../shared/examples.js"></script> <div id="grid" style="height:300px;"></div> </body> </html>
获取选择数据
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>03.grid</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); var data = [ ['1','name1','descn1'], ['2','name2','descn2'], ['3','name3','descn3'], ['4','name4','descn4'], ['5','name5','descn5'] ]; var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'name'}, {name: 'descn'} ]) }); store.load(); var grid = new Ext.grid.GridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm, sm: new Ext.grid.RowSelectionModel({singleSelect:true}) }); grid.on('click', function() { var selections = grid.getSelectionModel().getSelections(); for (var i = 0; i < selections.length; i++) { var record = selections[i]; Ext.Msg.alert('提示', record.get("id") + "," + record.get("name") + "," + record.get("descn")); } }); }); </script> </head> <body> <script type="text/javascript" src="../shared/examples.js"></script> <div id="grid" style="height:300px;"></div> </body> </html>
相关推荐
8.5 显示行号和复选框 8.5.1 显示行号 8.5.2 引用复选框 第9章 表格的高级功能 9.1 表格视图——Ext.grid.GridView 9.2 表格分页 9.2.1 添加表格分页显示工具条 9.2.2 从后台脚本获得分页数据 9.2.3 在表格...
在ExtJs中,我们可以使用`viewConfig`配置项中的`selType`来定义选择模型,通常是'checkboxmodel',以便在每行前添加复选框。然后通过`selModel`配置项设置双击时选中复选框的行为。同时,我们可以监听`itemdblclick...
3.6 自动显示行号和复选框 42 3.6.1 自动显示行号 43 3.6.2 复选框 44 3.7 选择模型 45 3.8 表格视图--Ext.grid.GridView 46 3.9 表格分页 47 3.9.1 为Grid添加分页工具条 48 3.9.2 通过后台脚本获得分页...
8.5 显示行号和复选框 8.5.1 显示行号 8.5.2 引用复选框 第9章 表格的高级功能 9.1 表格视图——Ext.grid.GridView 9.2 表格分页 9.2.1 添加表格分页显示工具条 9.2.2 从后台脚本获得分页数据 9.2.3 在表格...
除了基本的显示和交互外,ExtJs Grid还支持多种自定义功能,如添加行号、复选框选择模型、右键菜单等。这些功能的实现通常需要通过扩展`ColumnModel`和监听特定的Grid事件来完成。 以上是对ExtJs Grid组件的详细...
- **自定义能力**:可以生成行号、支持复选框全选、动态选择显示的列、本地和远程分页、单元格自定义渲染、可编辑网格、添加/删除行、脏数据提示、大小调整和行拖拽等。 - **与其他组件交互**:Grid之间以及与Tree...
此外,还可以使用`selModel`配置项自定义选择模型的行为,例如启用或禁用复选框选择,或者添加选择事件监听器。 总结,ExtJS4的GridPanel提供了丰富的样式和选择模式,允许开发者根据需求定制表格的外观和交互行为...
- **gridWithCheckBox**:复选框网格,包含复选框以选择行。 - **gridWithPagingTool**:分页网格,包含分页工具条。 - **propertyEditor**:属性编辑器,用于编辑属性值。 - **propertyData**:属性数据,存储...
`RowNumberer`生成行号,`CheckboxSelectionModel`提供复选框选择功能。其余列根据Record中的字段定义,如`{header:"ID",dataIndex:"id",width:50,sortable:true,menuDisabled:true}`。 对于数据的增删查改,我们...
sm, // 复选框列 new Ext.grid.RowNumberer({ header: "自动显示行号", width: 100 }), // 行号列 { header: '员工编号', dataIndex: 'EmployeeID', sortable: true, width: 100 }, { header: '名字', dataIndex...