[置顶] Extjs6.2 使用GridPanel

gridPanel添加列操作按钮

Ext.define('App.view.main.List', {
    extend: 'Ext.grid.Panel',
    ...

    columns: [
        { text: 'Name',  dataIndex: 'name', align:'center'},
        { text: 'Email', dataIndex: 'email', flex: 1, align:'center'},
        { text: 'Phone', dataIndex: 'phone', flex: 1, align:'center'},
/** 在当前行中添加操作事件 **/
        { xtype:'actioncolumn', text: '操作', width:150, align:'center',
          items: [{
              iconCls: 'x-fa fa-edit',
              tooltip: '编辑',
              handler: function(grid, rowIndex, colIndex) {
/** 获取此列dataIndex值为name的value **/
var name = grid.getStore().getAt(rowIndex).get('name');
                  console.log("Edit " + name );
              }
          },{
            iconCls:'x-fa fa-times',
              tooltip: '删除',
              handler: function(grid, rowIndex, colIndex) {
var name = grid.getStore().getAt(rowIndex).get('name');
                  console.log("Delete " + name);
              }
          }]
        }
    ]
});

gridPanel是否支持复制

Ext.define('App.view.main.List', {
    extend: 'Ext.grid.Panel',
    ...

/** enableTextSelection属性代表gridPanel是否支持复制, 默认为 false **/
    viewConfig:{  
        enableTextSelection:true  
    }
});

gridPanel添加tbar

Ext.define('App.view.main.List', {
    extend: 'Ext.grid.Panel',
...

    /** '->'表示居右 **/
    tbar: ['->',
        { xtype: 'button', text: 'Button 1' },
        { xtype: 'button', text: 'Button 2' },
        { xtype: 'button', text: 'Button 3' }
    ]
});

gridPanel添加bbar包含分页工具

Ext.define('App.view.main.List', {
    extend: 'Ext.grid.Panel',
...

    bbar: ['->',
        { xtype: 'pagingtoolbar',
          firstText: '首页',
          prevText: '上一页',
          refreshText: '刷新',
          nextText: '下一页',
          lastText: '尾页',
          beforePageText: '第',
          afterPageText : '页共 {0}页',
          emptyMsg: '查询结果为空',
          displayInfo: true
        }
    ]
});