Extjs4.x GridPanel用法详解

阅读更多

参考资料:http://www.qeefee.com/article/extjs-grid-in-detail

 

创建GridPanel

要使用GridPanel,首先要定义Store

// 创建store
var store = Ext.create("Ext.data.Store", {
    fields: [{
        name: 'name',  // 与gird中columns的dataIndex匹配
        type: 'string', // 字段的数据类型
        mapping: 'name' // 在Ext.data.Reader中创建记录时将json对象中指定属性值映射到此字段
    },{
        name: 'age',
        type: 'int',
        mapping:'age'
    },{
        name: 'phone',
        type: 'string',
        mapping:'phone'
    }],
    autoLoad: true,
    pageSize: 5,
    proxy: {
        type: "ajax",
        url: "queryUsers.action",
        reader: {
            root: "rows"
        },
        extraParams: {state : 2}
    },
    sorters: [{
	property: "age",//排序字段
	direction: "asc"
    }]
});
// 创建grid
var grid = Ext.create("Ext.grid.Panel", {
    title: '用户列表',
    xtype: "grid",
    store: store,
    width: 500,
    height: 200,
    margin: 30,
    columnLines: true,
    hidden : false,
    viewConfig : {
	forceFit : true
    },
    renderTo: Ext.getBody(),
//  renderTo: userDiv,  // 将grid填充到jsp页面的div中,div的id为userDiv
    selModel: {
        injectCheckbox: 0,
        mode: "SIMPLE",     //"SINGLE"/"SIMPLE"/"MULTI"
        checkOnly: true     //只能通过checkbox选择
    },
    selType: "checkboxmodel",
    columns: [{
        text: '姓名',
        dataIndex: 'name'
    },{
        text: '年龄',
        dataIndex: 'age',
        xtype: 'numbercolumn',
        format: '0',
        editor: {
            xtype: "numberfield",
            decimalPrecision: 0,
            selectOnFocus: true
        }
    },{
        text: '电话',
        dataIndex: 'phone',
        editor: "textfield"
    }],
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    listeners: {
        itemdblclick: function (me, record, item, index, e, eOpts) {
            //双击事件的操作
        }
    },
    bbar : new Ext.PagingToolbar( {
	store : store,
	displayInfo : true,
	nextText : '下一页',
	lastText : '最后一页',
	firstText : '第一页',
	prevText : '上一页',
	refreshText : '刷新',
	displayMsg : '显示流程实例第 {0}条 - 第 {1}条,总共{2}条',
	emptyMsg : "没有数据"
    }),
    tbar :  Ext.create("Ext.Toolbar", {
	items:[ {
	    text : "查看用户详细信息",
		handler : lookDetail  //方法名后面不能加括号,lookDetail()的写法是错误的。
	}, {
	    text : "查看用户子节点",
	        handler : lookChildren
	}]
    })
});
function lookDetail() {
    //得到选中的行数据
    var record = grid.getSelectionModel().getLastSelected();
    var name = record.data.name;
    //其他操作...
}
function lookChildren() {
    //...
}

列 Columns配置项

Extjs GridPanel的列有多种类型,例如:文本列、数字列、日期列、选择框列、操作列等。我们可以通过xtype来指定不同的列类型。

下面是列的常用配置项:

  • xtype:列类型
  • text:列头显示的文字
  • dataIndex:绑定的字段名
  • width:宽度
  • flex:自动适应的宽度
  • sortable:是否可排序,默认为是
  • hideable:是否可隐藏,默认为是
  • locked:锁定列,将列锁定在grid的开头,当grid出现滚动条的时候该属性比较有用。默认为否
  • lockable:是否可锁定,默认为否
  • format:格式化字符串,常用于日期、数字的格式化。日期:'Y-m-d';日期时间:'Y-m-d H:i:s';数字:'0,000.00'(带有千位分隔符、保留两位小数)、'0.00'(保留两位小数),'0'(不保留小数)
  • renderer:自定义绘制方法,可以是Ext.util.Format中定义好的方法名称,也可以是自定义否function,该方法接收下面的参数:value、metadata、record、rowIndex、colIndex、store、view,并需要一个用来显示的返回值。
  • editor:编辑器,当使用编辑插件的时候才会起作用。

 

Extjs GridPanel行选择模型(SelectionModel)

控制Extjs GridPanel行选择模型的两个配置项是selType和selModel。默认情况下,selType为rowmodel,对应的Ext.selection.Model。这种选择模型不会在grid中添加复选框,它通过点击行进行选中,默认为多选“MULTI”。

如果我们要使用复选框来选择行,我们需要使用下面的配置:

selType: "checkboxmodel", //rowmodel、checkboxmodel

 然后,我们可以通过selModel来配置selType:

selModel: {
    injectCheckbox: 0,
    mode: "SIMPLE",     //"SINGLE"/"SIMPLE"/"MULTI"
    checkOnly: true     //只能通过checkbox选择
},

 

 

Extjs GridPanel行选择

除了界面操作来选中行,我们还可以通过代码来选中行:

//选择行,并保持其他行的选择状态
grid.getSelectionModel().select(records, true);
//选择所有
grid.getSelectionModel().selectAll();
//根据row index选择
grid.getSelectionModel().selectRange(startRow, endRow, true)

 

 

Extjs GridPanel获取选中行

获取选中行,仍然需要通过SelectionModel来完成:

var records = grid.getSelectionModel().getSelection();

var records = grid.getSelectionModel().getLastSelected();

 

 

Extjs GridPanel显示行号

默认情况下Extjs GridPanel是不显示行号的,我们需要手动添加行号列。

 

columns: [{ 
    xtype: "rownumberer",
    text: "序号",
    width:40
},{
    text: '姓名',
    dataIndex: 'name'
},{
    text: '年龄',
    dataIndex: 'age',
    xtype: 'numbercolumn',
    format: '0',
    editor: {
        xtype: "numberfield",
        decimalPrecision: 0,
        selectOnFocus: true
    }
},{
    text: '电话',
    dataIndex: 'phone',
    editor: "textfield"
}]

 我们可以设置行号的列头和宽度。

 

Extjs GridPanel异步加载数据

Extjs GridPanel的异步加载数据是通过Store来实现的。

异步加载通常采用ajax代理,例如我们代码中用到的:

 

//创建store
var store = Ext.create("Ext.data.Store", {
    fields: [{
        name: 'name',  // 与gird中columns的dataIndex匹配
        type: 'string', // 字段的数据类型
        mapping: 'name' // 在Ext.data.Reader中创建记录时将json对象中指定属性值映射到此字段
    },{
        name: 'age',
        type: 'int',
        mapping:'age'
    },{
        name: 'phone',
        type: 'string',
        mapping:'phone'
    }],
    autoLoad: true,
    pageSize: 5,
    proxy: {
        type: "ajax",
        url: "queryUsers.action",
        reader: {
            root: "rows"
        },
        extraParams: {state : 2}
    },
    sorters: [{
	property: "age",//排序字段
	direction: "asc"
    }]
});

 服务器端返回的数据格式如下:

{
    "rows": [
      {
          "name": "Tom",
          "age": 12,
          "phone": "1233455"
      },
      {
          "name": "Jerry",
          "age": 12,
          "phone": "1233455"
      },
      {
          "name": "Sinbo",
          "age": 12,
          "phone": "1233455"
      },
      {
          "name": "Jack",
          "age": 12,
          "phone": "1233455"
      },
      {
          "name": "Johnson ",
          "age": 12,
          "phone": "1233455"
      }
    ],
    "total": 5
}

 手动加载:

store.load();

 ajax在这里是异步加载,如果要处理返回数据,需要用回调函数

store.load({
    callback: function (records, operation, success) {
        if (success) {
            //对返回数据处理
        }
    }
});

 

ExtJS 其实已经为我们添加了一些参数,包括 page、start和limit。这些参数是从哪儿来的呢?

在使用ajax进行请求的时候,ajax代理会调用自身的read方法,该方法的第一个参数是Ext.data.Operation 类型,它用来配置我们如何进行请求。我们在load 方法中可以通过配置项传递一些参数,load在调用read方法时将这些参数传递过去,read则会根据这些参数生成Ext.data.Operation 的一个实例。所以,我们可以这样来传递参数:

 

store.load({
    page: 2,
    limit: 10,
    params: {
        name: 'Jack'  //其他参数
    },
    callback: function (records, operation, success) {
        if (success) {
           //...
        }
    }
});

 

Extjs GridPanel分页

当GridPanel中数据量大的时候,我们就需要使用分页了。

分页的实现由两部来完成,首先是在Store中添加pageSize配置项,用来确定每页显示多少行数据;然后需要为GridPanel添加PagingToolbar。

1. Store添加pageSize配置项

 

在分页参数加上之后,Extjs在执行ajax请求的时候会添加三个参数: 

  • page:当前页
  • start:起始行的行号
  • limit:每页数据行数,默认为25;这个参数值就是我们设置的pageSize

2. GridPanel添加PagingToolbar

 

 在完成这两项配置以后,GridPanel就可以使用分页了。

 

Extjs GridPanel列编辑

Extjs GridPanel可以方便的实现列编辑。要实现这个功能需要两步:

1. 添加GridPanel的编辑插件

 

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    })
],

 2. 为需要编辑的列指定编辑器

columns: [
    { xtype: "rownumberer", text: "序号", width:40 },
    { text: '姓名', dataIndex: 'name' },
    {
        text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0',
        editor: {
            xtype: "numberfield",
            decimalPrecision: 0,
            selectOnFocus: true
        }
    },
    { text: '电话', dataIndex: 'phone', editor: "textfield" }
]

 编辑器可以是一个field的配置,也可以是一个xtype。

 

对于编辑后的单元格,会在左上角出现一个红色的标识,说明该数据是编辑过的,要想去掉这个红色箭头,需要调用record的commit()方法。

 

grid.on('edit', function (editor, e) {
    // commit the changes right after editing finished
    e.record.commit();
});

 除了单元格编辑外,Extjs还支持行编辑功能,只需要将插件替换为RowEditing即可,此处不再进行演示。

 

Extjs GridPanel选中单元格内容

在默认情况下,Extjs GridPanel不允许进行选中单元格中的内容,由于不能选中,我们就不可能来复制单元格中的内容。如果要实现这种功能,我们需要通过viewConfig来实现。

代码如下:

viewConfig:{
    stripeRows:true,//在表格中显示斑马线
    enableTextSelection:true //可以复制单元格文字
}

 

禁止显示列头部右侧菜单

Extjs GridPanel的列,当我们点击列头的时候,会出现一个菜单:

Extjs4.x GridPanel用法详解_第1张图片

如果我们要禁用这个菜单,可以将每个column定义属性menuDisabled指定为true,代码如下:

{header: 'Idno', dataIndex: 'idno', width:150,menuDisabled:true}

 

Extjs GridPanel 事件

itemclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e )         //鼠标的单击事件

itemcontextmenu( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e )       //鼠标的右键事件

itemdblclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e )              //鼠标的双击事件

itemmousedown( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e )       

itemmouseenter( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e )

itemmouseleave( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e )

itemmouseup( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e )

调用方法:

直接调用,创建grid时添加listeners

listeners:{

 'itemclick':function(view,record,item,index,e){

}

 

后续添加

grid.addListener('itemclick',click,this);

function click(view,record,item,index,e){

if (typeof (record.raw) != 'undefined') {
        name= record.raw.NAME;           //获取单击行的相应数据
        path= record.raw.PATH;
        num = index;

}

}

你可能感兴趣的:(extjs4,gridpanel)