Ext.grid.Panel 中添加按钮

代码:

Ext.define('myExt.view.main.List', {
    extend: 'Ext.grid.Panel',
    xtype: 'mainlist',
    id:'myjfkdj',
    requires: [
        'myExt.store.Personnel',
        // 'Ext.grid.cell.Widget'
    ],

    title: 'Personnel',

    store: {
        type: 'personnel'
    },

    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone', flex: 1 },
        { text: '按钮',
           renderer: function(val,meta,rec) {
              // 为元素生成唯一id
              var id = Ext.id();
              console.log(id);
              Ext.defer(function() {
                 Ext.widget('button', {
                    renderTo: id,
                    text: '删除',
                    scale: 'small',
                    handler: function() {
                       Ext.Msg.alert("Hello World")
                    }
                 });
              }, 50);
              return Ext.String.format('
', id); } }, { text: 'DELETE', align: 'center', stopSelection: true, xtype: 'widgetcolumn', widget: { xtype: 'button', _btnText: "删除", defaultBindProperty: null, //important handler: function(widgetColumn) { var record = widgetColumn.getWidgetRecord(); console.log(record); }, //在数据的渲染之前给按钮添加名字 listeners: { beforerender: function(widgetColumn){ var record = widgetColumn.getWidgetRecord(); widgetColumn.setText( widgetColumn._btnText ); } } } } ], listeners: { select: 'onItemSelected' } });

效果:

Ext.grid.Panel 中添加按钮_第1张图片

你可能感兴趣的:(ExtJS基础类)