[英]Extjs load combobox from store
i want to load my Combobox in a Panel from Store. 我想从商店中将我的组合框加载到面板中。
var colors = new Object();
Ext.onReady(function(){
colors = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'app/view/main/loadFromDatabase.php',
reader: {
type: 'json',
rootProperty: 'name'
}
},
});
The colors i want load a little bit later in my Panel like this: 我想要稍后在面板中加载的颜色如下:
{ xtype: 'combo',
fieldLabel: 'Farbe',
name: 'farbe',
store: colors ,
queryMode: 'local',
displayField: 'name',
valueField: 'id' }
The response of my ajax request of loadFromDatabase.php is: 我的Ajax请求loadFromDatabase.php的响应是:
[ { "id": "1", "name": "Red" }, { "id": "2", "name": "Blue" }, { "id": "3", "name": "Green"}] [{“ id”:“ 1”,“ name”:“ Red”},{“ id”:“ 2”,“ name”:“ Blue”},{“ id”:“ 3”,“ name”: “绿色”}]
this seems like a valid json. 这似乎是有效的json。
But when i click on the combobox the box is empty. 但是,当我单击组合框时,该框为空。 Whats wrong?
怎么了?
Your json should look like the below 您的json应该如下所示
'items': [{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}]
Then you can specify your store as 然后,您可以将您的商店指定为
var myStore = Ext.create('Ext.data.Store', {
fields:['name','email','phone'],
proxy: {
type: 'ajax',
url: '/yourpath.json',
reader: {
type: 'json',
root: 'items'
}
},
autoLoad: true
});
So you have to make your json as key with array of objects and specify that key in the root
property in reader
config.There is also no rootProperty
property for a normal store.Remove that as well. 因此,您必须将json作为具有对象数组的键,并在
reader
配置的root
属性中指定该键。普通存储也没有rootProperty
属性,也请rootProperty
属性。
Hope this helps you. 希望这对您有所帮助。
i have found an other solution 我找到了其他解决方案
i don´t know if this solution is better then the other, but it works :) 我不知道这种解决方案是否比其他解决方案更好,但是它有效:)
var colorsFromDB = [];
var colors = Ext.create('Ext.data.Store', {
id: "colors",
fields: ['id', 'name'],
data : colorsFromDB
});
Ext.Ajax.request({
url: "app/view/main/loadFromDatabase.php",
method: 'POST',
success: function( r ) {
var res = Ext.decode(r.responseText);
if (res !== null) {
Ext.each(res.colors, function(obj) {
colorsFromDB.push({
id: obj.id,
name: obj.name
})
});
colors.loadData(colorsFromDB);
}
},
failure: function( r ) {
console.log(r.responseText);
}
});
Add these to your combo: 将这些添加到您的组合:
listeners : {
added : function(tis) {
tis.getStore().load();
}
}
and add these to your store: 并将它们添加到您的商店:
listeners : {
load : function() {
Ext.getCmp('yourcomboid').setValue(Ext.getCmp('yourcomboid').getValue());
}
}
at last, to avoid second loading, add the following to the combo: 最后,为避免再次加载,请将以下内容添加到组合中:
mode : 'local'
full code : 完整代码:
{
xtype : 'combo',
fieldLabel : 'Role Selection',
id : 'role',
hiddenName : 'role',
hiddenValue : 1,
editable : false,
emptyText : 'Please select a role',
typeAhead : true,
triggerAction : 'all',
lazyRender : true,
mode : 'local',
listeners : {
added : function(
tis) {
tis.getStore().load();
}
},
store : new Ext.data.JsonStore(
{
url : 'getRole',
listeners : {
load : function() {
Ext.getCmp('role').setValue(Ext.getCmp('role').getValue());
}
},
fields : ['id','name' ],
root : 'resultList',
}),
displayField : 'name',
valueField : 'id'
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.