extjs - Cómo cargar los valores en el cuadro combinado desde la base de datos

filter store extjs

Question

¿Cómo lleno los valores del cuadro combinado en lugar de la codificación de la base de datos en la tienda del cuadro combinado?

{
xtype: ''fieldset'',
title: ''Dress Types'',
items: [
{
xtype: ''combobox'',
displayField: "displayName",
valueField: "displayName",
emptyText: ''Select Type'',
store: {
fields: ["id", "displayName"],
data: [
{ "id": "1", "displayName": "Kurtha" },
{ "id": "2", "displayName": "Denim Top" },
{ "id": "3", "displayName": "Western T shirt" },
{ "id": "4", "displayName": "Sleeveless" }
]
},
name: ''dresses'',
margin: ''15px'',
allowBlank: false,
forceSelection: true,
}
]
}

Gracias por adelantado

Answer 1

Hay formas en que puedes obtener esto. Necesitas crear una tienda en tu js a partir de tus datos de entrada y luego asignarla al comboBox.

Dado ejemplo

var combstore = Ext.create(''Ext.data.Store'', {
autoLoad: true,
fields: [{
name: ''value'',
mapping: "ITEMID",
type: ''string''
}, {
name: ''name'',
mapping: "TITLE",
type: ''string''
}],
proxy: new Ext.data.HttpProxy({
type: ''ajax'',
actionMethods: {
read: "POST"
},
url: Your URL,
headers: {
''Accept'': ''application/json; charset=utf-8''
},
reader: {
type: ''json'',
rootProperty: ''data''
},
autoLoad: true
})
});

Ahora en tu comboBox puedes llamar a esta combstore de combstore a tu store . store :combstore

En la variable combostore estamos creando un almacén de datos usando Ext.data.Store y colocando valores en el campo. Luego, en el método de proxy llamar a url y mapear los valores del campo. Lea el documento para una mejor comprensión Doc.

Answer 2

Verifique el código a continuación.

 Ext.create(''Ext.form.ComboBox'', {
valueField: "displayName",
emptyText: ''Select Type'',
store: Ext.create(''Ext.data.Store'', {
fields: ["id", "displayName"],
proxy: {
url: ''data1.json'',
reader: {
type: ''json'',
rootProperty: ''data''
}
},
autoLoad: true
}),
name: ''dresses'',
margin: ''15px'',
allowBlank: false,
forceSelection: true,
renderTo: Ext.getBody()
});

Supuse que mi servicio retiring datos como a continuación

{
"data": [{
"id": "1",
"displayName": "Kurtha"
}, {
"id": "2",
"displayName": "Denim Top"
}, {
"id": "3",
"displayName": "Western T shirt"
}, {
"id": "4",
"displayName": "Sleeveless"
}]
}