extjs-->grid

表格

一般用来展示数据,也可以在上面编辑数据...

            var mainStore = Ext.create('Ext.data.Store', {
                fields: ['name', 'sex', 'job', 'sortid'],
                data: [
                    {'name': 'mrz', 'sex': '男', 'job': '大堂经理', 'sortid': '1'},
                    {'name': 'mrzplus', 'sex': '男', 'job': '服务员', 'sortid': '2'},
                    {'name': 'mrzmin', 'sex': '男', 'job': '接待生', 'sortid': '3'}
                ]
            });

<span style="white-space:pre">	</span>var mainPanel2 = Ext.create('Ext.grid.Panel', {
<pre name="code" class="javascript"><span style="white-space:pre">		</span>store:mainStore

columns: [ {text: '姓名', dataIndex: 'name'}, {text: '性别', dataIndex: 'sex'}, {text: '职位',dataIndex: 'sortid'} ] });

这就弄好了一个grid的了.

可排序,可交换列位置,可隐藏列,目前还有一些问题.比如:职位这一列的右边还有一个下拉菜单.下拉菜单里面有排序和隐藏列的菜单项.三列没有充满所有的空间.右边还有一大片空白.

看下面的代码:

            var mainPanel = Ext.create('Ext.grid.Panel', {
                store:mainStore<span style="font-family: Arial, Helvetica, sans-serif;">,</span>
                columns: [
                    {text: '姓名', dataIndex: 'name', flex: 2,sortable :true},
                    {text: '性别', dataIndex: 'sex', width: 40,sortable :true},
                    {text: '职位', xtype: 'templatecolumn', dataIndex: 'sortid', flex: 4, tpl: '{job}',sortable :true}
                ],
                enableColumnHide:false,//不显示隐藏列菜单项
                sortableColumns:false//不显示排序菜单项
            });

selModel这个属性:传入一个Ext.selection.Model对象.有一种单元格选择模式Ext.selection.CellModel,一种行选择模式Ext.selection.RowModel,下属一种自动在行前面生成一个复选框的Ext.selection.CheckboxModel类型.该属性需要传入一个对象,所以不能使用配置项的方式,只能是Ext.create('Ext.selection.xxxxxx',{})来设置.这些选择模式有一个叫mode的配置项, Valid values are "SINGLE", "SIMPLE", and "MULTI".SINGLE就是单选,MULTI是多选,SIMPLE是简单选择,多选时不用按住ctrl键

            var mainPanel = Ext.create('Ext.grid.Panel', {
                title: '标题',
                store: mainStore,
                columns: [
                    {text: '姓名', dataIndex: 'name', flex: 2,sortable :true},
                    {text: '性别', dataIndex: 'sex', width: 40,sortable :true},
                    {text: '职位', xtype: 'templatecolumn', dataIndex: 'sortid', flex: 4, tpl: '{job}',sortable :true}
                ],
                enableColumnHide:false,//不显示隐藏列菜单项
                sortableColumns:false,//不显示排序菜单项
                selModel:Ext.create('Ext.selection.CheckboxModel')//默认多选
            });