--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. [洛谷P2852] [USACO06DEC]牛奶模式Milk Patterns

    洛谷题目链接:[USACO06DEC]牛奶模式Milk Patterns 题目描述 Farmer John has noticed that the quality of milk given by ...

  2. asyncio结合线程池

    #使用多线程:在协程中集成阻塞io import asyncio from concurrent.futures import ThreadPoolExecutor import socket fro ...

  3. NGINX: 返回大 JSON 数据不完整的问题

    说明: 内容全部来自 [ CSDN 金玮良 ] nginx 返回数据不完整的问题 当nginx 遇到大数据流时,会把数据先放在自己的缓冲区,然后一并发给客户端. 那如果这个结论成立, 那一次请求的数据 ...

  4. quick-cocos2dx lua中读取 加密 csv表

    我非常想把一些非必需的信息以CSV表的格式保存到客户端,以减少和服务器的通讯,降低压力.于是写了这么一个. 但因为大家觉得这样的话,需要每次登陆时来检测同步这些数据,会减慢登陆速度,于是没有用到. 我 ...

  5. JSOI2018简要题解

    来自FallDream的博客,未经允许,请勿转载,谢谢. 有幸拜读到贵省的题目,题的质量还不错,而且相比zjoi可做多了,简单发一下题解吧. 还有就是,怎么markdown在博客园上的代码这么丑啊 「 ...

  6. 关于$->aaa->bbb();的困惑

    第21行为什么可以调用test类的aa方法呢? 答:因为前一行(20)其已经被实例化了.所以现在的$this->obj其实可以相当于是一个对象. 20行和21行也可以写成如下 $xxoo = n ...

  7. ImportError: libQtTest.so.4: cannot open shared

    错误: import cv2 File , in <module> from .cv2 import * ImportError: libQtTest.so.: cannot open s ...

  8. python基础===python os.path模块

    os.path.abspath(path) #返回绝对路径 os.path.basename(path) #返回文件名 os.path.commonprefix(list) #返回list(多个路径) ...

  9. 【数位dp入门】【HDU4734】F(x)

    记录减的状态,表示还要凑多少才能达到当前值. 然后进行枚举即可.注意状态数不能重复. #include<bits/stdc++.h> #define N 10010 using names ...

  10. CF625D Finals in arithmetic-构造,贪心,细节

    题目链接:http://codeforces.com/contest/625/problem/D 题意: 给你一个数字字符串s,长度1e6,算是一个大数吧,让你找到一个x,使得,x加上  逆转(x)= ...