从MVC演示项目指南开始,我添加了一个额外的动作列,我想知道如何在控制器文件中连接它?
指南: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");
},
谢谢
取决于你的动作应该做什么,你可以决定是否需要控制器。当你的动作与其他组件交互时,你应该使用controller——否则你可以在component (grid)中编写自己的方法
这里有一个简单的例子,grid with 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()
});
});
这是一个在控制器中有一个动作列和一个函数的例子:
观点:
{
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;
}
}