Ext.grid.Panel 中添加按钮

最新推荐文章于 2022-07-09 11:01:47 发布

原创最新推荐文章于 2022-07-09 11:01:47 发布 · 3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#grid添加按钮

ExtJS基础类专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍如何使用ExtJS框架创建一个人员列表组件，包括定义组件、设置数据存储、配置列显示及按钮操作。通过代码示例展示了如何自定义渲染器以添加交互按钮，并实现了按钮的延迟加载和点击事件处理。

代码：

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'
    }
});

效果：