发布GridPanel的一个扩展类ActionGridPanel，简化了Toolbar button

最新推荐文章于 2018-04-15 14:49:38 发布

柠乐_123

最新推荐文章于 2018-04-15 14:49:38 发布

阅读量115

点赞数

分类专栏： Extjs 文章标签： EXT 工作

Extjs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Ext JS中使用Ext.ux.ActionGridPanel扩展类来为GridPanel添加带有动作的Toolbar。通过配置actions数组可以轻松实现针对表格中选中行的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作中使用Ext的GridPanel经常需要加上Toolbar，加上多个按钮多grid中选中的行进行相应的动作。
Ext.ux.ActionGridPanel是Ext.grid.GridPanel的一个扩展类，定义了actions数组，每个元素代表了一个按钮。Ext.ux.ActionGridPanel会在按钮动作成功后，刷新当前页。
按钮属性定义如下
{
text: //button text
tooltip: // button tooltip
iconCls: // button iconCls
url: // button 动作的 url，将grid选定行的id随同该url发送到服务器
disabledIfLessThan: // 如果该值大于0，则初始化grid时disable该按钮。当grid选定行数目小于该值时，disable该按钮。
}


    var grid = new Ext.ux.ActionGridPanel({
        height: 300,
        width: 'auto',
        title: 'ActionGridPanel example',
        store: store,
        cm: cm,
        sm: sm,
        loadMask: true,
        trackMouseOver:false,
        renderTo: Ext.get('actiongridpanel-example'),
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:false
        },
        actions: [
        {
                text:'action 1',
                tooltip:'action 1',
                iconCls:'action',
                url:'example_action1.action',
                disabledIfLessThan: 1
        },
        {
                text:'action 2',
                tooltip:'action 2',
                iconCls:'action',
                url:'example_action2.action',
                disabledIfLessThan: 1
        }]
    });