ExtJs之列表(grid)

--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 }

    });

});

转载于:https://www.cnblogs.com/lucare/p/9312677.html