extjs 4 Comment aussi de garder la zone de liste déroulante dans la cellule de la grille

J'ai vu les mêmes questions sans réponse d'ailleurs. Je veux avoir une liste déroulante dans une colonne avec deux options (ASC, DEC) en elle. Je veux qu'il s'affiche dans chaque ligne, ou tout au moins de sa valeur s'affiche quand il n'est pas sélectionné.

Je sais que ce n'est pas une "bonne idée" de rendre une zone de liste déroulante dans chaque ligne, mais dans ce cas, je sais que je vais avoir un maximum d'environ 20 lignes, donc il ne devrait pas être une affaire énorme. Si cela ne peut pas être fait, je veux avoir la valeur sélectionnée dans la liste déroulante afficher. Actuellement je viens de le comboboxes apparaissant lorsque je clique sur une ligne, qui n'a pas beaucoup de sens puisque vous ne pouvez pas voir votre sélection à moins que vous créez. Quelle est la solution?

Aussi, je veux me débarrasser de la modifier et annuler les boutons qui apparaissent lorsque je clique sur une ligne, je veux juste être en mesure de modifier la cellule avec la zone de liste déroulante, et qu'automatiquement modifier/enregistrer.

InformationsquelleAutor Bbb | 2012-09-07
  1. 8

    Vous pouvez définir une valeur par défaut pour le combo.

    Que devriez alors obtenir que rendus au démarrage.

    Utilisation de cellules renderer à render la displayField de la combo dans votre grille. Suivant un exemple de travail qui peut être poster dans l'une des API de boîtes de code.

    De travail JSFiddle

    Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone', 'id'],
data: {
'items': [{
"name": "Lisa",
"email": "[email protected]",
"phone": "555-111-1224",
"id": 0
}, {
"name": "Bart",
"email": "[email protected]",
"phone": "555-222-1234",
"id": 1
}, {
"name": "Homer",
"email": "[email protected]",
"phone": "555-222-1244",
"id": 2
}, {
"name": "Marge",
"email": "[email protected]",
"phone": "555-222-1254",
"id": 3
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
//the renderer. You should define it within a namespace
var comboBoxRenderer = function(combo) {
return function(value) {
var idx = combo.store.find(combo.valueField, value);
var rec = combo.store.getAt(idx);
return (rec === null ? '' : rec.get(combo.displayField));
};
}
//the combo store
var store = new Ext.data.SimpleStore({
fields: ["value", "text"],
data: [
[1, "Option 1"],
[2, "Option 2"]
]
});
//the edit combo
var combo = new Ext.form.ComboBox({
store: store,
valueField: "value",
displayField: "text"
});
//demogrid
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
header: 'id',
dataIndex: 'id',
editor: combo,
renderer: comboBoxRenderer(combo)
}],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
    • Grâce à quelle config: j'ai de la valeur: 'ASC' et qui n'est pas le truc
    • Je suis sur elle... j'espère le remettre en marche... 😉
    • les travaux de cette. Utiliser un convertisseur qui utilise le displayfield de la liste déroulante pour rendre l'affichage d'une valeur de la liste déroulante pour modifier.
    • C'est exactement comment je le fais trop
    • J'ai adapté cette plus MVC de l'environnement:code moteur de rendu: function (valeur, les métadonnées, d'enregistrement, de rowIndex, colIndex, magasin) { if (valeur == ") return ";code var combo = ce.les colonnes[colIndex].getEditor(); var sto = Ext.getStore(combo.magasin); var idx = sto.trouver(combo.valueField, valeur); var rec = sto.getAt(idx); return (rec === null || rec === undefined ? ": rec.get(combo.displayField)); }
    InformationsquelleAutor sra
  2. 1
    {
header: 'Your header',
dataIndex: 'your Column',
editor: {
xtype: 'combobox',
store: yourStore,
queryMode: 'local',
displayField: 'Your Display..',
valueField: 'Your Value'
}
    InformationsquelleAutor Reza