• ExtJS - UI组件 - Grid

    更新记录
    转载请注明出处:
    2022年8月17日 发布。
    2022年8月13日 从笔记迁移到博客。

    ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

    Ext.grid.Panel(网格)

    说明

    Grid组件常用于显示仓库的数据。Ext.grid.Panel 继承自Ext.panel.Table。
    注意：
    经典工具集(Classic toolkit)中网格对应的类为：Ext.grid.Panel
    现代工具集(Modern toolkit)中网格对应的类为：Ext.grid.Grid

    语法：

    1. Ext.create('Ext.grid.Panel',{
    2.    grid properties..
    3.    columns : [Columns]
    4. });

    支持的列类型

    Classic toolkit工具集，在Ext.grid.column命名空间下

    支持的单元格类型

    Classic toolkit工具集，在Ext.grid.cell命名空间下

    特性(Features)

    特性用于添加Gird额外的功能

    Ext.grid.feature.Feature是所有特性的基类

    实例：配置列

    实例：列最基本的使用

    image

    1. {
    2.     xtype: 'gridpanel', //grid面板
    3.     title: 'PandaTest',
    4.     width: 600,
    5.     height: 300,
    6.     frame: true,        //带边框
    7.     columns: [ //定义列
    8.         { text: '姓名', dataIndex: 'name', },  //text为显示的列名称，dataIndex为对应的数据项
    9.         { text: '性别', dataIndex: 'sex', },
    10.         { text: '年龄', dataIndex: 'age', },
    11.     ],
    12.     store: {        //定义数据仓库
    13.         data: [     //直接内联数据做测试使用
    14.             {name: 'Panda', sex: '男', age: 666 },
    15.         ],
    16.     }
    17. }

    实例：设置列自动填充

    使用forceFit配置项

    image

    1. {
    2.     xtype: 'gridpanel', //grid面板
    3.     title: 'PandaTest',
    4.     width: 600,
    5.     height: 300,
    6.     forceFit: true,     //自动拉伸填充空白
    7.     frame: true,        //带边框
    8.     columns: [ //定义列
    9.         { text: '姓名', dataIndex: 'name', },
    10.         { text: '性别', dataIndex: 'sex', },
    11.         { text: '年龄', dataIndex: 'age', },
    12.     ],
    13.     store: {        //定义数据仓库
    14.         data: [     //直接内联数据做测试使用
    15.             {name: 'Panda', sex: '男', age: 666 },
    16.         ],
    17.     }
    18.  
    19. }

    实例：设置列隐藏

    使用列的hidden配置项即可image

    1. //定义商品model
    2. Ext.define('PandaApp.model.Product', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [
    5.         { name: 'id', type: 'int' },
    6.         { name: 'name', type: 'string'},
    7.         { name: 'price', type: 'number' }
    8.     ]
    9. });
    10.  
    11. //创建商品store实例
    12. var dataStore = Ext.create('Ext.data.Store', {
    13.     model: 'PandaApp.model.Product',
    14.     data: [
    15.         {
    16.             id: 666,
    17.             name: 'Panda',
    18.             price: 66.66
    19.         },
    20.         {
    21.             id: 888,
    22.             name: 'Cat',
    23.             price: 77.77
    24.         },
    25.         {
    26.             id: 999,
    27.             name: 'Dog',
    28.             price: 88.88
    29.         }
    30.     ]
    31. });
    32.  
    33. //定义Grid
    34. Ext.define('PandaApp.com.ProductGrid', {
    35.     extend: 'Ext.grid.Panel',       //继承自Grid组件
    36.     title: '商品信息',               //标题
    37.     closable: true,                 //可关闭
    38.     draggable: true,                //可拖拽
    39.     renderTo: Ext.getBody(),        //渲染到body
    40.     width: 500,                     //设置宽度
    41.     store: dataStore,               //关联Store
    42.     columns: [                      //设置列
    43.         {
    44.             header: '商品编号',      //设置列标题
    45.             dataIndex: 'id',        //设置对应的Store数据列
    46.             flex: 0.5,              //设置列的想对宽度
    47.             hidden: true,           //设置列隐藏
    48.         },
    49.         {
    50.             header: '商品',
    51.             dataIndex: 'name',
    52.             flex: 1
    53.         },
    54.         {
    55.             header: '价格',
    56.             dataIndex: 'price',
    57.             flex: 1
    58.         }
    59.     ]
    60. });
    61.  
    62. //创建Grid实例
    63. Ext.create('PandaApp.com.ProductGrid');

    实例：设置列禁止排序

    默认情况下，是自动开启列排序的，可以将sortable配置项设置为false禁用排序

    image

    1. //定义商品model
    2. Ext.define('PandaApp.model.Product', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [
    5.         { name: 'id', type: 'int' },
    6.         { name: 'name', type: 'string'},
    7.         { name: 'price', type: 'number' }
    8.     ]
    9. });
    10.  
    11. //创建商品store实例
    12. var dataStore = Ext.create('Ext.data.Store', {
    13.     model: 'PandaApp.model.Product',
    14.     data: [
    15.         {
    16.             id: 666,
    17.             name: 'Panda',
    18.             price: 66.66
    19.         },
    20.         {
    21.             id: 888,
    22.             name: 'Cat',
    23.             price: 77.77
    24.         },
    25.         {
    26.             id: 999,
    27.             name: 'Dog',
    28.             price: 88.88
    29.         }
    30.     ]
    31. });
    32.  
    33. //定义Grid
    34. Ext.define('PandaApp.com.ProductGrid', {
    35.     extend: 'Ext.grid.Panel',       //继承自Grid组件
    36.     title: '商品信息',               //标题
    37.     closable: true,                 //可关闭
    38.     draggable: true,                //可拖拽
    39.     renderTo: Ext.getBody(),        //渲染到body
    40.     width: 500,                     //设置宽度
    41.     store: dataStore,               //关联Store
    42.     columns: [                      //设置列
    43.         {
    44.             header: '商品编号',      //设置列标题
    45.             dataIndex: 'id',        //设置对应的Store数据列
    46.             flex: 0.5,              //设置列的想对宽度
    47.             hidden: true,           //设置列隐藏
    48.         },
    49.         {
    50.             header: '商品',
    51.             dataIndex: 'name',
    52.             flex: 1,
    53.             sortable: false,        //禁用排序,重点在这里~~~~~~~~
    54.         },
    55.         {
    56.             header: '价格',
    57.             dataIndex: 'price',
    58.             flex: 1
    59.         }
    60.     ]
    61. });
    62.  
    63. //创建Grid实例
    64. Ext.create('PandaApp.com.ProductGrid');

    实例：设置远程排序

    可以将组件的remoteSort配置项设置为true，开启远程排序

    实例：设置列过滤

    image

    在grid中添加plugins: 'gridfilters'过滤插件

    然后在列中设置过滤filter配置项

    1. //定义商品model
    2. Ext.define('PandaApp.model.Product', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [
    5.         { name: 'id', type: 'int' },
    6.         { name: 'name', type: 'string'},
    7.         { name: 'price', type: 'number' }
    8.     ]
    9. });
    10.  
    11. //创建商品store实例
    12. var dataStore = Ext.create('Ext.data.Store', {
    13.     model: 'PandaApp.model.Product',
    14.     data: [
    15.         {
    16.             id: 666,
    17.             name: 'Panda',
    18.             price: 66.66
    19.         },
    20.         {
    21.             id: 888,
    22.             name: 'Cat',
    23.             price: 77.77
    24.         },
    25.         {
    26.             id: 999,
    27.             name: 'Dog',
    28.             price: 88.88
    29.         }
    30.     ]
    31. });
    32.  
    33. //定义Grid
    34. Ext.define('PandaApp.com.ProductGrid', {
    35.     extend: 'Ext.grid.Panel',       //继承自Grid组件
    36.     title: '商品信息',               //标题
    37.     closable: true,                 //可关闭
    38.     draggable: true,                //可拖拽
    39.     plugins: 'gridfilters',         //添加过滤插件
    40.     renderTo: Ext.getBody(),        //渲染到body
    41.     width: 500,                     //设置宽度
    42.     store: dataStore,               //关联Store
    43.     columns: [                      //设置列
    44.         {
    45.             header: '商品编号',      //设置列标题
    46.             dataIndex: 'id',        //设置对应的Store数据列
    47.             flex: 0.5,              //设置列的想对宽度
    48.             hidden: true,           //设置列隐藏
    49.         },
    50.         {
    51.             header: '商品',
    52.             dataIndex: 'name',
    53.             flex: 1,
    54.             filter:'string',        //开启过滤。设置过滤的类型
    55.         },
    56.         {
    57.             header: '商品',
    58.             dataIndex: 'name',
    59.             flex: 1,
    60.             filter: {               //设置列具体过滤配置
    61.                 type: 'string',     //过滤的类型为string
    62.                 itemDefaults: {     //具体的过滤配置项
    63.                     emptyText: '搜索内容'  //提示文本
    64.                 }
    65.             }
    66.         },
    67.         {
    68.             header: '价格',
    69.             dataIndex: 'price',
    70.             flex: 1,
    71.             renderer: function(value){   //自定义渲染
    72.                 return Ext.String.format("￥{0}",value);
    73.             }
    74.         }
    75.     ]
    76. });
    77.  
    78. //创建Grid实例
    79. Ext.create('PandaApp.com.ProductGrid');

    实例：设置列自定义渲染(强调显示)

    image

    在列配置项中使用render函数即可
    render函数的参数列表：
    value: The value of the bound model field
    metaData: Additional attributes of the cell being rendered, for example, tdCls,
    tdAttr, and tdStyle
    record: The record for the current row
    rowIndex: The index of the current row
    colIndex: The index of the current column
    store: The store that is bound to the grid
    view: The grid view

    1. // 定义Model
    2. Ext.define('StudentDataModel', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [   //定义字段
    5.         {name: 'name', mapping : 'name'},
    6.         {name: 'age', mapping : 'age'},
    7.         {name: 'marks', mapping : 'marks'}
    8.     ]
    9. });
    10.  
    11. // 定义数据
    12. var myData = [
    13.     { name : "Asha", age : "16", marks : "90" },
    14.     { name : "Vinit", age : "18", marks : "95" },
    15.     { name : "Anand", age : "20", marks : "76" },
    16.     { name : "Niharika", age : "21", marks : "86" },
    17.     { name : "Manali", age : "22", marks : "57" }
    18. ];
    19.  
    20. // 创建数据仓库
    21. var gridStore = Ext.create('Ext.data.Store', {
    22.     model: 'StudentDataModel',   //指定Model
    23.     data: myData                 //指定内联数据
    24. });
    25.  
    26. // 创建Gird
    27. Ext.create('Ext.grid.Panel', {
    28.     id: 'gridId',           //定义组件Id
    29.     store: gridStore,       //指定数据仓库
    30.     stripeRows: true,       //定义条纹
    31.     closable: true,         //可关闭
    32.     draggable: true,        //可拖拽
    33.     collapsible: true,      //定义可折叠
    34.     title: '学生成绩',       //Grid的面板标题
    35.     width: 600,             //定义宽带
    36.     renderTo: Ext.getBody(),//渲染到body
    37.     enableColumnMove: true, //开启列可移动
    38.     enableColumnResize:true,//开启列可调整大小
    39.     columns: [              //定义列Header行
    40.         {
    41.             header: "学生姓名",  //定义列标题
    42.             dataIndex: 'name',  //定义列对应的数据列名
    43.             id : 'name',        //设置列Id
    44.             flex:  0.5,         //定义列的宽度比例
    45.             sortable: true,     //设置为可排序
    46.             hideable: true      //设置为可隐藏
    47.         },
    48.         {
    49.             header: "年龄",
    50.             dataIndex: 'age',
    51.             flex: .5,
    52.             sortable: true,
    53.             hideable: true,
    54.             //自定义渲染
    55.             renderer : function(value, metaData, record, rowIndex, colIndex, store,view) {
    56.                 //对未成年人强调显示
    57.                 if(value < 18)
    58.                 {
    59.                     result = '' + value + '';
    60.                 }
    61.                 else
    62.                 {
    63.                     result = value;
    64.                 }
    65.                 return  result;
    66.             }
    67.         },
    68.         {
    69.             header: "分数",
    70.             dataIndex: 'marks',
    71.             flex: .5,
    72.             sortable: true
    73.         },
    74.         {
    75.             header: "是否优秀",
    76.             dataIndex: 'marks',
    77.             flex: .5,
    78.             sortable: true,
    79.             //自定义渲染
    80.             //设置显示条件
    81.             //设置分数对应等级
    82.             //显示为优秀、良好、普通
    83.             renderer :  function (value, metadata, record, rowIndex, colIndex, store) {
    84.                 if (value > 85) {
    85.                     return '优秀';
    86.                 } else if(value > 75){
    87.                     return '良好';
    88.                 } else {
    89.                     return '普通';
    90.                 }
    91.             }
    92.         }
    93.     ]
    94. });

    实例：设置列自定义渲染(加货币符号)

    image

    1. //定义商品model
    2. Ext.define('PandaApp.model.Product', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [
    5.         { name: 'id', type: 'int' },
    6.         { name: 'name', type: 'string'},
    7.         { name: 'price', type: 'number' }
    8.     ]
    9. });
    10.  
    11. //创建商品store实例
    12. var dataStore = Ext.create('Ext.data.Store', {
    13.     model: 'PandaApp.model.Product',
    14.     data: [
    15.         {
    16.             id: 666,
    17.             name: 'Panda',
    18.             price: 66.66
    19.         },
    20.         {
    21.             id: 888,
    22.             name: 'Cat',
    23.             price: 77.77
    24.         },
    25.         {
    26.             id: 999,
    27.             name: 'Dog',
    28.             price: 88.88
    29.         }
    30.     ]
    31. });
    32.  
    33. //定义Grid
    34. Ext.define('PandaApp.com.ProductGrid', {
    35.     extend: 'Ext.grid.Panel',       //继承自Grid组件
    36.     title: '商品信息',               //标题
    37.     closable: true,                 //可关闭
    38.     draggable: true,                //可拖拽
    39.     renderTo: Ext.getBody(),        //渲染到body
    40.     width: 500,                     //设置宽度
    41.     store: dataStore,               //关联Store
    42.     columns: [                      //设置列
    43.         {
    44.             header: '商品编号',      //设置列标题
    45.             dataIndex: 'id',        //设置对应的Store数据列
    46.             flex: 0.5,              //设置列的想对宽度
    47.             hidden: true,           //设置列隐藏
    48.         },
    49.         {
    50.             header: '商品',
    51.             dataIndex: 'name',
    52.             flex: 1,
    53.             sortable: false,        //禁用排序
    54.         },
    55.         {
    56.             header: '价格',
    57.             dataIndex: 'price',
    58.             flex: 1,
    59.             renderer: function(value){   //自定义渲染
    60.                 return Ext.String.format("￥{0}",value);
    61.             }
    62.         }
    63.     ]
    64. });
    65.  
    66. //创建Grid实例
    67. Ext.create('PandaApp.com.ProductGrid');

    实例：配置列类型-说明

    Gird的单元格类型定义在Ext.grid.column命名空间下，所有的单元格类型都继承自Ext.grid.column.Column类型。

    具体的单元格类型

    Ext.grid.column.RowNumberer：序号自动排序。
    Ext.grid.column.Action：图标列，可以单个/多个图标，可以绑定事件。
    Ext.grid.column.Boolean: 渲染布尔数据。
    Ext.grid.column.Date: 渲染日期数据。
    Ext.grid.column.Number: 渲染数值数据。
    Ext.grid.column.Template: 渲染模板数据。
    Ext.grid.column.Check：CheckBox列。

    实例：配置列类型-序号列(rownumberer)

    Grid的行序号列用于显示行的序号，可以自动增长编号

    将列的类型设置为rownumberer类型即可

    1. {
    2. 	xtype: 'rownumberer',    		  //定义行序号列
    3. 	align: 'left'					 //设置对齐方式，支持left、right、center
    4. },

    image

    实例代码：

    1. // 定义Model
    2. Ext.define('StudentDataModel', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [   //定义字段
    5.         {name: 'name', mapping : 'name'},
    6.         {name: 'age', mapping : 'age'},
    7.         {name: 'marks', mapping : 'marks'}
    8.     ]
    9. });
    10.  
    11. // 创建数据仓库
    12. var gridStore = Ext.create('Ext.data.Store', {
    13.     model: 'StudentDataModel',   //指定Model
    14.     data: [                     //指定内联数据
    15.         { name : "Asha", age : "16", marks : "90" },
    16.         { name : "Vinit", age : "18", marks : "95" },
    17.         { name : "Anand", age : "20", marks : "76" },
    18.         { name : "Niharika", age : "21", marks : "86" },
    19.         { name : "Manali", age : "22", marks : "57" }
    20.     ]
    21. });
    22.  
    23. // 创建Gird
    24. Ext.create('Ext.grid.Panel', {
    25.     id: 'gridId',           //定义组件Id
    26.     store: gridStore,       //指定数据仓库
    27.     stripeRows: true,       //定义条纹
    28.     closable: true,         //可关闭
    29.     draggable: true,        //可拖拽
    30.     collapsible: true,      //定义可折叠
    31.     title: '学生成绩',       //Grid的面板标题
    32.     width: 600,             //定义宽带
    33.     renderTo: Ext.getBody(),//渲染到body
    34.     enableColumnMove: true, //开启列可移动
    35.     enableColumnResize:true,//开启列可调整大小
    36.     columns: [              //定义列
    37.         {                   //定义行序号列
    38.             xtype: 'rownumberer'
    39.         },
    40.         {
    41.             header: "学生姓名",  //定义列标题
    42.             dataIndex: 'name',  //定义列对应的数据列名
    43.             id : 'name',        //设置列Id
    44.             flex:  0.5,         //定义列的宽度比例
    45.             sortable: true,     //设置为可排序
    46.             hideable: true      //设置为可隐藏
    47.         },
    48.         {
    49.             header: "年龄",
    50.             dataIndex: 'age',
    51.             flex: .5,
    52.             sortable: true,
    53.             hideable: false
    54.         },
    55.         {
    56.             header: "分数",
    57.             dataIndex: 'marks',
    58.             flex: .5,
    59.             sortable: true
    60.         }
    61.     ]
    62. });

    实例：配置列类型-模板列(templatecolumn)

    使用模板列可以实现对列的自定义格式化显示

    image

    设置列的类型为模板列

    xtype: 'templatecolumn',  //设置列类型为模板列

    配置列的tel配置项即可配置具体模板

    tpl: "{marks}分",      //配置模板

    代码：

    1. //创建数据仓库
    2. var dataStore = Ext.create('Ext.data.Store', {
    3.     flelds: [
    4.         "id","name","score"
    5.     ],
    6.     data: [
    7.         {
    8.             id: 666,
    9.             name: 'panda',
    10.             score: 99
    11.         },
    12.         {
    13.             id: 222,
    14.             name: 'dog',
    15.             score: 86
    16.         },
    17.         {
    18.             id: 111,
    19.             name: 'cat',
    20.             score: 76
    21.         },
    22.     ]
    23. });
    1. //创建Gird
    2. Ext.create('Ext.grid.Panel', {
    3.     id: 'girdId666',
    4.     renderTo: Ext.getBody(),
    5.     store: dataStore,
    6.     width: 600,
    7.     closable: true,
    8.     columns: [
    9.         {
    10.             header: '编号',
    11.             dataIndex: 'id',
    12.             sortable: true,
    13.             flex: 0.5
    14.         },
    15.         {
    16.             header: '姓名',
    17.             dataIndex: 'name',
    18.             sortable: true,
    19.             flex: 1
    20.         },
    21.         {
    22.             xtype: 'templatecolumn',  //设置为模板列
    23.             header: '分数',
    24.             dataIndex: 'score',
    25.             sortable: true,
    26.             flex: 1,
    27.             tpl: "{score}分"
    28.         }
    29.     ]
    30. });

    实例：配置列类型-数值列(numbercolumn)

    image

    设置列的类型为数值列

    xtype: 'numbercolumn',  //设置列类型为数值列

    配置列的format配置项即可

    format: '0.00',     //显示的格式 0.00

    代码：

    1. // 定义Model
    2. Ext.define('StudentDataModel', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [   //定义字段
    5.         { name: 'name', type: 'string'},
    6.         { name: 'age', type : 'int'},
    7.         { name: 'marks', type : 'number'},
    8.         { name: 'createDate', type: 'date' }
    9.  
    10.     ]
    11. });
    12.  
    13. // 创建数据仓库
    14. var gridStore = Ext.create('Ext.data.Store', {
    15.     model: 'StudentDataModel',   //指定Model
    16.     data: [                     //指定内联数据
    17.         { name : "Asha", age : "16", marks : "90", createDate: '2020/11/02' },
    18.         { name : "Vinit", age : "18", marks : "95", createDate: '2020/11/02' },
    19.         { name : "Anand", age : "20", marks : "76", createDate: '2020/11/02' },
    20.         { name : "Niharika", age : "21", marks : "86", createDate: '2020/11/02' },
    21.         { name : "Manali", age : "22", marks : "57", createDate: '2020/11/02' }
    22.     ]
    23. });
    24.  
    25. // 创建Gird
    26. Ext.create('Ext.grid.Panel', {
    27.     id: 'gridId',           //定义组件Id
    28.     store: gridStore,       //指定数据仓库
    29.     stripeRows: true,       //定义条纹
    30.     closable: true,         //可关闭
    31.     draggable: true,        //可拖拽
    32.     collapsible: true,      //定义可折叠
    33.     title: '学生成绩',       //Grid的面板标题
    34.     width: 600,             //定义宽带
    35.     renderTo: Ext.getBody(),//渲染到body
    36.     enableColumnMove: true, //开启列可移动
    37.     enableColumnResize:true,//开启列可调整大小
    38.     columns: [              //定义列
    39.         {                   //定义行序号列
    40.             xtype: 'rownumberer'
    41.         },
    42.         {
    43.             header: "学生姓名",  //定义列标题
    44.             dataIndex: 'name',  //定义列对应的数据列名
    45.             id : 'name',        //设置列Id
    46.             flex:  0.5,         //定义列的宽度比例
    47.             sortable: true,     //设置为可排序
    48.             hideable: true      //设置为可隐藏
    49.         },
    50.         {
    51.             header: "年龄",
    52.             dataIndex: 'age',
    53.             flex: .5,
    54.             sortable: true,
    55.             hideable: false
    56.         },
    57.         {
    58.             header: "分数",
    59.             xtype: 'numbercolumn',   //设置列类型为数值列
    60.             format: '0.00',          //显示的格式 0.00
    61.             dataIndex: 'marks',
    62.             flex: .5,
    63.             sortable: true
    64.         },
    65.         {
    66.             header: "添加日期",
    67.             xtype: 'datecolumn',        //设置列类型为日期列
    68.             format: 'Y年m月d日',        //设置日期格式
    69.             dataIndex: 'createDate',
    70.             flex: .5,
    71.             sortable: true
    72.         }
    73.     ]
    74. });

    实例：配置列类型-日期列(datecolumn)

    image

    设置列的类型为数值列

    xtype: 'datecolumn',  //设置列类型为日期列

    配置列的format配置项即可

    format: 'Y年m月d日',     //显示的格式 2021年11月22日

    代码：

    1. // 定义Model
    2. Ext.define('StudentDataModel', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [   //定义字段
    5.         { name: 'name', type: 'string'},
    6.         { name: 'age', type : 'int'},
    7.         { name: 'marks', type : 'number'},
    8.         { name: 'createDate', type: 'date' }
    9.  
    10.     ]
    11. });
    12.  
    13. // 创建数据仓库
    14. var gridStore = Ext.create('Ext.data.Store', {
    15.     model: 'StudentDataModel',   //指定Model
    16.     data: [                     //指定内联数据
    17.         { name : "Asha", age : "16", marks : "90", createDate: '2020/11/02' },
    18.         { name : "Vinit", age : "18", marks : "95", createDate: '2020/11/02' },
    19.         { name : "Anand", age : "20", marks : "76", createDate: '2020/11/02' },
    20.         { name : "Niharika", age : "21", marks : "86", createDate: '2020/11/02' },
    21.        { name : "Manali", age : "22", marks : "57", createDate: '2020/11/02' }
    22.     ]
    23. });
    24.  
    25. // 创建Gird
    26. Ext.create('Ext.grid.Panel', {
    27.     id: 'gridId',           //定义组件Id
    28.     store: gridStore,       //指定数据仓库
    29.     stripeRows: true,       //定义条纹
    30.     closable: true,         //可关闭
    31.     draggable: true,        //可拖拽
    32.     collapsible: true,      //定义可折叠
    33.     title: '学生成绩',       //Grid的面板标题
    34.     width: 600,             //定义宽带
    35.     renderTo: Ext.getBody(),//渲染到body
    36.     enableColumnMove: true, //开启列可移动
    37.     enableColumnResize:true,//开启列可调整大小
    38.     columns: [              //定义列
    39.         {                   //定义行序号列
    40.             xtype: 'rownumberer'
    41.         },
    42.         {
    43.             header: "学生姓名",  //定义列标题
    44.             dataIndex: 'name',  //定义列对应的数据列名
    45.             id : 'name',        //设置列Id
    46.             flex:  0.5,         //定义列的宽度比例
    47.             sortable: true,     //设置为可排序
    48.             hideable: true      //设置为可隐藏
    49.         },
    50.         {
    51.             header: "年龄",
    52.             dataIndex: 'age',
    53.             flex: .5,
    54.             sortable: true,
    55.             hideable: false
    56.         },
    57.         {
    58.             header: "分数",
    59.             xtype: 'numbercolumn',   //设置列类型为数值列
    60.             format: '0.00',          //显示的格式 0.00
    61.             dataIndex: 'marks',
    62.             flex: .5,
    63.             sortable: true
    64.         },
    65.         {
    66.             header: "添加日期",
    67.             xtype: 'datecolumn',        //设置列类型为日期列
    68.             format: 'Y年m月d日',        //设置日期格式
    69.             dataIndex: 'createDate',
    70.             flex: .5,
    71.             sortable: true
    72.         }
    73.     ]
    74. });

    实例：配置列类型-布尔列(booleancolumn)

    image

    设置列的xtype

    xtype: 'booleancolumn',        //设置列类型为布尔列

    设置配置项

    1. falseText: '未检查',           //false显示的文本
    2. trueText: '已检查',            //true显示的文本

    代码：

    1. // 定义Model
    2. Ext.define('StudentDataModel', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [   //定义字段
    5.         { name: 'name', type: 'string'},
    6.         { name: 'age', type : 'int'},
    7.         { name: 'marks', type : 'number'},
    8.         { name: 'isCheck', type: 'bool' },
    9.     ]
    10. });
    11.  
    12. // 创建数据仓库
    13. var gridStore = Ext.create('Ext.data.Store', {
    14.     model: 'StudentDataModel',   //指定Model
    15.     data: [                     //指定内联数据
    16.         { name : "Asha", age : "16", marks : "90", isCheck: true },
    17.         { name : "Vinit", age : "18", marks : "95", isCheck: false },
    18.         { name : "Anand", age : "20", marks : "76", isCheck: true },
    19.         { name : "Niharika", age : "21", marks : "86", isCheck: false },
    20.         { name : "Manali", age : "22", marks : "57", isCheck: true }
    21.     ]
    22. });
    23.  
    24. // 创建Gird
    25. Ext.create('Ext.grid.Panel', {
    26.     id: 'gridId',           //定义组件Id
    27.     store: gridStore,       //指定数据仓库
    28.     stripeRows: true,       //定义条纹
    29.     closable: true,         //可关闭
    30.     draggable: true,        //可拖拽
    31.     collapsible: true,      //定义可折叠
    32.     title: '学生成绩',       //Grid的面板标题
    33.     width: 600,             //定义宽带
    34.     renderTo: Ext.getBody(),//渲染到body
    35.     enableColumnMove: true, //开启列可移动
    36.     enableColumnResize:true,//开启列可调整大小
    37.     columns: [              //定义列
    38.         {                   //定义行序号列
    39.             xtype: 'rownumberer'
    40.         },
    41.         {
    42.             header: "学生姓名",  //定义列标题
    43.             dataIndex: 'name',  //定义列对应的数据列名
    44.             id : 'name',        //设置列Id
    45.             flex:  0.5,         //定义列的宽度比例
    46.             sortable: true,     //设置为可排序
    47.             hideable: true      //设置为可隐藏
    48.         },
    49.         {
    50.             header: "年龄",
    51.             dataIndex: 'age',
    52.             flex: .5,
    53.             sortable: true,
    54.             hideable: false
    55.         },
    56.         {
    57.             header: "分数",
    58.             xtype: 'numbercolumn',   //设置列类型为数值列
    59.             format: '0.00',          //显示的格式 0.00
    60.             dataIndex: 'marks',
    61.             flex: .5,
    62.             sortable: true
    63.         },
    64.         {
    65.             header: "是否检查",
    66.             xtype: 'booleancolumn',        //设置列类型为布尔列
    67.             falseText: '未检查',           //false显示的文本
    68.             trueText: '已检查',            //true显示的文本
    69.             dataIndex: 'isCheck',
    70.             flex: .5,
    71.             sortable: true
    72.         }
    73.     ]
    74. });

    实例：配置列类型-check列(checkcolumn)

    image

    设置列xtype

    xtype: 'checkcolumn',        //设置列类型为check列

    代码：

    1. // 定义Model
    2. Ext.define('StudentDataModel', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [   //定义字段
    5.         { name: 'name', type: 'string'},
    6.         { name: 'age', type : 'int'},
    7.         { name: 'marks', type : 'number'},
    8.         { name: 'isCheck', type: 'bool' },
    9.     ]
    10. });
    11.  
    12. // 创建数据仓库
    13. var gridStore = Ext.create('Ext.data.Store', {
    14.     model: 'StudentDataModel',   //指定Model
    15.     data: [                     //指定内联数据
    16.         { name : "Asha", age : "16", marks : "90", isCheck: true },
    17.         { name : "Vinit", age : "18", marks : "95", isCheck: false },
    18.         { name : "Anand", age : "20", marks : "76", isCheck: true },
    19.         { name : "Niharika", age : "21", marks : "86", isCheck: false },
    20.         { name : "Manali", age : "22", marks : "57", isCheck: true }
    21.     ]
    22. });
    23.  
    24. // 创建Gird
    25. Ext.create('Ext.grid.Panel', {
    26.     id: 'gridId',           //定义组件Id
    27.     store: gridStore,       //指定数据仓库
    28.     stripeRows: true,       //定义条纹
    29.     closable: true,         //可关闭
    30.     draggable: true,        //可拖拽
    31.     collapsible: true,      //定义可折叠
    32.     title: '学生成绩',       //Grid的面板标题
    33.     width: 600,             //定义宽带
    34.     renderTo: Ext.getBody(),//渲染到body
    35.     enableColumnMove: true, //开启列可移动
    36.     enableColumnResize:true,//开启列可调整大小
    37.     columns: [              //定义列
    38.         {                   //定义行序号列
    39.             xtype: 'rownumberer'
    40.         },
    41.         {
    42.             header: "学生姓名",  //定义列标题
    43.             dataIndex: 'name',  //定义列对应的数据列名
    44.             id : 'name',        //设置列Id
    45.             flex:  0.5,         //定义列的宽度比例
    46.             sortable: true,     //设置为可排序
    47.             hideable: true      //设置为可隐藏
    48.         },
    49.         {
    50.             header: "年龄",
    51.             dataIndex: 'age',
    52.             flex: .5,
    53.             sortable: true,
    54.             hideable: false
    55.         },
    56.         {
    57.             header: "分数",
    58.             xtype: 'numbercolumn',   //设置列类型为数值列
    59.             format: '0.00',          //显示的格式 0.00
    60.             dataIndex: 'marks',
    61.             flex: .5,
    62.             sortable: true
    63.         },
    64.         {
    65.             header: "是否检查",
    66.             xtype: 'checkcolumn',        //设置列类型为check列
    67.             dataIndex: 'isCheck',
    68.             flex: .5,
    69.             sortable: true
    70.         }
    71.     ]
    72. });

    实例：配置列类型-动作列(actioncolumn)

    image

    设置列类型

    xtype: 'actioncolumn',        //设置列类型为action列

    设置具体的按钮子项

    1. items: [{
    2.     iconCls: 'x-fa fa-cog',
    3.     tooltip: 'Edit',
    4.     handler: function(grid, rowIndex, colIndex) {
    5.         console.log('Config');
    6.     }
    7. },{
    8.     iconCls: 'x-fa fa-cog',
    9.     tooltip: 'Delete',
    10.     handler: function(grid, rowIndex, colIndex) {
    11.         console.log('Delete');
    12.     }
    13. }]

    代码：

    1. // 定义Model
    2. Ext.define('StudentDataModel', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [   //定义字段
    5.         { name: 'name', type: 'string'},
    6.         { name: 'age', type : 'int'},
    7.         { name: 'marks', type : 'number'},
    8.         { name: 'isCheck', type: 'bool' },
    9.     ]
    10. });
    11.  
    12. // 创建数据仓库
    13. var gridStore = Ext.create('Ext.data.Store', {
    14.     model: 'StudentDataModel',   //指定Model
    15.     data: [                     //指定内联数据
    16.         { name : "Asha", age : "16", marks : "90", isCheck: true },
    17.         { name : "Vinit", age : "18", marks : "95", isCheck: false },
    18.         { name : "Anand", age : "20", marks : "76", isCheck: true },
    19.         { name : "Niharika", age : "21", marks : "86", isCheck: false },
    20.         { name : "Manali", age : "22", marks : "57", isCheck: true }
    21.     ]
    22. });
    23.  
    24. // 创建Gird
    25. Ext.create('Ext.grid.Panel', {
    26.     id: 'gridId',           //定义组件Id
    27.     store: gridStore,       //指定数据仓库
    28.     stripeRows: true,       //定义条纹
    29.     closable: true,         //可关闭
    30.     draggable: true,        //可拖拽
    31.     collapsible: true,      //定义可折叠
    32.     title: '学生成绩',       //Grid的面板标题
    33.     width: 600,             //定义宽带
    34.     renderTo: Ext.getBody(),//渲染到body
    35.     enableColumnMove: true, //开启列可移动
    36.     enableColumnResize:true,//开启列可调整大小
    37.     columns: [              //定义列
    38.         {                   //定义行序号列
    39.             xtype: 'rownumberer'
    40.         },
    41.         {
    42.             header: "学生姓名",  //定义列标题
    43.             dataIndex: 'name',  //定义列对应的数据列名
    44.             id : 'name',        //设置列Id
    45.             flex:  0.5,         //定义列的宽度比例
    46.             sortable: true,     //设置为可排序
    47.             hideable: true      //设置为可隐藏
    48.         },
    49.         {
    50.             header: "年龄",
    51.             dataIndex: 'age',
    52.             flex: .5,
    53.             sortable: true,
    54.             hideable: false
    55.         },
    56.         {
    57.             header: "分数",
    58.             xtype: 'numbercolumn',   //设置列类型为数值列
    59.             format: '0.00',          //显示的格式 0.00
    60.             dataIndex: 'marks',
    61.             flex: .5,
    62.             sortable: true
    63.         },
    64.         {
    65.             header: "操作",
    66.             xtype: 'actioncolumn',        //设置列类型为action列
    67.             flex: .5,
    68.             items: [{
    69.                 iconCls: 'x-fa fa-cog',
    70.                 tooltip: 'Edit',
    71.                 handler: function(grid, rowIndex, colIndex) {
    72.                     console.log('Config');
    73.                 }
    74.             },{
    75.                 iconCls: 'x-fa fa-cog',
    76.                 tooltip: 'Delete',
    77.                 handler: function(grid, rowIndex, colIndex) {
    78.                     console.log('Delete');
    79.                 }
    80.             }]
    81.         }
    82.     ]
    83. });

    实例：配置组件列

    支持的组件列类型

    Progress Bar (Ext.ProgressBarWidget or progressbarwidget)
    Slider (Ext.slider.Widget or sliderwidget)
    Sparklines (Ext.sparkline.*):
    Line (sparklineline)
    Bar (sparklinebar)
    Discrete (sparklinediscrete)
    Bullet (sparklinebullet)
    Pie (sparklinepie)
    Box (sparklinebox)
    TriState (sparklinetristate)

    实例：组件列-按钮

    列除了可以显示文本，还可以放置组件
    将列配置为组件列即可

    1. {
    2.     xtype : 'widgetcolumn',
    3.     flex: .5,
    4.     header : 'Action',
    5.     widget: {
    6.         xtype : 'button',
    7.         text : 'Details'
    8.     }
    9. }

    实例：

    1. // 定义Model
    2. Ext.define('StudentDataModel', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [   //定义字段
    5.         {name: 'name', mapping : 'name'},
    6.         {name: 'age', mapping : 'age'},
    7.         {name: 'marks', mapping : 'marks'}
    8.     ]
    9. });
    10.  
    11. // 定义数据
    12. var myData = [
    13.     { name : "Asha", age : "16", marks : "90" },
    14.     { name : "Vinit", age : "18", marks : "95" },
    15.     { name : "Anand", age : "20", marks : "76" },
    16.     { name : "Niharika", age : "21", marks : "86" },
    17.     { name : "Manali", age : "22", marks : "57" }
    18. ];
    19.  
    20. // 创建数据仓库
    21. var gridStore = Ext.create('Ext.data.Store', {
    22.     model: 'StudentDataModel',   //指定Model
    23.     data: myData                 //指定内联数据
    24. });
    25.  
    26. // 创建Gird
    27. Ext.create('Ext.grid.Panel', {
    28.     id: 'gridId',           //定义组件Id
    29.     store: gridStore,       //指定数据仓库
    30.     stripeRows: true,       //定义条纹
    31.     closable: true,         //可关闭
    32.     draggable: true,        //可拖拽
    33.     collapsible: true,      //定义可折叠
    34.     title: '学生成绩',       //Grid的面板标题
    35.     width: 700,             //定义宽带
    36.     renderTo: Ext.getBody(),//渲染到body
    37.     enableColumnMove: true, //开启列可移动
    38.     enableColumnResize:true,//开启列可调整大小
    39.     columns: [              //定义列Header行
    40.         {
    41.             header: "学生姓名",  //定义列标题
    42.             dataIndex: 'name',  //定义列对应的数据列名
    43.             id : 'name',        //设置列Id
    44.             flex:  0.5,         //定义列的宽度比例
    45.             sortable: true,     //设置为可排序
    46.             hideable: true      //设置为可隐藏
    47.         },
    48.         {
    49.             header: "年龄",
    50.             dataIndex: 'age',
    51.             flex: .5,
    52.             sortable: true,
    53.             hideable: true,
    54.             //自定义渲染
    55.             renderer : function(value, metaData, record, rowIndex, colIndex, store,view) {
    56.                 //对未成年人强调显示
    57.                 if(value < 18)
    58.                 {
    59.                     result = '' + value + '';
    60.                 }
    61.                 else
    62.                 {
    63.                     result = value;
    64.                 }
    65.                 return  result;
    66.             }
    67.         },
    68.         {
    69.             header: "分数",
    70.             dataIndex: 'marks',
    71.             flex: .5,
    72.             sortable: true
    73.         },
    74.         {
    75.             header: "是否优秀",
    76.             dataIndex: 'marks',
    77.             flex: .5,
    78.             sortable: true,
    79.             //自定义渲染
    80.             //设置显示条件
    81.             //设置分数对应等级
    82.             //显示为优秀、良好、普通
    83.             renderer :  function (value, metadata, record, rowIndex, colIndex, store) {
    84.                 if (value > 85) {
    85.                     return '优秀';
    86.                 } else if(value > 75){
    87.                     return '良好';
    88.                 } else {
    89.                     return '普通';
    90.                 }
    91.             }
    92.         },
    93.         {
    94.             xtype : 'widgetcolumn',
    95.             flex: .5,
    96.             header : '详细信息',
    97.             widget: {
    98.                 xtype : 'button',
    99.                 text : '点击查看',
    100.                 listeners: {
    101.                     click: function(btn){
    102.                         var rec = btn.getWidgetRecord();
    103.                         console.log('Widget Button clicked! - ', rec.get('Name'));
    104.                     }
    105.                 }
    106.             }
    107.         }
    108.     ]
    109. });

    实例：组件列-折线图图形

    image

    代码：

    1. // 定义Model
    2. Ext.define('StudentDataModel', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [   //定义字段
    5.         {name: 'name', mapping : 'name'},
    6.         {name: 'age', mapping : 'age'},
    7.         {name: 'marks', mapping : 'marks'},
    8.         {name: 'line',type: 'auto', defaultValue: [4, 9, 12, 66, 9] }
    9.     ]
    10. });
    11.  
    12. // 创建数据仓库
    13. var gridStore = Ext.create('Ext.data.Store', {
    14.     model: 'StudentDataModel',   //指定Model
    15.     data: [                       //指定内联数据
    16.         { name : "Asha", age : "16", marks : "90"     ,line: [4, 1, 12, 66, 9] },
    17.         { name : "Vinit", age : "18", marks : "95"    ,line: [4, 9, 32, 66, 9] },
    18.         { name : "Anand", age : "20", marks : "76"    ,line: [4, 9, 12, 56, 9] },
    19.         { name : "Niharika", age : "21", marks : "86" ,line: [4, 9, 12, 46, 99] },
    20.         { name : "Manali", age : "22", marks : "57"   ,line: [4, 9, 11, 66, 79] }
    21.     ]
    22. });
    23.  
    24. // 创建Gird
    25. Ext.create('Ext.grid.Panel', {
    26.     id: 'gridId',           //定义组件Id
    27.     store: gridStore,       //指定数据仓库
    28.     stripeRows: true,       //定义条纹
    29.     closable: true,         //可关闭
    30.     draggable: true,        //可拖拽
    31.     collapsible: true,      //定义可折叠
    32.     title: '学生成绩',       //Grid的面板标题
    33.     width: 700,             //定义宽带
    34.     renderTo: Ext.getBody(),//渲染到body
    35.     enableColumnMove: true, //开启列可移动
    36.     enableColumnResize:true,//开启列可调整大小
    37.     columns: [              //定义列Header行
    38.         {
    39.             header: "学生姓名",  //定义列标题
    40.             dataIndex: 'name',  //定义列对应的数据列名
    41.             id : 'name',        //设置列Id
    42.             flex:  0.5,         //定义列的宽度比例
    43.             sortable: true,     //设置为可排序
    44.             hideable: true      //设置为可隐藏
    45.         },
    46.         {
    47.             header: "年龄",
    48.             dataIndex: 'age',
    49.             flex: .5,
    50.             sortable: true,
    51.             hideable: true,
    52.         },
    53.         {
    54.             header: "分数",
    55.             dataIndex: 'marks',
    56.             flex: .5,
    57.             sortable: true
    58.         },
    59.         {
    60.             xtype : 'widgetcolumn',  //配置为组件列
    61.             flex: .5,
    62.             header : '详细信息',
    63.             dataIndex: 'line',
    64.             widget: {
    65.                 xtype: 'sparklineline'  //设置为折线图
    66.             }
    67.         }
    68.     ]
    69. });

    实例：组件列-进度条

    image

    代码：

    1. // 定义Model
    2. Ext.define('StudentDataModel', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [   //定义字段
    5.         { name: 'name', type: 'string'},
    6.         { name: 'age', type : 'int'},
    7.         { name: 'marks', type : 'number'},
    8.         { name: 'isCheck', type: 'bool' },
    9.         { name: 'progressData', type: 'number' },
    10.     ]
    11. });
    12.  
    13. // 创建数据仓库
    14. var gridStore = Ext.create('Ext.data.Store', {
    15.     model: 'StudentDataModel',   //指定Model
    16.     data: [                     //指定内联数据
    17.         { name : "Asha", age : "16", marks : "90", progressData: 0.15 },
    18.         { name : "Vinit", age : "18", marks : "95", progressData: 0.8 },
    19.         { name : "Anand", age : "20", marks : "76", progressData: 0.6 },
    20.         { name : "Niharika", age : "21", marks : "86", progressData: 0.5 },
    21.         { name : "Manali", age : "22", marks : "57", progressData: 0.4 }
    22.     ]
    23. });
    24.  
    25. // 创建Gird
    26. Ext.create('Ext.grid.Panel', {
    27.     id: 'gridId',           //定义组件Id
    28.     store: gridStore,       //指定数据仓库
    29.     stripeRows: true,       //定义条纹
    30.     closable: true,         //可关闭
    31.     draggable: true,        //可拖拽
    32.     collapsible: true,      //定义可折叠
    33.     title: '学生成绩',       //Grid的面板标题
    34.     width: 600,             //定义宽带
    35.     renderTo: Ext.getBody(),//渲染到body
    36.     enableColumnMove: true, //开启列可移动
    37.     enableColumnResize:true,//开启列可调整大小
    38.     columns: [              //定义列
    39.         {                   //定义行序号列
    40.             xtype: 'rownumberer',
    41.             align: 'left'
    42.         },
    43.         {
    44.             header: "学生姓名",  //定义列标题
    45.             dataIndex: 'name',  //定义列对应的数据列名
    46.             id : 'name',        //设置列Id
    47.             flex:  0.5,         //定义列的宽度比例
    48.             sortable: true,     //设置为可排序
    49.             hideable: true      //设置为可隐藏
    50.         },
    51.         {
    52.             header: "年龄",
    53.             dataIndex: 'age',
    54.             flex: .5,
    55.             sortable: true,
    56.             hideable: false
    57.         },
    58.         {
    59.             header: "分数",
    60.             xtype: 'numbercolumn',   //设置列类型为数值列
    61.             format: '0.00',          //显示的格式 0.00
    62.             dataIndex: 'marks',
    63.             flex: .5,
    64.             sortable: true
    65.         },
    66.         {
    67.             header: "个人进度",
    68.             xtype: 'widgetcolumn',   //定义组件列
    69.             dataIndex: 'progressData',
    70.             sortable: true,
    71.             widget: {
    72.                 xtype: 'progressbarwidget', //设置为进度条类型
    73.                 textTpl: [' 
      {percent:number("0")}%
       '       ]
    74.             }
    75.         }
    76.     ]
    77. });

    实例：组件列-滑动条

    image

    代码：

    1. // 定义Model
    2. Ext.define('StudentDataModel', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [   //定义字段
    5.         { name: 'name', type: 'string'},
    6.         { name: 'age', type : 'int'},
    7.         { name: 'marks', type : 'number'},
    8.         { name: 'isCheck', type: 'bool' },
    9.         { name: 'progressData', type: 'number' },
    10.     ]
    11. });
    12.  
    13. // 创建数据仓库
    14. var gridStore = Ext.create('Ext.data.Store', {
    15.     model: 'StudentDataModel',   //指定Model
    16.     data: [                     //指定内联数据
    17.         { name : "Asha", age : "16", marks : "90", progressData: 0.15 },
    18.         { name : "Vinit", age : "18", marks : "95", progressData: 0.8 },
    19.         { name : "Anand", age : "20", marks : "76", progressData: 0.6 },
    20.         { name : "Niharika", age : "21", marks : "86", progressData: 0.5 },
    21.         { name : "Manali", age : "22", marks : "57", progressData: 0.4 }
    22.     ]
    23. });
    24.  
    25. // 创建Gird
    26. Ext.create('Ext.grid.Panel', {
    27.     id: 'gridId',           //定义组件Id
    28.     store: gridStore,       //指定数据仓库
    29.     stripeRows: true,       //定义条纹
    30.     closable: true,         //可关闭
    31.     draggable: true,        //可拖拽
    32.     collapsible: true,      //定义可折叠
    33.     title: '学生成绩',       //Grid的面板标题
    34.     width: 600,             //定义宽带
    35.     renderTo: Ext.getBody(),//渲染到body
    36.     enableColumnMove: true, //开启列可移动
    37.     enableColumnResize:true,//开启列可调整大小
    38.     columns: [              //定义列
    39.         {                   //定义行序号列
    40.             xtype: 'rownumberer',
    41.             align: 'left'
    42.         },
    43.         {
    44.             header: "学生姓名",  //定义列标题
    45.             dataIndex: 'name',  //定义列对应的数据列名
    46.             id : 'name',        //设置列Id
    47.             flex:  0.5,         //定义列的宽度比例
    48.             sortable: true,     //设置为可排序
    49.             hideable: true      //设置为可隐藏
    50.         },
    51.         {
    52.             header: "年龄",
    53.             dataIndex: 'age',
    54.             flex: .5,
    55.             sortable: true,
    56.             hideable: false
    57.         },
    58.         {
    59.             header: "分数",
    60.             xtype: 'numbercolumn',   //设置列类型为数值列
    61.             format: '0.00',          //显示的格式 0.00
    62.             dataIndex: 'marks',
    63.             flex: .5,
    64.             sortable: true
    65.         },
    66.         {
    67.             header: "个人进度",
    68.             xtype: 'widgetcolumn',  //配置为组件列
    69.             text: '滑动条',
    70.             flex: .5,
    71.             dataIndex: 'progressData',
    72.             widget: {
    73.                 xtype: 'sliderwidget',  //配置滑动条
    74.                 minValue: 0,            //设置下限
    75.                 maxValue: 1,            //设置上限
    76.                 decimalPrecision: 2,    //设置精度范围
    77.                 listeners: {
    78.                     change: function(slider, value) {
    79.                         if (slider.getWidgetRecord)
    80.                         {
    81.                             var rec = slider.getWidgetRecord();
    82.                             if (rec)
    83.                             { 
    84.                                 rec.set('progress', value); 
    85.                             }
    86.                         }
    87.                     }
    88.                 }
    89.             }
    90.         }
    91.     ]
    92. });

    实例：组件列-饼图

    image

    代码：

    1. // 定义Model
    2. Ext.define('StudentDataModel', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [   //定义字段
    5.         {name: 'name', mapping : 'name'},
    6.         {name: 'age', mapping : 'age'},
    7.         {name: 'marks', mapping : 'marks'},
    8.         {name: 'line',type: 'auto', defaultValue: [4, 9, 12, 66, 9] }
    9.     ]
    10. });
    11.  
    12. // 创建数据仓库
    13. var gridStore = Ext.create('Ext.data.Store', {
    14.     model: 'StudentDataModel',   //指定Model
    15.     data: [                       //指定内联数据
    16.         { name : "Asha", age : "16", marks : "90"     ,line: [4, 1, 12, 66, 9] },
    17.         { name : "Vinit", age : "18", marks : "95"    ,line: [4, 9, 32, 66, 9] },
    18.         { name : "Anand", age : "20", marks : "76"    ,line: [4, 9, 12, 56, 9] },
    19.         { name : "Niharika", age : "21", marks : "86" ,line: [4, 9, 12, 46, 99] },
    20.         { name : "Manali", age : "22", marks : "57"   ,line: [4, 9, 11, 66, 79] }
    21.     ]
    22. });
    23.  
    24. // 创建Gird
    25. Ext.create('Ext.grid.Panel', {
    26.     id: 'gridId',           //定义组件Id
    27.     store: gridStore,       //指定数据仓库
    28.     stripeRows: true,       //定义条纹
    29.     closable: true,         //可关闭
    30.     draggable: true,        //可拖拽
    31.     collapsible: true,      //定义可折叠
    32.     title: '学生成绩',       //Grid的面板标题
    33.     width: 700,             //定义宽带
    34.     renderTo: Ext.getBody(),//渲染到body
    35.     enableColumnMove: true, //开启列可移动
    36.     enableColumnResize:true,//开启列可调整大小
    37.     columns: [              //定义列Header行
    38.         {
    39.             header: "学生姓名",  //定义列标题
    40.             dataIndex: 'name',  //定义列对应的数据列名
    41.             id : 'name',        //设置列Id
    42.             flex:  0.5,         //定义列的宽度比例
    43.             sortable: true,     //设置为可排序
    44.             hideable: true      //设置为可隐藏
    45.         },
    46.         {
    47.             header: "年龄",
    48.             dataIndex: 'age',
    49.             flex: .5,
    50.             sortable: true,
    51.             hideable: true,
    52.         },
    53.         {
    54.             header: "分数",
    55.             dataIndex: 'marks',
    56.             flex: .5,
    57.             sortable: true
    58.         },
    59.         {
    60.             xtype : 'widgetcolumn',  //配置为组件列
    61.             flex: .5,
    62.             header : '详细信息',
    63.             dataIndex: 'line',
    64.             widget: {
    65.                 xtype: 'sparklinepie'  //设置为饼图
    66.             }
    67.         }
    68.     ]
    69. });

    实例：组件列-

    代码：

    实例：组件列-

    代码：

    实例：组件列-

    代码：

    实例：组件列-

    代码：

    实例：配置单元格/行

    实例：配置单元格可以编辑

    image

    单元格编辑需要使用插件才可以完成
    添加插件：Ext.grid.plugin.CellEditing

    1. plugins: 'cellediting',         //添加单元格编辑插件
    2.  
    3. //还可以自己定义Ext.grid.plugin.CellEditing类型的实例
    4. plugins:[
    5. 	Ext.create ("Ext.grid.plugin.CellEditing", {
    6. 		clicksToEdit:1		//设置为点一下就进入编辑
    7.     }
    8. ]

    然后在列上进行配置 editor 配置项

    1. editor: {               //可编辑配置
    2.     allowBlank: false,  //不允许为空
    3.     type: 'string'      //设置数据类型
    4. }

    可以配置各种Form Filed类型，但除HtmEditor外。

    1. editor: new Ext.form.field.ComboBox({  //配置可编辑
    2.     typeAhead: true,
    3.     triggerAction: 'all',
    4.     store: [
    5.         ['Bath','Bath'],
    6.         ['Kitchen','Kitchen'],
    7.         ['Electronic','Electronic'],
    8.         ['Food', 'Food'],
    9.         ['Computer', 'Computer']
    10.     ]
    11. })

    代码实例：

    1. //定义商品model
    2. Ext.define('PandaApp.model.Product', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [
    5.         { name: 'id', type: 'int' },
    6.         { name: 'name', type: 'string'},
    7.         { name: 'price', type: 'number' }
    8.     ]
    9. });
    10.  
    11. //创建商品store实例
    12. var dataStore = Ext.create('Ext.data.Store', {
    13.     model: 'PandaApp.model.Product',
    14.     proxy: {
    15.         url: '/product.json',       //请求的URL
    16.         type: 'ajax',               //请求的类型
    17.         pageSize: 35,               //分页的每页数据条数
    18.         reader: {
    19.             type: 'json',           //读取器类型
    20.             rootProperty: 'data',   //后端数据根节点名称
    21.             totalProperty: 'total', //后端数据总条数对应节点名称
    22.         }
    23.     }
    24. });
    25.  
    26. //定义Grid
    27. Ext.define('PandaApp.com.ProductGrid', {
    28.     extend: 'Ext.grid.Panel',       //继承自Grid组件
    29.     title: '商品信息',               //标题
    30.     closable: true,                 //可关闭
    31.     draggable: true,                //可拖拽
    32.     plugins: 'cellediting',         //添加单元格编辑插件
    33.     renderTo: Ext.getBody(),        //渲染到body
    34.     width: 800,                     //设置宽度
    35.     height: 300,
    36.     store: dataStore,               //关联Store
    37.     dockedItems: [                  //添加停靠栏
    38.         {                
    39.             xtype: 'pagingtoolbar', //添加分页组件
    40.             store: dataStore,       //对应的Store
    41.             dock: 'bottom',         //停靠在底部
    42.             displayInfo: true       //显示提示信息
    43.         }
    44.     ],
    45.     columns: [                      //设置列
    46.         {
    47.             header: '商品编号',      //设置列标题
    48.             dataIndex: 'id',        //设置对应的Store数据列
    49.             flex: 0.5,              //设置列的想对宽度
    50.             hidden: true,           //设置列隐藏
    51.         },
    52.         {
    53.             header: '商品',
    54.             dataIndex: 'name',
    55.             flex: 1,
    56.             editor: {               //可编辑配置
    57.                 allowBlank: false,  //不允许为空
    58.                 type: 'string'      //设置数据类型
    59.             }
    60.         },
    61.         {
    62.             header: '商品类别',
    63.             dataIndex: 'productType',
    64.             flex: 1,
    65.             editor: new Ext.form.field.ComboBox({  //配置可编辑
    66.                 typeAhead: true,
    67.                 triggerAction: 'all',
    68.                 store: [
    69.                     ['Bath','Bath'],
    70.                     ['Kitchen','Kitchen'],
    71.                     ['Electronic','Electronic'],
    72.                     ['Food', 'Food'],
    73.                     ['Computer', 'Computer']
    74.                 ]
    75.             })
    76.         },
    77.         {
    78.             header: '价格',
    79.             dataIndex: 'price',
    80.             flex: 1,
    81.             renderer: function(value){   //自定义渲染
    82.                 return Ext.String.format("￥{0}",value);
    83.             }
    84.         }
    85.     ]
    86. });
    87.  
    88. //创建Grid实例
    89. Ext.create('PandaApp.com.ProductGrid');

    实例：配置行可编辑

    配置行可编辑需要使用Ext.grid.plugin.RowEditing插件

    plugins: ['rowediting'],  //添加行编辑插件

    在列上设置可编辑的类型即可

    1. editor: {               //可编辑配置
    2.     allowBlank: false,  //不允许为空
    3.     type: 'string'      //设置数据类型
    4. }

    image

    代码：

    1. //定义商品model
    2. Ext.define('PandaApp.model.Product', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [
    5.         { name: 'id', type: 'int' },
    6.         { name: 'name', type: 'string'},
    7.         { name: 'price', type: 'number' }
    8.     ]
    9. });
    10.  
    11. //创建商品store实例
    12. var dataStore = Ext.create('Ext.data.Store', {
    13.     model: 'PandaApp.model.Product',
    14.     proxy: {
    15.         url: '/product.json',       //请求的URL
    16.         type: 'ajax',               //请求的类型
    17.         pageSize: 35,               //分页的每页数据条数
    18.         reader: {
    19.             type: 'json',           //读取器类型
    20.             rootProperty: 'data',   //后端数据根节点名称
    21.             totalProperty: 'total', //后端数据总条数对应节点名称
    22.         }
    23.     }
    24. });
    25.  
    26. //定义Grid
    27. Ext.define('PandaApp.com.ProductGrid', {
    28.     extend: 'Ext.grid.Panel',       //继承自Grid组件
    29.     title: '商品信息',               //标题
    30.     closable: true,                 //可关闭
    31.     draggable: true,                //可拖拽
    32.     plugins: ['rowediting','cellediting'],  //添加行/单元格编辑插件
    33.     renderTo: Ext.getBody(),        //渲染到body
    34.     width: 800,                     //设置宽度
    35.     height: 300,
    36.     store: dataStore,               //关联Store
    37.     dockedItems: [                  //添加停靠栏
    38.         {                
    39.             xtype: 'pagingtoolbar', //添加分页组件
    40.             store: dataStore,       //对应的Store
    41.             dock: 'bottom',         //停靠在底部
    42.             displayInfo: true       //显示提示信息
    43.         }
    44.     ],
    45.     columns: [                      //设置列
    46.         {
    47.             header: '商品编号',      //设置列标题
    48.             dataIndex: 'id',        //设置对应的Store数据列
    49.             flex: 0.5,              //设置列的想对宽度
    50.             hidden: true,           //设置列隐藏
    51.         },
    52.         {
    53.             header: '商品',
    54.             dataIndex: 'name',
    55.             flex: 1,
    56.             editor: {               //可编辑配置
    57.                 allowBlank: false,  //不允许为空
    58.                 type: 'string'      //设置数据类型
    59.             }
    60.         },
    61.         {
    62.             header: '商品类别',
    63.             dataIndex: 'productType',
    64.             flex: 1,
    65.             editor: new Ext.form.field.ComboBox({  //配置可编辑
    66.                 typeAhead: true,
    67.                 triggerAction: 'all',
    68.                 store: [
    69.                     ['Bath','Bath'],
    70.                     ['Kitchen','Kitchen'],
    71.                     ['Electronic','Electronic'],
    72.                     ['Food', 'Food'],
    73.                     ['Computer', 'Computer']
    74.                 ]
    75.             })
    76.         },
    77.         {
    78.             header: '价格',
    79.             dataIndex: 'price',
    80.             flex: 1,
    81.             renderer: function(value){   //自定义渲染
    82.                 return Ext.String.format("￥{0}",value);
    83.             },
    84.             editor: {               //可编辑配置
    85.                 allowBlank: false,  //不允许为空
    86.                 type: 'string'      //设置数据类型
    87.             }
    88.         }
    89.     ]
    90. });
    91.  
    92. //创建Grid实例
    93. Ext.create('PandaApp.com.ProductGrid');

    实例：配置列分组

    使用Ext.grid.feature.Grouping特性实现

    image

    在Grid对应的Store中设置分组使用的字段

    groupField: 'name'              //指定分组使用的字段

    在Grid中添加特性

    1. features: [                         //添加特性
    2.     {
    3.         id: 'group',                //组Id
    4.         ftype: 'grouping',          //开启分组
    5.         groupHeaderTpl : '{name}',  //组标题模板
    6.         hideGroupedHeader: true,    //是否显示组名称
    7.         enableGroupingMenu: true,   //
    8. 		   startCollapsed: false       //开启的时候默认折叠
    9.     }
    10. ],

    代码：

    1. //定义商品model
    2. Ext.define('PandaApp.model.Product', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [
    5.         { name: 'id', type: 'int' },
    6.         { name: 'name', type: 'string'},
    7.         { name: 'price', type: 'number' }
    8.     ]
    9. });
    10.  
    11. //创建商品store实例
    12. var dataStore = Ext.create('Ext.data.Store', {
    13.     model: 'PandaApp.model.Product',
    14.     proxy: {
    15.         url: '/product.json',       //请求的URL
    16.         type: 'ajax',               //请求的类型
    17.         pageSize: 35,               //分页的每页数据条数
    18.         reader: {
    19.             type: 'json',           //读取器类型
    20.             rootProperty: 'data',   //后端数据根节点名称
    21.             totalProperty: 'total', //后端数据总条数对应节点名称
    22.         }
    23.     },
    24.     groupField: 'name'              //指定分组使用的字段
    25. });
    26.  
    27. //定义Grid
    28. Ext.define('PandaApp.com.ProductGrid', {
    29.     extend: 'Ext.grid.Panel',       //继承自Grid组件
    30.     title: '商品信息',               //标题
    31.     closable: true,                 //可关闭
    32.     draggable: true,                //可拖拽
    33.     plugins: ['rowediting','cellediting'],  //添加行/单元格编辑插件
    34.     renderTo: Ext.getBody(),        //渲染到body
    35.     width: 800,                     //设置宽度
    36.     height: 300,
    37.     store: dataStore,               //关联Store
    38.     dockedItems: [                  //添加停靠栏
    39.         {                
    40.             xtype: 'pagingtoolbar', //添加分页组件
    41.             store: dataStore,       //对应的Store
    42.             dock: 'bottom',         //停靠在底部
    43.             displayInfo: true       //显示提示信息
    44.         }
    45.     ],
    46.     features: [                         //开启分组
    47.         {
    48.             id: 'group',                //组Id
    49.             ftype: 'grouping',          //
    50.             groupHeaderTpl : '{name}',  //组标题模板
    51.             hideGroupedHeader: true,    //是否显示组名称
    52.             enableGroupingMenu: true    //
    53.         }
    54.     ],
    55.     columns: [                      //设置列
    56.         {
    57.             header: '商品编号',      //设置列标题
    58.             dataIndex: 'id',        //设置对应的Store数据列
    59.             flex: 0.5,              //设置列的想对宽度
    60.             hidden: true,           //设置列隐藏
    61.             groupable: true,        //是否可以用于分组
    62.         },
    63.         {
    64.             header: '商品',
    65.             dataIndex: 'name',
    66.             flex: 1,
    67.             groupable: true,        //是否可以用于分组
    68.         },
    69.         {
    70.             header: '商品类别',
    71.             dataIndex: 'productType',
    72.             flex: 1,
    73.             groupable: true,        //是否可以用于分组
    74.         },
    75.         {
    76.             header: '价格',
    77.             dataIndex: 'price',
    78.             flex: 1,
    79.             groupable: true,        //是否可以用于分组
    80.         }
    81.     ]
    82. });
    83.  
    84. //创建Grid实例
    85. Ext.create('PandaApp.com.ProductGrid');

    实例：配置分页

    实例：远程加载商品信息

    image

    后端JSON数据：

    {"data":[{"id":666,"name":"0panda","price":88.88},{"id":888,"name":"9dog","price":99.99},{"id":999,"name":"8monkey","price":77.77},{"id":123,"name":"1monkey","price":77.77},{"id":133,"name":"2monkey","price":77.77},{"id":135,"name":"3monkey","price":77.77},{"id":162,"name":"4monkey","price":77.77},{"id":173,"name":"5monkey","price":77.77},{"id":173,"name":"6monkey","price":77.77},{"id":185,"name":"7monkey","price":77.77}],"total":10}

    代码：

    1. //定义商品model
    2. Ext.define('PandaApp.model.Product', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [
    5.         { name: 'id', type: 'int' },
    6.         { name: 'name', type: 'string'},
    7.         { name: 'price', type: 'number' }
    8.     ]
    9. });
    10.  
    11. //创建商品store实例
    12. var dataStore = Ext.create('Ext.data.Store', {
    13.     model: 'PandaApp.model.Product',
    14.     proxy: {
    15.         url: '/product.json',       //请求的URL
    16.         type: 'ajax',               //请求的类型
    17.         pageSize: 35,               //分页的每页数据条数
    18.         reader: {
    19.             type: 'json',           //读取器类型
    20.             rootProperty: 'data',   //后端数据根节点名称
    21.             totalProperty: 'total', //后端数据总条数对应节点名称
    22.         }
    23.     }
    24. });
    25.  
    26. //定义Grid
    27. Ext.define('PandaApp.com.ProductGrid', {
    28.     extend: 'Ext.grid.Panel',       //继承自Grid组件
    29.     title: '商品信息',               //标题
    30.     closable: true,                 //可关闭
    31.     draggable: true,                //可拖拽
    32.     plugins: 'gridfilters',         //添加过滤插件
    33.     renderTo: Ext.getBody(),        //渲染到body
    34.     width: 800,                     //设置宽度
    35.     height: 300,
    36.     store: dataStore,               //关联Store
    37.     dockedItems: [                  //添加停靠栏
    38.         {                
    39.             xtype: 'pagingtoolbar', //添加分页组件
    40.             store: dataStore,       //对应的Store
    41.             dock: 'bottom',         //停靠在底部
    42.             displayInfo: true       //显示提示信息
    43.         }
    44.     ],
    45.     columns: [                      //设置列
    46.         {
    47.             header: '商品编号',      //设置列标题
    48.             dataIndex: 'id',        //设置对应的Store数据列
    49.             flex: 0.5,              //设置列的想对宽度
    50.             hidden: true,           //设置列隐藏
    51.         },
    52.         {
    53.             header: '商品',
    54.             dataIndex: 'name',
    55.             flex: 1,
    56.             filter:'string',        //开启过滤。设置过滤的类型
    57.         },
    58.         {
    59.             header: '商品',
    60.             dataIndex: 'name',
    61.             flex: 1,
    62.             filter: {               //设置列具体过滤配置
    63.                 type: 'string',     //过滤的类型为string
    64.                 itemDefaults: {     //具体的过滤配置项
    65.                     emptyText: '搜索内容'  //提示文本
    66.                 }
    67.             }
    68.         },
    69.         {
    70.             header: '价格',
    71.             dataIndex: 'price',
    72.             flex: 1,
    73.             renderer: function(value){   //自定义渲染
    74.                 return Ext.String.format("￥{0}",value);
    75.             }
    76.         }
    77.     ]
    78. });
    79.  
    80. //创建Grid实例
    81. Ext.create('PandaApp.com.ProductGrid');

    实例：使用分页工具条

    image

    1. //创建数据仓库
    2. var dataStore = Ext.create('Ext.data.Store', {
    3.     pageSize: 3,
    4.     flelds: [
    5.         "id","name","score"
    6.     ],
    7.     data: [
    8.         {
    9.             id: 666, 
    10.             name: 'panda',
    11.             score: 99
    12.         },
    13.         {
    14.             id: 222, 
    15.             name: 'dog',
    16.             score: 86
    17.         },
    18.         {
    19.             id: 111, 
    20.             name: 'cat',
    21.             score: 76
    22.         },
    23.         {
    24.             id: 111, 
    25.             name: 'cat',
    26.             score: 76
    27.         },
    28.     ]
    29. });
    30.  
    31. //创建Gird
    32. Ext.create('Ext.grid.Panel', {
    33.     id: 'girdId666',
    34.     renderTo: Ext.getBody(),
    35.     width: 600,
    36.     closable: true,
    37.     store: dataStore,
    38.     resizable: true,
    39.     dockedItems: [
    40.         {
    41.             xtype: 'pagingtoolbar',
    42.             store: dataStore,
    43.             dock: 'bottom',
    44.             displayInfo: true
    45.         }
    46.     ],
    47.     columns: [
    48.         {
    49.             header: '编号',
    50.             dataIndex: 'id',
    51.             sortable: true,
    52.             flex: 0.5
    53.         },
    54.         {
    55.             header: '姓名',
    56.             dataIndex: 'name',
    57.             sortable: true,
    58.             flex: 1
    59.         },
    60.         {
    61.             header: '分数',
    62.             dataIndex: 'score',
    63.             sortable: true,
    64.             flex: 1,
    65.         }
    66.     ]
    67. });

    实例：动态加载后端数据 + 使用分页工具条

    image

    1. //创建数据模型
    2. Ext.define('Employee',{
    3.     extend: 'Ext.data.Model',
    4.     idProperty: 'id',
    5.     fields: [
    6.         { name: 'id', type: 'int' },
    7.         { name: 'fullName', type: 'string' },
    8.         { name: 'age', type: 'int' },
    9.         { name: 'joinDateTime', type: 'date', format: 'Y-m-d' },
    10.         { name: 'city', type: 'string'}
    11.     ]
    12. });
    13.  
    14. //创建数据仓库
    15. var baseURL = 'http://127.0.0.1:81/test.json'
    16. var dataStore = Ext.create('Ext.data.Store', {
    17.     model: 'Employee',  //设置对应的模型
    18.     pageSize: 9,       //每页显示的数据条数
    19.     proxy: {            //设置代理
    20.         type: 'ajax',   //设置代理的类型
    21.         api: {
    22.             create: baseURL,
    23.             read: baseURL,
    24.             destory: baseURL,
    25.             update: baseURL,
    26.         },
    27.         reader: {                   //设置读取器
    28.             type: 'json',           //读取器的类型
    29.             metaProperty: 'meta',   //设置JSON辅助数据节点
    30.             rootProperty: 'data',   //设置JSON根节点
    31.             idProperty: 'id',       //设置数据的Id键
    32.             totalProperty: 'meta.total',    //设置JSON数据的总条数对应字段
    33.             successProperty: 'meta.success' //设置JSON数据成功的对应字段
    34.         },
    35.         writer: {           //设置写入器
    36.             type: 'json',   //设置写入器的类型
    37.             encode: true,   //设置是否编码
    38.             writeAllFields: true,   //写入记录的所有字段
    39.             rootProperty: 'data',   //设置JSON数据的根节点
    40.             allowSingle: true,      //允许
    41.         }
    42.     }
    43. });
    44. //加载数据
    45. dataStore.load();
    46.  
    47. //创建网格
    48. var grid = Ext.create('Ext.grid.Panel', {
    49.     title: '员工信息',     //设置Grid标题
    50.     id: 'employeeGrid1',  //设置组件Id
    51.     closable: true,       //设置可关闭
    52.     collapsible: true,     //设置可折叠
    53.     loadMask: true,       //加载时显示遮罩
    54.     draggable: true,      //设置可拖拽
    55.     resizable: true,      //设置允许设置大小
    56.     width: 700,           //设置宽度
    57.     store: dataStore,     //设置关联的数据仓库
    58.     dockedItems: [
    59.         {
    60.             xtype: 'pagingtoolbar',
    61.             store: dataStore,
    62.             dock: 'bottom',
    63.             displayInfo: true
    64.         }
    65.     ],
    66.     renderTo: Ext.getBody(),
    67.     columns: [            //设置标题行
    68.         {
    69.             header: '编号',
    70.             dataIndex: 'id',
    71.             sortable: true,
    72.             flex: 0.5
    73.         },
    74.         {
    75.             header: '姓名',
    76.             dataIndex: 'fullName',
    77.             sortable: true,
    78.             flex: 1
    79.         },
    80.         {
    81.             header: '年龄',
    82.             dataIndex: 'age',
    83.             sortable: true,
    84.             flex: 0.5
    85.         },
    86.         {
    87.             header: '加入公司的日期',
    88.             dataIndex: 'joinDateTime',
    89.             sortable: true,
    90.             flex: 1
    91.         },
    92.         {
    93.             header: '所在城市',
    94.             dataIndex: 'city',
    95.             sortable: true,
    96.             flex: 0.8
    97.         }
    98.     ]
    99. });

    实例：整体配置

    实例：配置顶部工具栏

    使用tbar配置项即可。

    image

    1. {
    2.     xtype: 'gridpanel', //grid面板
    3.     title: 'PandaTest',
    4.     width: 600,
    5.     height: 300,
    6.     forceFit: true,     //自动拉伸填充空白
    7.     frame: true,        //带边框
    8.  
    9.     tbar: [     //配置工具栏
    10.         { xtype: 'button', text: '增加', },
    11.         { xtype: 'button', text: '减少', },
    12.         { xtype: 'button', text: '修改', },
    13.     ],
    14.  
    15.     columns: [ //定义列
    16.         { text: '姓名', dataIndex: 'name', },
    17.         { text: '性别', dataIndex: 'sex', },
    18.         { text: '年龄', dataIndex: 'age', },
    19.     ],
    20.     store: {        //定义数据仓库
    21.         data: [     //直接内联数据做测试使用
    22.             {name: 'Panda', sex: '男', age: 666 },
    23.         ],
    24.     }
    25. }

    实例：配置选择模式

    选择模式决定了鼠标选中的模式，默认情况下，Grid使用行模式。

    image

    使用selModel配置项

    1. //使用字符串形式
    2. selModel: 'rowmodel',           //选择模式
    3. selModel: 'cellmodel',           //选择模式
    4. selModel: 'checkboxmodel',       //选择模式
    5.  
    6. //使用对象形式
    7. selModel:{
    8.     selType: 'rowmodel',  //选择模式
    9.     mode: 'SINGLE'
    10. },
    11.  
    12. //使用选择模式的具体类型实例
    13. selModel: SomeSelectModelInstance

    image

    后端测试使用的JSON

    {"data":[{"id":666,"name":"0panda","price":88.88},{"id":888,"name":"9dog","price":99.99},{"id":999,"name":"8monkey","price":77.77},{"id":123,"name":"1monkey","price":77.77},{"id":133,"name":"2monkey","price":77.77},{"id":135,"name":"3monkey","price":77.77},{"id":162,"name":"4monkey","price":77.77},{"id":173,"name":"5monkey","price":77.77},{"id":173,"name":"6monkey","price":77.77},{"id":185,"name":"7monkey","price":77.77}],"total":10}

    代码：

    1. //定义商品model
    2. Ext.define('PandaApp.model.Product', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [
    5.         { name: 'id', type: 'int' },
    6.         { name: 'name', type: 'string'},
    7.         { name: 'price', type: 'number' }
    8.     ]
    9. });
    10.  
    11. //创建商品store实例
    12. var dataStore = Ext.create('Ext.data.Store', {
    13.     model: 'PandaApp.model.Product',
    14.     proxy: {
    15.         url: '/resources/product.json',       //请求的URL
    16.         type: 'ajax',               //请求的类型
    17.         pageSize: 35,               //分页的每页数据条数
    18.         reader: {
    19.             type: 'json',           //读取器类型
    20.             rootProperty: 'data',   //后端数据根节点名称
    21.             totalProperty: 'total', //后端数据总条数对应节点名称
    22.         }
    23.     }
    24. });
    25.  
    26. //定义Grid
    27. Ext.define('PandaApp.com.ProductGrid', {
    28.     extend: 'Ext.grid.Panel',       //继承自Grid组件
    29.     title: '商品信息',               //标题
    30.     closable: true,                 //可关闭
    31.     draggable: true,                //可拖拽
    32.     plugins: 'gridfilters',         //添加过滤插件
    33.     renderTo: Ext.getBody(),        //渲染到body
    34.     width: 800,                     //设置宽度
    35.     height: 300,
    36.     store: dataStore,               //关联Store
    37.     selModel: 'checkboxmodel',       //选择模式~~~~~~~~~~
    38.     dockedItems: [                  //添加停靠栏
    39.         {
    40.             xtype: 'pagingtoolbar', //添加分页组件
    41.             store: dataStore,       //对应的Store
    42.             dock: 'bottom',         //停靠在底部
    43.             displayInfo: true       //显示提示信息
    44.         }
    45.     ],
    46.     columns: [                      //设置列
    47.         {
    48.             header: '商品编号',      //设置列标题
    49.             dataIndex: 'id',        //设置对应的Store数据列
    50.             flex: 0.5,              //设置列的想对宽度
    51.             hidden: true,           //设置列隐藏
    52.         },
    53.         {
    54.             header: '商品',
    55.             dataIndex: 'name',
    56.             flex: 1,
    57.             filter:'string',        //开启过滤。设置过滤的类型
    58.         },
    59.         {
    60.             header: '商品',
    61.             dataIndex: 'name',
    62.             flex: 1,
    63.             filter: {               //设置列具体过滤配置
    64.                 type: 'string',     //过滤的类型为string
    65.                 itemDefaults: {     //具体的过滤配置项
    66.                     emptyText: '搜索内容'  //提示文本
    67.                 }
    68.             }
    69.         },
    70.         {
    71.             header: '价格',
    72.             dataIndex: 'price',
    73.             flex: 1,
    74.             renderer: function(value){   //自定义渲染
    75.                 return Ext.String.format("￥{0}",value);
    76.             }
    77.         }
    78.     ]
    79. });
    80.  
    81. //创建Grid实例
    82. Ext.create('PandaApp.com.ProductGrid');

    实例：配置允许多选/单选

    selModel配置项的值可以是字符串也可以是Ext.selection.Model类型的子类的实例。

    通过设置Ext.selection.Model类型的Model配置项即可设置多选/单选。

    image

    后端测试使用的JSON

    {"data":[{"id":666,"name":"0panda","price":88.88},{"id":888,"name":"9dog","price":99.99},{"id":999,"name":"8monkey","price":77.77},{"id":123,"name":"1monkey","price":77.77},{"id":133,"name":"2monkey","price":77.77},{"id":135,"name":"3monkey","price":77.77},{"id":162,"name":"4monkey","price":77.77},{"id":173,"name":"5monkey","price":77.77},{"id":173,"name":"6monkey","price":77.77},{"id":185,"name":"7monkey","price":77.77}],"total":10}

    代码：

    1. //定义商品model
    2. Ext.define('PandaApp.model.Product', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [
    5.         { name: 'id', type: 'int' },
    6.         { name: 'name', type: 'string'},
    7.         { name: 'price', type: 'number' }
    8.     ]
    9. });
    10.  
    11. //创建商品store实例
    12. var dataStore = Ext.create('Ext.data.Store', {
    13.     model: 'PandaApp.model.Product',
    14.     proxy: {
    15.         url: '/resources/product.json',       //请求的URL
    16.         type: 'ajax',               //请求的类型
    17.         pageSize: 35,               //分页的每页数据条数
    18.         reader: {
    19.             type: 'json',           //读取器类型
    20.             rootProperty: 'data',   //后端数据根节点名称
    21.             totalProperty: 'total', //后端数据总条数对应节点名称
    22.         }
    23.     }
    24. });
    25.  
    26. //创建选择模式
    27. //复选框选择模式
    28. var selectType = Ext.create('Ext.selection.CheckboxModel', {
    29.     mode: 'SINGLE',                         //设置为单选
    30. });
    31.  
    32. //定义Grid
    33. Ext.define('PandaApp.com.ProductGrid', {
    34.     extend: 'Ext.grid.Panel',       //继承自Grid组件
    35.     title: '商品信息',               //标题
    36.     closable: true,                 //可关闭
    37.     draggable: true,                //可拖拽
    38.     plugins: 'gridfilters',         //添加过滤插件
    39.     renderTo: Ext.getBody(),        //渲染到body
    40.     width: 800,                     //设置宽度
    41.     height: 300,
    42.     store: dataStore,               //关联Store
    43.     selModel: selectType,           //设置选择模式.使用自己创建的选择模式
    44.     dockedItems: [                  //添加停靠栏
    45.         {
    46.             xtype: 'pagingtoolbar', //添加分页组件
    47.             store: dataStore,       //对应的Store
    48.             dock: 'bottom',         //停靠在底部
    49.             displayInfo: true       //显示提示信息
    50.         }
    51.     ],
    52.     columns: [                      //设置列
    53.         {
    54.             header: '商品编号',      //设置列标题
    55.             dataIndex: 'id',        //设置对应的Store数据列
    56.             flex: 0.5,              //设置列的想对宽度
    57.             hidden: true,           //设置列隐藏
    58.         },
    59.         {
    60.             header: '商品',
    61.             dataIndex: 'name',
    62.             flex: 1,
    63.             filter:'string',        //开启过滤。设置过滤的类型
    64.         },
    65.         {
    66.             header: '商品',
    67.             dataIndex: 'name',
    68.             flex: 1,
    69.             filter: {               //设置列具体过滤配置
    70.                 type: 'string',     //过滤的类型为string
    71.                 itemDefaults: {     //具体的过滤配置项
    72.                     emptyText: '搜索内容'  //提示文本
    73.                 }
    74.             }
    75.         },
    76.         {
    77.             header: '价格',
    78.             dataIndex: 'price',
    79.             flex: 1,
    80.             renderer: function(value){   //自定义渲染
    81.                 return Ext.String.format("￥{0}",value);
    82.             }
    83.         }
    84.     ]
    85. });
    86.  
    87. //创建Grid实例
    88. Ext.create('PandaApp.com.ProductGrid');

    实例：整体实例

    实例：静态数据，显示学生成绩

    image

    使用stripeRows属性设置表格条纹
    使用enableColumnMove属性设置列可改变位置
    使用enableColumnResize属性设置列可改变大小

    1. // 定义Model
    2. Ext.define('StudentDataModel', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [   //定义字段
    5.         {name: 'name', mapping : 'name'},
    6.         {name: 'age', mapping : 'age'},
    7.         {name: 'marks', mapping : 'marks'}
    8.     ]
    9. });
    10.  
    11. // 定义数据
    12. var myData = [
    13.     { name : "Asha", age : "16", marks : "90" },
    14.     { name : "Vinit", age : "18", marks : "95" },
    15.     { name : "Anand", age : "20", marks : "76" },
    16.     { name : "Niharika", age : "21", marks : "86" },
    17.     { name : "Manali", age : "22", marks : "57" }
    18. ];
    19.  
    20. // 创建数据仓库
    21. var gridStore = Ext.create('Ext.data.Store', {
    22.     model: 'StudentDataModel',   //指定Model
    23.     data: myData                 //指定内联数据
    24. });
    25.  
    26. // 创建Gird
    27. Ext.create('Ext.grid.Panel', {
    28.     id: 'gridId',           //定义组件Id
    29.     store: gridStore,       //指定数据仓库
    30.     stripeRows: true,       //定义条纹
    31.     closable: true,         //可关闭
    32.     draggable: true,        //可拖拽
    33.     collapsible: true,      //定义可折叠
    34.     title: '学生成绩',       //Grid的面板标题
    35.     width: 600,             //定义宽带
    36.     renderTo: Ext.getBody(),//渲染到body
    37.     enableColumnMove: true, //开启列可移动
    38.     enableColumnResize:true,//开启列可调整大小
    39.     columns: [              //定义列Header行
    40.         {
    41.             header: "学生姓名",  //定义列标题
    42.             dataIndex: 'name',  //定义列对应的数据列名
    43.             id : 'name',        //设置列Id
    44.             flex:  0.5,         //定义列的宽度比例
    45.             sortable: true,     //设置为可排序
    46.             hideable: true      //设置为可隐藏
    47.         },
    48.         {
    49.             header: "年龄",
    50.             dataIndex: 'age',
    51.             flex: .5,
    52.             sortable: true,
    53.             hideable: false
    54.         },
    55.         {
    56.             header: "分数",
    57.             dataIndex: 'marks',
    58.             flex: .5,
    59.             sortable: true
    60.         },
    61.         {
    62.             header: "是否优秀",
    63.             dataIndex: 'marks',
    64.             flex: .5,
    65.             sortable: true,
    66.             //设置显示条件
    67.             //设置分数对应等级
    68.             //显示为优秀、良好、普通
    69.             renderer :  function (value, metadata, record, rowIndex, colIndex, store) {
    70.                 if (value > 85) {
    71.                     return '优秀';
    72.                 } else if(value > 75){
    73.                     return '良好';
    74.                 } else {
    75.                     return '普通';
    76.                 }
    77.             }
    78.         }
    79.     ]
    80. });

    实例：静态数据，显示工号和姓名

    image

    使用singleSelect属性设置为单选模式
    使用multiSelect属性设置为多选模式

    1. //具体的数据
    2. var testData = [
    3.     ['666','Panda'],
    4.     ['222','Dog'],
    5.     ['888','Donkey'],
    6.     ['999','Cat']
    7. ];
    8.  
    9. //创建数据仓库
    10. var dataStore = Ext.create('Ext.data.ArrayStore',{
    11.     data: testData,
    12.     fields: [
    13.         'code',
    14.         'fullName'
    15.     ]
    16. });
    17.  
    18. //创建面板
    19. var grid = Ext.create('Ext.grid.Panel',{
    20.     title: '员工信息',       //设置标题
    21.     closable: true,         //设置可关闭
    22.     draggable: true,        //设置可拖拽
    23.     collapsible: true,      //设置可折叠
    24.     autoHeight: true,       //设置自动调整高度
    25.     store: dataStore,       //设置数据仓库
    26.     selType: 'rowmodel',    //设置选中类型
    27.     singleSelect: true,     //设置选中模式，仅允许单选一行
    28.     renderTo: Ext.getBody(), //设置渲染到body
    29.     width: 400,              //设置宽度
    30.     columns: [
    31.         {
    32.             header: '工号',
    33.             dataIndex: 'code',
    34.             sortable: true,
    35.             flex: 1
    36.         },
    37.         {
    38.             header: '姓名',
    39.             dataIndex: 'fullName',
    40.             sortable: true,
    41.             flex: 2
    42.         }
    43.     ]
    44. });

    实例：动态加载后端数据

    image

    后端数据的格式：

    1. {
    2.     "data": [{
    3.         "id": 666,
    4.         "fullName": "Panda",
    5.         "age": 666,
    6.         "joinDateTime": "2020-10-17",
    7.         "city": "ShangHai"
    8.     }, {
    9.         "id": 222,
    10.         "fullName": "Dog",
    11.         "age": 888,
    12.         "joinDateTime": "1997-10-17",
    13.         "city": "GuangZhou"
    14.     }],
    15.     "meta": {
    16.         "success": true,
    17.         "total": 2
    18.     }
    19. }

    前端代码：

    1. //创建数据模型
    2. Ext.define('Employee',{
    3.     extend: 'Ext.data.Model',
    4.     idProperty: 'id',
    5.     fields: [
    6.         { name: 'id', type: 'int' },
    7.         { name: 'fullName', type: 'string' },
    8.         { name: 'age', type: 'int' },
    9.         { name: 'joinDateTime', type: 'date', format: 'Y-m-d' },
    10.         { name: 'city', type: 'string'}
    11.     ]
    12. });
    13.  
    14. //创建数据仓库
    15. var baseURL = 'http://127.0.0.1:81/test.json'
    16. var dataStore = Ext.create('Ext.data.Store', {
    17.     model: 'Employee',  //设置对应的模型
    18.     pageSize: 50,       //每页显示的数据条数
    19.     proxy: {            //设置代理
    20.         type: 'ajax',   //设置代理的类型
    21.         api: {
    22.             create: baseURL,
    23.             read: baseURL,
    24.             destory: baseURL,
    25.             update: baseURL,
    26.         },
    27.         reader: {                   //设置读取器
    28.             type: 'json',           //读取器的类型
    29.             metaProperty: 'meta',   //设置JSON辅助数据节点
    30.             rootProperty: 'data',   //设置JSON根节点
    31.             idProperty: 'id',       //设置数据的Id键
    32.             totalProperty: 'meta.total',    //设置JSON数据的总条数对应字段
    33.             successProperty: 'meta.success' //设置JSON数据成功的对应字段
    34.         },
    35.         writer: {           //设置写入器
    36.             type: 'json',   //设置写入器的类型
    37.             encode: true,   //设置是否编码
    38.             writeAllFields: true,   //写入记录的所有字段
    39.             rootProperty: 'data',   //设置JSON数据的根节点
    40.             allowSingle: true,      //允许
    41.         }
    42.     }
    43. });
    44. //加载数据
    45. dataStore.load();
    46.  
    47. //创建网格
    48. var grid = Ext.create('Ext.grid.Panel', {
    49.     title: '员工信息',     //设置Grid标题
    50.     id: 'employeeGrid1',  //设置组件Id
    51.     closable: true,       //设置可关闭
    52.     collapsible: true,     //设置可折叠
    53.     loadMask: true,       //加载时显示遮罩
    54.     draggable: true,      //设置可拖拽
    55.     resizable: true,      //设置允许设置大小
    56.     width: 700,           //设置宽度
    57.     store: dataStore,     //设置关联的数据仓库
    58.     renderTo: Ext.getBody(),
    59.     columns: [            //设置标题行
    60.         {
    61.             header: '编号',
    62.             dataIndex: 'id',
    63.             sortable: true,
    64.             flex: 0.5
    65.         },
    66.         {
    67.             header: '姓名',
    68.             dataIndex: 'fullName',
    69.             sortable: true,
    70.             flex: 1
    71.         },
    72.         {
    73.             header: '年龄',
    74.             dataIndex: 'age',
    75.             sortable: true,
    76.             flex: 0.5
    77.         },
    78.         {
    79.             header: '加入公司的日期',
    80.             dataIndex: 'joinDateTime',
    81.             sortable: true,
    82.             flex: 1
    83.         },
    84.         {
    85.             header: '所在城市',
    86.             dataIndex: 'city',
    87.             sortable: true,
    88.             flex: 0.8
    89.         }
    90.     ]
    91. });

    实例：将Grid放入到容器中

    1. //创建Store
    2. var dataStore = Ext.create('Ext.data.Store', { 
    3.     fields: [
    4.         { name: 'id', type: 'int' },
    5.         { name: 'fullName', type: 'string'}
    6.     ],
    7.     data: [
    8.         {
    9.             id: 666,
    10.             fullName: 'Panda'
    11.         },
    12.         {
    13.             id: 888,
    14.             fullName: 'dog'
    15.         }
    16.     ]
    17. });
    18.  
    19. //创建Gird
    20. var grid = Ext.create('Ext.grid.Panel', {
    21.     store: dataStore,
    22.     columns: [
    23.         {
    24.             header: '编号',
    25.             dataIndex: 'id',
    26.             sortable: true,
    27.             flex: 1
    28.         },
    29.         {
    30.             header: '姓名',
    31.             dataIndex: 'fullName',
    32.             flex: 1
    33.         }
    34.     ]
    35. });
    36.  
    37. //创建Window容器
    38. var window = Ext.create('Ext.Window', {
    39.     width: 500,
    40.     heigth: 300,
    41.     shadow: true,
    42.     title: 'Window容器',
    43.     items: [
    44.         grid
    45.     ]
    46. });
    47.  
    48. //Windows显示
    49. window.show();

    实例：事件监听

    实例：监听多个事件

    image

    代码：

    1. // 创建数据仓库
    2. var gridStore = Ext.create('Ext.data.Store', {
    3.     fields: [   //定义字段
    4.         {name: 'name', mapping : 'name'},
    5.         {name: 'age', mapping : 'age'},
    6.         {name: 'marks', mapping : 'marks'}
    7.     ],
    8.     data: [                     //指定内联数据
    9.         { name : "Asha", age : "16", marks : "90" },
    10.         { name : "Vinit", age : "18", marks : "95" },
    11.         { name : "Anand", age : "20", marks : "76" },
    12.         { name : "Niharika", age : "21", marks : "86" },
    13.         { name : "Manali", age : "22", marks : "57" }
    14.     ]
    15. });
    16.  
    17. // 创建Gird
    18. Ext.create('Ext.grid.Panel', {
    19.     id: 'gridId',           //定义组件Id
    20.     store: gridStore,       //指定数据仓库
    21.     stripeRows: true,       //定义条纹
    22.     closable: true,         //可关闭
    23.     draggable: true,        //可拖拽
    24.     collapsible: true,      //定义可折叠
    25.     title: '学生成绩',       //Grid的面板标题
    26.     width: 600,             //定义宽带
    27.     renderTo: Ext.getBody(),//渲染到body
    28.     enableColumnMove: true, //开启列可移动
    29.     enableColumnResize:true,//开启列可调整大小
    30.     columns: [              //定义列Header行
    31.         {
    32.             header: "学生姓名",  //定义列标题
    33.             dataIndex: 'name',  //定义列对应的数据列名
    34.             id : 'name',        //设置列Id
    35.             flex:  0.5,         //定义列的宽度比例
    36.             sortable: true,     //设置为可排序
    37.             hideable: true      //设置为可隐藏
    38.         },
    39.         {
    40.             header: "年龄",
    41.             dataIndex: 'age',
    42.             flex: .5,
    43.             sortable: true,
    44.             hideable: false
    45.         },
    46.         {
    47.             header: "分数",
    48.             dataIndex: 'marks',
    49.             flex: .5,
    50.             sortable: true
    51.         }
    52.     ],
    53.     listeners: {        //定义事件监听
    54.         render: {       //监听渲染事件
    55.             fn:function(grid, eOpts){
    56.                 console.log('Grid has render');
    57.             }
    58.         },
    59.         select: {       //监听选择事件
    60.             fn:function(grid, record, index, eOpts){
    61.                 console.log('Select Event');
    62.                 console.log(record);
    63.                 console.log(index);
    64.             }
    65.         },
    66.         itemclick:{     //监听点击事件
    67.             fn:function(grid, record, item, index, event, Opts){
    68.                 console.log('item Click');
    69.                 console.log(record);
    70.                 console.log(item);
    71.                 console.log(index);
    72.                 console.log(event);
    73.             }
    74.         },
    75.         itemkeydown:{   //监听键盘按下事件
    76.             fn:function(grid, record, item, index, event, eOpts){
    77.                 //获得用户按下按钮
    78.                 var myKey = event.getKey();
    79.                 //判断按钮
    80.                 if ( myKey === event.DELETE ){
    81.                     myNewMsg = "Delete Record";
    82.                 } else if ( myKey == event.RETURN ){
    83.                     myNewMsg = "Edit customer #" + record.data.id + "";
    84.                 } else if (( myKey === event.N && event.shiftKey)|| myKey=== event.F8 ){
    85.                     myNewMsg = "Add new record";
    86.                 } else if (( myKey === event.D && event.shiftKey)){
    87.                     myNewMsg = "view detail of customer #" +
    88.                     record.data.id + "";
    89.                 } else if ( myKey ===event.F9 ){
    90.                     myNewMsg = "Other action...";
    91.                 } else {
    92.                     return;
    93.                 }
    94.                 console.log(myNewMsg);
    95.             }
    96.         }
    97.     }
    98. });

    实例：数据操作

    实例：获得已选择的数据，设置需要选择的数据

    image

    使用Grid组件的getSelection()方法和setSelection()方法即可。

    后端测试使用的JSON：

    {"data":[{"id":666,"name":"0panda","price":88.88},{"id":888,"name":"9dog","price":99.99},{"id":999,"name":"8monkey","price":77.77},{"id":123,"name":"1monkey","price":77.77},{"id":133,"name":"2monkey","price":77.77},{"id":135,"name":"3monkey","price":77.77},{"id":162,"name":"4monkey","price":77.77},{"id":173,"name":"5monkey","price":77.77},{"id":173,"name":"6monkey","price":77.77},{"id":185,"name":"7monkey","price":77.77}],"total":10}

    代码：

    1. //定义商品model
    2. Ext.define('PandaApp.model.Product', {
    3.     extend: 'Ext.data.Model',
    4.     fields: [
    5.         { name: 'id', type: 'int' },
    6.         { name: 'name', type: 'string'},
    7.         { name: 'price', type: 'number' }
    8.     ]
    9. });
    10.  
    11. //创建商品store实例
    12. var dataStore = Ext.create('Ext.data.Store', {
    13.     model: 'PandaApp.model.Product',
    14.     proxy: {
    15.         url: '/resources/product.json',       //请求的URL
    16.         type: 'ajax',               //请求的类型
    17.         pageSize: 35,               //分页的每页数据条数
    18.         reader: {
    19.             type: 'json',           //读取器类型
    20.             rootProperty: 'data',   //后端数据根节点名称
    21.             totalProperty: 'total', //后端数据总条数对应节点名称
    22.         }
    23.     }
    24. });
    25.  
    26. //定义Grid
    27. Ext.define('PandaApp.com.ProductGrid', {
    28.     extend: 'Ext.grid.Panel',       //继承自Grid组件
    29.     id: 'gridTest',                 //设置Id用于测试使用
    30.     title: '商品信息',               //标题
    31.     closable: true,                 //可关闭
    32.     draggable: true,                //可拖拽
    33.     plugins: 'gridfilters',         //添加过滤插件
    34.     renderTo: Ext.get('pandaTest'), //渲染到指定容器
    35.     width: 800,                     //设置宽度
    36.     height: 300,
    37.     store: dataStore,               //关联Store
    38.     selModel: 'checkboxmodel',      //设置选择模式
    39.     gridScope: this,
    40.     tbar: [         //重点在这里~~~~~~~~~~~~~~~~~
    41.         {
    42.             xtype: 'button',
    43.             text: '获得选择的数据',
    44.             handler: function () {
    45.                 //获得gird
    46.                 let grid = Ext.ComponentQuery.query('#gridTest')[0];
    47.  
    48.                 //获得选择的数据
    49.                 let selectedData = grid.getSelection();
    50.  
    51.                 //使用选择的数据
    52.                 console.log('Count: ' + selectedData.length)
    53.                 console.log(selectedData[0].get('name'));
    54.             }
    55.         },
    56.         {
    57.             xtype: 'button',
    58.             text: '设置所选择的数据',
    59.             handler: function () {
    60.                 //获得gird
    61.                 let grid = Ext.ComponentQuery.query('#gridTest')[0];
    62.  
    63.                 //获得需要选中的数据
    64.                 let needSelectedModel1 = dataStore.first();
    65.                 let needSelectedModel2 = dataStore.last();
    66.  
    67.                 //设置需要选中的数据
    68.                 grid.setSelection([needSelectedModel1,needSelectedModel2]);
    69.             }
    70.         }
    71.     ],
    72.     
    73.     dockedItems: [                  //添加停靠栏
    74.         {
    75.             xtype: 'pagingtoolbar', //添加分页组件
    76.             store: dataStore,       //对应的Store
    77.             dock: 'bottom',         //停靠在底部
    78.             displayInfo: true       //显示提示信息
    79.         }
    80.     ],
    81.     columns: [                      //设置列
    82.         {
    83.             header: '商品编号',      //设置列标题
    84.             dataIndex: 'id',        //设置对应的Store数据列
    85.             flex: 0.5,              //设置列的想对宽度
    86.             hidden: true,           //设置列隐藏
    87.         },
    88.         {
    89.             header: '商品',
    90.             dataIndex: 'name',
    91.             flex: 1,
    92.             filter:'string',        //开启过滤。设置过滤的类型
    93.         },
    94.         {
    95.             header: '商品',
    96.             dataIndex: 'name',
    97.             flex: 1,
    98.             filter: {               //设置列具体过滤配置
    99.                 type: 'string',     //过滤的类型为string
    100.                 itemDefaults: {     //具体的过滤配置项
    101.                     emptyText: '搜索内容'  //提示文本
    102.                 }
    103.             }
    104.         },
    105.         {
    106.             header: '价格',
    107.             dataIndex: 'price',
    108.             flex: 1,
    109.             renderer: function(value){   //自定义渲染
    110.                 return Ext.String.format("￥{0}",value);
    111.             }
    112.         }
    113.     ]
    114. });
    115.  
    116. //创建Grid实例
    117. Ext.create('PandaApp.com.ProductGrid');
  • 相关阅读:
    暖通锅炉远程监控解决方案
    Txt病毒
    MySQL主从复制（基于binlog日志方式）
    报错 | Cannot find module ‘@better-scroll/core/dist/types/BScroll‘
    Spring源码：Bean生命周期（四）
    Android so库中UnsatisfiedLinkError
    【MATLAB源码-第56期】基于WOA白鲸优化算法和PSO粒子群优化算法的三维路径规划对比。
    常用排序算法详解
    leetcode-数组中的第K个最大元素-215-最大堆
    MySQL中常用的数据类型
  • 原文地址：https://blog.csdn.net/weixin_38304160/article/details/126383591