--renderers渲染器

可以格式化该列显示的数据格式或者按照你自定义的脚本显示最终数据样子

先看下renderer: function()里的参数

renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){

}

1.value是当前单元格的值

2.cellmeta里保存的是cellId单元格id,id不知道是干啥的,似乎是列号,css是这个单元格的css样式。

3.record是这行的所有数据,你想要什么,record.data["id"]这样就获得了。

4.rowIndex是行号,不是从头往下数的意思,而是计算了分页以后的结果。

5.columnIndex列号太简单了。

6.store,这个厉害,实际上这个是你构造表格时候传递的ds,也就是说表格里所有的数据,你都可以随便调用,唉,太厉害了。

--Selection Models选择模型

关于Ext.grid.plugin.CellEditing和Ext.grid.plugin.RowEditing的区别

CellEditing  编辑不可保存

RowEditing   编辑可保存

有时你只是想查看渲染到视图上的数据,但是通常它就包含有必要交互或更新的数据。 Grid使用了一个称为选择模型(Selection Model)的概念,这是一种机制,用于在grid中选择部分数据。 选择模型的两个主要类型是 RowSelectionModel,选定整行, 以及 CellSelectionModel,选定单个单元格。

在默认情况下Grid使用行选择模型,但是可以像这样很容易的对其进行定制:

Ext.create('Ext.grid.Panel', {

    selType: 'cellmodel',

    store: ...

});

通过指定cellmodel改变了两件事情。首先,现在某个单元格上单击选择只是该单元格 (使用rowmodel将选择整个行),再者, 键盘导航将走单元格,而不是行与行。 基于单元格的选择模型通常与编辑器一起使用。

--Editing编辑器

若要支持单元格内编辑,我们还要在grid中指定selType配置项使用'cellmodel', 并且也要创建CellEditing plugin插件实例, 在这里配置了鼠标单击后激活单元格的编辑器。

--Row Editing行编辑器

其他类型的编辑是基于行的编辑,使用 RowEditor 组件。这使您可以一次性编辑整个行,而不是一个一个的对单元格进行编辑。 行编辑的工作方式与单元格编辑完全相同,我们需要做的就是将插件类型更改为 Ext.grid.plugin.RowEditing,并将 selType 设置为 'rowmodel':

Ext.create('Ext.grid.Panel', {

    title: 'Simpsons',

    store: Ext.data.StoreManager.lookup('simpsonsStore'),

    columns: [

        { header: 'Name',  dataIndex: 'name', field: 'textfield' },

        { header: 'Email', dataIndex: 'email', flex:1,

            field: {

                xtype: 'textfield',

                allowBlank: false

            }

        },

        { header: 'Phone', dataIndex: 'phone' }

    ],

    selType: 'rowmodel',

    plugins: [

        Ext.create('Ext.grid.plugin.RowEditing', {

            clicksToEdit: 1

        })

    ],

    height: 200,

    width: 400,

    renderTo: Ext.getBody()

});

我们再次传递一些配置给我们的Ext.grid.plugin.RowEditing插件,现在当我们单击每个行的行, 编辑器将会出现,并使我们能够编辑每个我们有指定编辑器的列。

//在顶部的分页工具栏

//tbar: pagingToolbar,

// 在底部的分页工具栏

bbar: pagingToolbar

创建列表的一般过程:

Ext.onReady(function () {

    //1.定义Model

    Ext.define("MyApp.model.User", {

        extend: "Ext.data.Model",

        fields: [

            { name: 'name', type: 'string' },

            { name: 'age', type: 'int' },

            { name: 'phone', type: 'string' }

        ]

    });

    

    //2.创建store

    var store = Ext.create("Ext.data.Store", {

        model: "MyApp.model.User",

        autoLoad: true,

        pageSize: 5,

        proxy: {

            type: "ajax",

            url: "<%=basePath %>/ExtJsTest",

            reader: {

                root: "rows"

            }

        }

    });

    

    //3.创建grid

    var grid = Ext.create("Ext.grid.Panel", {

        xtype: "grid",

        store: store,

        width: 500,

        height: 200,

        margin: 30,

        columnLines: true,

        renderTo: Ext.getBody(),

        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: 2

            })

        ],

        listeners: {

            itemdblclick: function (me, record, item, index, e, eOpts) {

                //双击事件的操作

            }

        },

        bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true }

    });

});

ExtJs之列表(grid)的更多相关文章

  1. ExtJS 4.2 Grid组件的单元格合并

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...

  2. Sencha ExtJS 6 Widget Grid 入门

    最近由于业务需要,研究了一下Sencha ExtJS 6 ,虽然UI和性能上据相关资料说都有提升,但是用起来确实不太顺手,而且用Sencha cmd工具进行测试和发布,很多内部细节都是隐藏的,出了问题 ...

  3. ExtJS自制表格Grid分页条

    试过Grid自带的load和分页功能,没有成功,干脆就自己写了...... 主要是查询条件比较复杂...... 希望哪位大神能有更好的意见. Ext.define('MyApp.ux.Paginati ...

  4. Extjs 4.2 Grid增删改及后台交互(Java)

    上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...

  5. ExtJs中的Grid具体操作(笔记及心得)

    一.基本操作步骤 var cm=new Ext.grid.ColumnModel([ //对列的定义,cm是它的简写,作为真个表格的列模式,需要首先创建的{header:'编号',dataIndex: ...

  6. ExtJS学习(三)Grid表格

    表格说明 Ext中的表格功能非常强大,包括排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能.表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,其xty ...

  7. [Extjs] Ext4 Ext.grid.Panel 分页实现(mybatis 分页插件-PageHelper 使用)

    先看图: 页面js代码: var userStore=Ext.create('Ext.data.Store', { storeId:'userStore', fields:['uname', 'ema ...

  8. ExtJS实现分页grid paging

    背景 分页查询在Web页面中比例很大,我自己也写过分页框架,也用过很多第三方分页. 基于jquery的dataTables,那么多例子.清晰API.应用广泛.开源,即使是新手也可以很快上手. ExtJ ...

  9. 纸壳CMS列表Grid的配置

    纸壳CMS(ZKEACMS)里的Grid是一个TagHelper,是对jQuery插件datatables的一个配置封装. Easy.Mvc.TagHelpers.GridTagHelper grid ...

随机推荐

  1. bzoj 3196/ Tyvj 1730 二逼平衡树 (线段树套平衡树)

    3196: Tyvj 1730 二逼平衡树 Time Limit: 10 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description ...

  2. 「6月雅礼集训 2017 Day5」学外语

    [题目大意] 给出$\{P_i\}$,求经过以下操作后能够得到的不同序列个数: 第一步,选择$i, j$,交换$P_i,P_j$:第二步,把所有$P_x=i$的$P_x$变为$j$,把所有$P_x=j ...

  3. CODE FESTIVAL 2017 qual B C - 3 Steps

    Score : 500 points Problem Statement Rng has a connected undirected graph with N vertices. Currently ...

  4. 【CodeForces】896 B. Ithea Plays With Chtholly

    [题目]B. Ithea Plays With Chtholly [题意]交互题,有n格,每次给一个[1,c]的数字,回答填入的位置后再次给数字,要求在m轮内使n格填满且数列不递减.n,m>=2 ...

  5. 【NOIP】提高组2013 火柴排队

    [题意]两列n个火柴,分别有高度ai和bi(同一列高度互不相同),每次可以交换一列中的两个相邻火柴,定义距离为∑(ai-bi)^2,求使距离最小的最少交换次数,n<=10^5. [算法]逆序对 ...

  6. CRB and Candies(组合数学+求逆元+lcm)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5407 题目: Problem Description CRB has N different cand ...

  7. HDU 1175 连连看 (深搜+剪枝)

    题目链接 Problem Description "连连看"相信很多人都玩过.没玩过也没关系,下面我给大家介绍一下游戏规则:在一个棋盘中,放了很多的棋子.如果某两个相同的棋子,可以 ...

  8. SQL SERVER 创建远程数据库链接 mysql oracle sqlserver

    遇到的坑 在连接Oracle时,因为服务器为10g 32位版本,然后在本地安装了32为10g客户端,然后一直报错[7302.7303],后来下载了12c 64位版本,安装成功后,问题解决 原因:mss ...

  9. Python标准库笔记(1) — string模块

    String模块包含大量实用常量和类,以及一些过时的遗留功能,并还可用作字符串操作. 1. 常用方法 常用方法 描述 str.capitalize() 把字符串的首字母大写 str.center(wi ...

  10. Linux 入门记录:九、Linux 文件系统挂载管理

    一.挂载操作 磁盘或分区创建好文件系统后,需要挂载到一个目录才能够使用. Windows 或 Mac 系统会进行自动挂载,一旦创建好文件系统后会自动挂载到系统上,Windows 上称之为 C 盘.D ...