Ext.grid.Panel 中添加按钮

最新推荐文章于 2020-12-27 10:27:16 发布

whb054

最新推荐文章于 2020-12-27 10:27:16 发布

阅读量2.9k

点赞数 2

分类专栏： ExtJS基础类文章标签： grid添加按钮

本文链接：https://blog.csdn.net/whb054/article/details/82993711

版权

ExtJS基础类专栏收录该内容

7 篇文章 1 订阅

订阅专栏

代码：

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('<div id="{0}"></div>', 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'
    }
});

效果：