1

从 MVC 演示项目指南开始，我添加了一个额外的 actioncolumn，我想知道如何将它连接到控制器文件中？

指南：http ://www.sencha.com/learn/the-mvc-application-architecture/

Ext.define('app.view.admin.viewlist', {
extend: 'Ext.grid.Panel',
columnLines: true,
region: 'center',
menuDisabled: true,
layout: 'fit',
initComponent: function (cnfg) {
    this.columns = [
        {
            text: 'date',
            dataIndex: 'Series',
            sortableColumns: false,
            hideable: false,
            enableLocking: false,
            width: 100
        },{
            hidden : true,
            text:'Values',
            sortableColumns : false,
            hideable: false,
            columns:[{
                header: 'D1',
                hidden: true,
                dataIndex: 'D10EOD',
                sortableColumns : false,
                hideable: false
            },{
                xtype: 'actioncolumn',
                icon: '/static/img/icon/table_refresh.png',
                tooltip: 'Reset',
                align: 'center'

        }]
        }
    ];
    this.callParent(arguments);

}});

控制器初始化函数

init: function() {
    this.control({
        'volatilityedit actioncolumn img' : {   <--- ??
            click: this.reset
        }
    });
},
reset: function(grid, rowIndex, colIndex) {
    //var rec = grid.getStore().getAt(rowIndex);
    alert("Go");
},

谢谢

4

2 回答 2

1

这是一个在控制器中包含操作列和函数的示例：
查看：

{
xtype: 'actioncolumn',
id:'actionColumnGridCas',
flex: 1,
hideable: false,
items: ['->',{
        icon: '/images/user_edit.png',
        tooltip: 'edit',
        iconCls:'act-edit'
    },
    {
        icon: '/images/user_delete.png',
        tooltip: 'delete',
        iconCls:'act-delete'
    }]
}

控制器：

'.grid_alias actioncolumn[id=actionColumnGrid]': {
click: me.onActionColumnGridCasSelect
}

onActionColumnGridCasSelect: function(view, cell, rowIndex, colIndex, e) {
    var m = e.getTarget().className.match(/\bact-(\w+)\b/);
    if (m === null || m === undefined) {
        return;
    }
    var action = m[1];

    switch (action) {
        case 'edit':
            alert('edit');
            break;
        case 'delete':
            alert('delete');
            break;
    }
}
于 2013-06-07T20:40:35.907 回答
1

取决于您的操作应该做什么，您可以决定是否需要控制器。当您的操作与其他组件交互时，您应该使用控制器 - 否则您可以在组件（网格）中编写自己的方法

这里有一个带有 actioncolumn 的简单网格示例：

Ext.onReady(function () {
    Ext.create('Ext.data.Store', {
        storeId: 'employeeStore',
        fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
        data: [{
            firstname: "Michael",
            lastname: "Scott"
        }, {
            firstname: "Dwight",
            lastname: "Schrute"
        }, {
            firstname: "Jim",
            lastname: "Halpert"
        }, {
            firstname: "Kevin",
            lastname: "Malone"
        }, {
            firstname: "Angela",
            lastname: "Martin"
        }]
    });

    Ext.create('Ext.grid.Panel', {
        title: 'Action Column Demo',
        store: Ext.data.StoreManager.lookup('employeeStore'),
        columns: [{
            text: 'First Name',
            dataIndex: 'firstname'
        }, {
            text: 'Last Name',
            dataIndex: 'lastname'
        }, {
            xtype: 'actioncolumn',
            width: 50,
            items: [{
                icon: 'app/resources/images/cog_edit.png',
                // Use a URL in the icon config
                tooltip: 'Edit',
                handler: function (grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);
                    alert("Edit " + rec.get('firstname'));
                }
            }, {
                icon: 'app/resources/images/delete.png',
                tooltip: 'Delete',
                handler: function (grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);
                    alert("Terminate " + rec.get('firstname'));
                }
            }]
        }],
        width: 250,
        renderTo: Ext.getBody()
    });
});
于 2013-06-08T17:01:53.063 回答