[英]Combobox not rendering in ExtJS Grid
I am using ExtJS 4.2. 我正在使用ExtJS 4.2。 I am using the below code to render a combobox in a ExtJS Grid. 我正在使用以下代码在ExtJS网格中呈现组合框。 This is my first attempt on a Combobox inside a Grid and my end target is a few levels beyond this. 这是我第一次尝试在网格内的组合框上进行操作,而最终目标是超出此范围的几个级别。 But I am stuck at the first step ie to add a combobox and display a Json result in the comboboxes of the Grid. 但是我坚持第一步,即添加一个组合框并在Grid的组合框中显示Json结果。 Below is my code: 下面是我的代码:
Ext.onReady(function() {
Ext.require([ 'Ext.data.*', 'Ext.grid.*' ]);
// ************************** Define Data Models ************************ //
Ext.define('SecureUser', {
extend : 'Ext.data.Model',
fields : [ 'id', 'username' ]
});
// ************************** Define Data Stores ************************ //
//The Store contains the AjaxProxy as an inline configuration
var userStore = Ext.create('Ext.data.Store', {
autoLoad : true,
model : 'SecureUser',
proxy : {
type : 'ajax',
api: {
read: 'secureUserSecureRole/listJSON',
},
reader : {
type : 'json',
successProperty: 'success',
root : 'secureUsers',
messageProperty: 'message'
},
writer : {
type : 'json',
encode: 'true',
root: 'secureUsers'
}
}
});
//renderer needed to display correct field when not editing combo (see API)
Ext.util.Format.comboRenderer = function(combo) {
return function(value) {
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField)
: combo.valueNotFoundText;
}
}
var combo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
mode: 'remote',
store: userStore,
valueField: 'username',
displayField: 'username'
});
// Grid-columns with meta-data from backend.
var recipeColumns = [ {
header : "ID",
width : 40,
sortable : true,
dataIndex : 'id'
},{
header : 'User Name',
width : 130,
dataIndex : 'username',
editor : combo,
renderer: Ext.util.Format.comboRenderer(combo)
}];
// create youbrew.recipe.Grid instance (@see recipeGrid.js)
var userGrid = Ext.create('Ext.grid.Panel', {
renderTo : document.body,
store: userStore,
width : 200,
height : 300,
clicksToEdit : 'auto',
columns : recipeColumns
});
});
My JSON object returned from backend is: {"sucess":true,"secureUsers":[{"username":"admin","id":1},{"username":"super","id":2},{"username":"user","id":3}]} 我从后端返回的JSON对象是:{“ sucess”:true,“ secureUsers”:[{“ username”:“ admin”,“ id”:1},{“ username”:“ super”,“ id”:2 },{ “用户名”: “用户”, “ID”:3}]}
The result is just a Grid with two headers ID and User Name and the records listed one by one. 结果只是一个带有两个标题ID和用户名的网格,并且记录被一一列出。 But, I don't see any comboboxes on the username(s) in each row. 但是,我没有在每一行的用户名上看到任何组合框。 Even when I click, they don't turn into comboboxes ( I read this is the behavior somewhere ). 即使单击,它们也不会变成组合框(我读到这是某处的行为)。 Also, I don't see any runtime errors on the debugger tool too. 另外,我在调试器工具上也看不到任何运行时错误。
Can you tell me where am I going wrong? 你能告诉我我哪里错了吗? Is it because I am using the same userStore for both Grid and the combo as well? 是因为我同时为Grid和组合使用了同一个userStore吗?
You need to add CellEditing
plugin to your grid config: 您需要将CellEditing
插件添加到网格配置中:
var userGrid = Ext.create('Ext.grid.Panel', {
renderTo : document.body,
store: userStore,
width : 200,
height : 300,
columns : recipeColumns,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]
});
(Spanish) A mi me funciono, de la siguiente forma: (西班牙文)A la me sicioente forma:
Ext.onReady(function() {
Ext.require([ 'Ext.data.*', 'Ext.grid.*' ]);
// ************************** Define Data Models ************************ //
Ext.define('SecureUser', {
extend : 'Ext.data.Model',
fields : [ 'id', 'username' ]
});
// ************************** Define Data Stores ************************ //
//The Store contains the AjaxProxy as an inline configuration
var userStore = Ext.create('Ext.data.Store', {
autoLoad : true,
model : 'SecureUser',
proxy : {
type : 'ajax',
api: {
read: 'secureUserSecureRole/listJSON',
},
reader : {
type : 'json',
successProperty: 'success',
root : 'secureUsers',
messageProperty: 'message'
},
writer : {
type : 'json',
encode: 'true',
root: 'secureUsers'
}
}
});
var combo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
mode: 'remote',
store: userStore,
valueField: 'username',
displayField: 'username'
});
var comboRenderer = function(value, p, record) {
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField) : value;
}
// Grid-columns with meta-data from backend.
var recipeColumns = [ {
header : "ID",
width : 40,
sortable : true,
dataIndex : 'id'
},{
header : 'User Name',
width : 130,
dataIndex : 'username',
editor : combo,
renderer: comboRenderer
}];
// create youbrew.recipe.Grid instance (@see recipeGrid.js)
var userGrid = Ext.create('Ext.grid.Panel', {
renderTo : document.body,
store: userStore,
width : 200,
height : 300,
clicksToEdit : 'auto',
columns : recipeColumns,
plugins: [Ext.create('Ext.grid.plugin.CellEditing')]
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.