Extjs4.x GridPanel用法详解

最新推荐文章于 2024-10-03 10:46:52 发布
最新推荐文章于 2024-10-03 10:46:52 发布
阅读量246 收藏
点赞数
分类专栏： Extjs 文章标签： extjs4 gridpanel
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_2762/article/details/82644248
版权

参考资料：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的列，当我们点击列头的时候，会出现一个菜单：

image

如果我们要禁用这个菜单，可以将每个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 )

( 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;

}

}

iteye_2762
关注
专栏目录
Makefile实战.pdf
09-09
理解 Makefile 的关键在于掌握两个概念：目标（target）和依赖（dependency）。目标是指要生成什么，或说运⾏ make 后生成什么，而依赖是告诉 make 如何去做以实现目标。在 Makefile 中，目标和依赖是通过规则（rule...
跟我一起写Makefile.pdf
09-20
《跟我一起写Makefile》是陈皓大佬撰写的一份PDF文档，主要讲解了如何编写和理解Makefile，以便于管理程序的编译和链接过程。Makefile是软件开发中的一个重要工具，它帮助自动化构建过程，使得编译和链接更加高效。 ...
Makefile 中的.PHONY
weixin_34096182的博客
01-08 177
PHONY 目标并非实际的文件名：只是在显式请求时执行命令的名字。有两种理由需要使用PHONY 目标：避免和同名文件冲突，改善性能。 所谓的PHONY这个单词就是伪造的意思，makefile中将.PHONY放在一个目标前就是指明这个目标是伪文件目标，如下：.PHONY:clean这里clean目标没有依赖文件，如果执行make命令的目录中出现了clean文件，由于其没有依赖文件，所以它永远是最新...
makefile之.PHONY
juxua_xatu的专栏
01-27 1万+
makefile的PHONY关键字用法
Linux 中的 Makefile 伪目标详解
最新发布
不积跬步无以至千里
10-03 847
在传统的Makefile中，每个目标（target）通常是生成一个文件的规则。例如，当你定义一个目标myprogram，意味着你希望通过运行相应的规则，生成一个名为myprogram的文件。然而，有些时候我们并不想生成文件，而是执行一些操作，例如清理构建目录或者运行测试。这种情况下，目标并不对应文件，而是用于执行某些任务。为了避免与实际文件名冲突，我们可以使用伪目标。伪目标是不生成任何文件的目标，仅用于执行特定操作。clean：清理编译生成的临时文件。all：编译所有需要的文件。test：运行测试。
makefile 中的.PHONY
feixin620的博客
11-07 721
makefile 中.PHONY 的理解 make xxx. 是否执行xxx 这个target 对应的规则。 取决于这个target 是否存在， 以及生成这个target 的input files 是否发生改变。 但是如果想 make xxx 时always 执行队形的规则。可以 .PHONY: xxx xxx: some commands 理论依据是： 在Makefile中，.PHONY后面的target表示的也是一个伪造的target, 而不是真实存在的文件target，...
makefile中的.phony作用（防止在Makefile文件中定义的可执行命令的目标规则和工作目录下的实际文件出现名称冲突，并提高执行Makefile的性能）
Dontla的博客
12-13 911
其中p1、p2和p3是三个可执行文件，make把"all"作为主要规则，每次执行时都尝试把"all"更新，因此会检查其依赖文件p1、p2和p3是否需要更新，如果需要，就把它们更新，从而达到我们的目的。指定目标为all，可以避免目录下同名文件的干扰，即不用检查规则"all"是否有同名文件存在，也不需要查询任何隐含规则，直接假定指定的规则"all"需要被更新。当一个目录中存在多个可运行程序，将其配置在同一个makefile文件。配置项的主要作用在于避免指定命令和项目下的同名文件冲突，进行性能优化。
makefile .PHONY
uglynakedman的博客
06-13 765
PHONY .PHONY :clean clean: rm -rf a.out makfile经常会看到.PHONY的命令。.PHONY 的作用是什么 1首先要知道makefile中除了一些常量的声明外，剩下的指令基本都是以 下面的形式开始 targetfile:sourcefile command1 targetfile sourcefile co...
非常实用的makefile文档.rar
01-05
这篇非常实用的Makefile文档，显然是为了帮助初学者和经验丰富的开发者深入理解和掌握这一技术。 Makefile主要由规则（rules）组成，每个规则定义了一个目标（target）以及如何生成这个目标。目标通常是源代码文件...
简单易懂的makefile教程.pdf
12-19
掌握Makefile的编写不仅能够提高软件开发的效率，还能增强程序员对整个项目构建过程的理解。通过本篇教程的学习，读者应能够结合具体实例，编写出适用于自己项目的Makefile，并进行实际的软件构建工作。
GNU make特殊目标解析：.PHONY与.FAKE
"Makefile的特殊目标主要涉及四个关键概念：`.PHONY`，`.SUFFIXES`，`.DEFAULT` 和 `.SILENT`。这些目标在Makefile中有着特殊的含义，影响着make命令的执行行为。`.PHONY` 用于标记伪目标，即使存在同名的文件，执行...
Makefile .PHONY
狂飙的蜗牛
03-22 1082
1. PHONY 目标　　PHONY 目标并非实际的文件名：只是在显式请求时执行命令的名字。有两种理由需要使用PHONY 目标：避免和同名文件冲突，改善性能。　　如果编写一个规则，并不产生目标文件，则其命令在每次make 该目标时都执行。　　例如：　　clean:　　rm *.o temp　　因为"rm"命令并不产生"clean"文件，则每次执行"makeclean"的
Makefile中的.PHONY
liyupeng01boke的专栏
08-15 394
/PHONY 来显示的指名一个目标是伪目标，有两个作用一个是改善性能，另外一个是来避免冲突。 例如我写了这样一个Makefile [cpp] view plaincopy test1:main.o file1.o file2.o file3.o       cc -o test1 main.o file1.o file2.o file3.
Makefile里的PHONY
weixin_44110278的博客
06-16 1493
因为"rm"命令并不产生"clean"文件，则每次执行"make clean"的时候，该命令都会执行。如果目录中出现了"clean"文件，则规则失效了：没有依赖文件，文件"clean"始终是最新的，命令永远不会执行；为避免这个问题，可使用".PHONY"指明该目标。已知phony 目标并非是由其它文件生成的实际文件，make 会跳过隐含规则搜索。如果编写一个规则，并不产生目标文件，则其命令在每次make 该目标时都执行。这样执行"make clean"会无视"clean"文件存在与否。
Makefile里PHONY的介绍
09-15 64
Phony Targets PHONY 目标并非实际的文件名：只是在显式请求时执行命令的名字。有两种理由需要使用PHONY 目标：避免和同名文件冲突，改善性能。 如果编写一个规则，并不产生目标文件，则其命令在每次make 该目标时都执行。例如： 　　clean: 　　rm *.o temp 因为"rm"命令并不产生"clean"文件，则每次执行"make clean"的时候，该命令...
Makefile中.PHONY的作用
热门推荐
哒哒的博客
04-20 4万+
一.实例 拿clean举例，如果make完成后，自己另外定义一个名叫clean的文件，再执行make clean时，将不会执行rm命令。 　　为了避免出现这个问题，需要.PHONY: clean 图示： (1)不添加.PHONY:clean 在Makefile所在的目录下touch一个clean文件 运行make–>运行make clean 结果：由于目录下clean文件
关于makefile中 .PHONY的使用
haly321的博客
01-20 550
转自：http://www.cnblogs.com/hnrainll/archive/2011/04/12/2014082.html
解读makefile中的.PHONY
最后一个bug的博客
05-28 888
通常情况下，.PHONY 会被用来声明一组需要执行的动作，例如 clean、all 等，并告诉 Make 工具这些目标并不对应真实的文件，而只是动作的名称。避免与同名文件产生冲突：如果存在一个与目标同名的文件，且用户误输入了该目标名字，Make 工具会尝试去构建这个同名文件，而不是执行我们期望的动作。使用 .PHONY 声明伪目标可以避免因为存在同名文件而导致意外的行为，同时也能让 Make 工具知道这些目标并不对应真实文件，从而正确地执行相应的动作。
Makefile之.PHONY
m0_37948979的博客
02-28 298
.PHONY: clean o means the word "clean" doesn't represent a file name in this Makefile; o means the Makefile has nothing to do with a file called "clean" in the same directory. 从翻译的字面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值