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')//默认多选
});