Javascript 如何在ExtJs MVC中访问插件
我正在尝试使用“添加新记录”按钮将工具栏添加到网格中 Sencha提供的代码示例如下:Javascript 如何在ExtJs MVC中访问插件,javascript,extjs,Javascript,Extjs,我正在尝试使用“添加新记录”按钮将工具栏添加到网格中 Sencha提供的代码示例如下: var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', { clicksToMoveEditor: 1, autoCancel: false }); // create the grid and specify what field you want // to use for the edi
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
tbar: [{
text: 'Add Employee',
iconCls: 'employee-add',
handler : function() {
rowEditing.cancelEdit();
// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: 'new@sencha-test.com',
start: new Date(),
salary: 50000,
active: true
});
store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}],
//etc...
});
例如:
由于我使用的是MVC模式,因此在将其应用于代码时遇到了问题。这是我的代码:
Ext.define('RateManagement.view.Grids.AirShipmentGrid', {
extend: 'Ext.grid.Panel',
xtype: 'AirShipmentGrid',
plugins: [
{
clicksToMoveEditor: 1,
autoCancel: false,
ptype: 'rowediting'
},
'bufferedrenderer'
],
tbar: [{
text: 'Add Rate',
//iconCls: 'rate-add',
handler : function() {
rowEditing.cancelEdit(); // rowEditing is not defined...
// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: 'new@sencha-test.com',
start: new Date(),
salary: 50000,
active: true
});
store.insert(0, r);
rowEditing.startEdit(0, 0); // rowEditing is not defined...
}
}],
// etc...
});
如何访问“rowEditing”插件以调用它所需的方法?来自按钮的处理程序获取对按钮的引用作为第一个参数。您可以将该引用与componentquery一起使用,以获取对包含该引用的网格面板的引用。gridPanel有一个getPlugin方法,您可以使用该方法根据pluginId获取插件。唯一需要确保的是为插件提供一个pluginId,否则网格将无法找到它。这应该起作用:
Ext.define('RateManagement.view.Grids.AirShipmentGrid', {
extend: 'Ext.grid.Panel',
xtype: 'AirShipmentGrid',
plugins: [
{
clicksToMoveEditor: 1,
autoCancel: false,
ptype: 'rowediting',
pluginId: 'rowediting'
},
'bufferedrenderer'
],
tbar: [{
text: 'Add Rate',
//iconCls: 'rate-add',
handler : function(button) {
var grid = button.up('gridpanel');
var rowEditing = grid.getPlugin('rowediting');
rowEditing.cancelEdit(); // rowEditing is now defined... :)
// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: 'new@sencha-test.com',
start: new Date(),
salary: 50000,
active: true
});
store.insert(0, r);
rowEditing.startEdit(0, 0); // rowEditing is not defined...
}
}],
// etc...
});
干杯,罗伯
编辑:添加完整示例:
-去
-打开javascript控制台
-将下面的代码粘贴到其中
它将创建第二个网格,其中包含一个按钮,用于查找行编辑插件并取消编辑。双击一行开始编辑,单击tbar中的按钮取消编辑。工作起来很有魅力。确保指定了pluginId,否则网格的getPlugin方法找不到它
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*'
]);
Ext.onReady(function() {
// Define our data model
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
'name',
'email', {
name: 'start',
type: 'date',
dateFormat: 'n/j/Y'
}, {
name: 'salary',
type: 'float'
}, {
name: 'active',
type: 'bool'
}
]
});
// Generate mock employee data
var data = (function() {
var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
lastLen = lasts.length,
firstLen = firsts.length,
usedNames = {},
data = [],
s = new Date(2007, 0, 1),
eDate = Ext.Date,
now = new Date(),
getRandomInt = Ext.Number.randomInt,
generateName = function() {
var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
if (usedNames[name]) {
return generateName();
}
usedNames[name] = true;
return name;
};
while (s.getTime() < now.getTime()) {
var ecount = getRandomInt(0, 3);
for (var i = 0; i < ecount; i++) {
var name = generateName();
data.push({
start: eDate.add(eDate.clearTime(s, true), eDate.DAY, getRandomInt(0, 27)),
name: name,
email: name.toLowerCase().replace(' ', '.') + '@sencha-test.com',
active: getRandomInt(0, 1),
salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
});
}
s = eDate.add(s, eDate.MONTH, 1);
}
return data;
})();
// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Employee',
proxy: {
type: 'memory'
},
data: data,
sorters: [{
property: 'start',
direction: 'ASC'
}]
});
// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
}, {
header: 'Email',
dataIndex: 'email',
width: 160,
editor: {
allowBlank: false,
vtype: 'email'
}
}, {
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
width: 105,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
}, {
xtype: 'numbercolumn',
header: 'Salary',
dataIndex: 'salary',
format: '$0,0',
width: 90,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
}, {
xtype: 'checkcolumn',
header: 'Active?',
dataIndex: 'active',
width: 60,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
}],
renderTo: 'editor-grid',
width: 600,
height: 400,
title: 'Employee Salaries',
frame: true,
tbar: [{
text: 'Cancel editing Plugin',
handler: function(button) {
var myGrid = button.up('grid');
var myPlugin = myGrid.getPlugin('rowediting')
myPlugin.cancelEdit();
console.log(myPlugin);
}
}],
plugins: [{
clicksToMoveEditor: 1,
autoCancel: false,
ptype: 'rowediting',
pluginId: 'rowediting'
}]
});
});
Ext.require([
“Ext.grid.*”,
“Ext.data.*”,
“Ext.util.*”,
'Ext.state.'',
“Ext.form.*”
]);
Ext.onReady(函数(){
//定义我们的数据模型
Ext.define('Employee'{
扩展:“Ext.data.Model”,
字段:[
“姓名”,
“电子邮件”{
名称:“开始”,
键入:“日期”,
日期格式:“n/j/Y”
}, {
姓名:'工资',
类型:“浮动”
}, {
名称:'活动',
类型:“bool”
}
]
});
//生成模拟员工数据
变量数据=(函数(){
var持续时间=['Jones'、'Smith'、'Lee'、'Wilson'、'Black'、'Williams'、'Lewis'、'Johnson'、'Foot'、'Little'、'Vee'、'Train'、'Hot'、'Mutt'],
第一名=[“弗雷德”、“朱莉”、“比尔”、“泰德”、“杰克”、“约翰”、“马克”、“迈克”、“克里斯”、“鲍勃”、“特拉维斯”、“凯利”、“萨拉”],
lastLen=lasts.length,
firstLen=firsts.length,
usedNames={},
数据=[],
s=新日期(2007,0,1),
eDate=外部日期,
现在=新日期(),
getRandomInt=Ext.Number.randomInt,
generateName=函数(){
var name=firsts[getRandomInt(0,firstLen-1)]+“”+lasts[getRandomInt(0,lastLen-1)];
如果(使用名称[名称]){
返回generateName();
}
usedNames[name]=true;
返回名称;
};
而(s.getTime()