web-dev-qa-db-fra.com

Mise à jour ou rechargement du magasin d'ExtJs ComboBox

J'aimerais savoir comment mettre à jour ou recharger les valeurs de liste d'un ComboBox ExtJs. Par exemple, j'ai quelques cases à cocher. Ces cases à cocher déterminent les valeurs que la ComboBox doit avoir. Ainsi, après avoir sélectionné certaines de celles-ci, je clique sur la liste déroulante (liste déroulante) pour afficher les valeurs.

En bref, comment puis-je changer les valeurs (magasin) d'un ComboBox a déjà.

J'espère que quelqu'un peut m'aider

Merci

extjs
14
user512514

J'utilise cette fonction API non documentée ExtJs pour changer de magasin au moment de l'exécution:

mycombobox.bindStore(newStore);

comme indiqué par l'équipe de support dans http://www.sencha.com/forum/showthread.php?40749-Change-Combobox-store-data-update .

Edit: Si je veux mettre les nouvelles données lorsque le magasin est rempli, je fais quelque chose comme ça

storeMyStore = new Ext.data.Store({
    ...
    listeners: {
        load: function(this, records, options) {
            cbMyCombo.bindStore( storeMyStore );
        }
    }
});
14
Roberto

C'est un peu comme ça

{
  xtype: 'checkbox',
  //configs
  listeners : {
     checked : function (checkbox, checkedBool) {
         var yourCombo = Ext.getCmp(yourComboID);

         //I'm not sure what params you will need to reload the comboBox from your
         // service but hopfully this will give the jist of things. . .

         yourCombo.store.reload(
                  {   
                     params: 
                         {yourParam : checkedBool},
                         {yourRowID : rowID}
                    });
      }
 }
6
It Grunt

Ici, je crée une liste déroulante qui est mise à jour après la sélection sur un autre ComboBox. Fondamentalement, l'utilisateur final peut utiliser les deux listes déroulantes pour sélectionner une catégorie principale et une sous-catégorie, en fonction du choix effectué sur la première liste déroulante.

Ceci est la boutique pour First comboBox:

Ext.define("StoreSubject", {
extend: "Ext.data.Model",
fields: [
{
    name: 'i_Id'
},
{
    name: 's_Value'
}
]
});

var StoreSubject = Ext.create('Ext.data.JsonStore', {
model: 'StoreSubject',
proxy: {

    type: 'ajax',
    url: '../General/AdministrationDefaultXMLDOM.aspx?qid=15',
    reader: {
        type: 'json'
    }
}
});
StoreSubject.load();

Ceci est la boutique pour Second comboBox:

Ext.define("StoreLanguageGroup", {
extend: "Ext.data.Model",
fields: [
{
    name: 'i_Id'
},
{
    name: 's_Value'
}
]
});
var StoreLanguageGroup = Ext.create('Ext.data.JsonStore', {
model: 'StoreLanguageGroup',
proxy: {

    type: 'ajax',
    url: '../General/AdministrationDefaultXMLDOM.aspx?qid=16',
    reader: {
        type: 'json'
    }
}
});

Mon code pour Comobox est comme ça ..

Première ComboBox:

var cmbSubjectName = Ext.create('Ext.form.field.ComboBox', {
id: 'cmbSubjectName',
fieldLabel: '<b>Subject</b>',
name: 'cmbSubjectName',
valueField: 's_Value',
displayField: 's_Value',
allowBlank: false,
anchor: '80%',
labelWidth: 150,
emptyText: '[--Choose--]',
minChars: 0,
store: StoreSubject,
queryMode: 'local',
typeAhead: true,
listeners: {
    'select': {
        fn: function (combo, value) {
            var strSubjectName = Ext.getCmp('cmbSubjectName').getValue();
            Ext.getCmp('cmbLanguageType').clearValue();
            Ext.getCmp('cmbLanguageType').getStore().load({
                params: {
                    SubjectName: strSubjectName
                }
            });
        }
    }

},
});

Ce code est utilisé pour appeler et remplacer le magasin combox (impuissant sinon il continuera à se charger)

Ext.override(Ext.LoadMask, {
onHide: function () {
    this.callParent();
}
});

// ---------------------------

Deuxième ComboBox:

var cmbLanguageType = Ext.create('Ext.form.field.ComboBox', {
id: 'cmbLanguageType',
fieldLabel: '<b>Language</b>',
multipleSelect: false,
name: 'cmbLanguageType',
valueField: 's_Value',
displayField: 's_Value',
allowBlank: false,
anchor: '80%',
labelWidth: 150,
emptyText: '[--Choose--]',
minChars: 0,
store: StoreLanguageGroup,
queryMode: 'local',
typeAhead: true,
});

J'espère que cela vous aidera .. et s'il vous plaît noter ma réponse

2
Santosh

Dans un écouteur d'événement sur les cases à cocher, obtenez une référence au magasin que lit votre ComboBox. Ensuite, appelez ses fonctions d'ajout ou de suppression pour mettre à jour les données du magasin en fonction de la case à cocher cochée une fois les mises à jour terminées, invoquez doLayout() sur le composant ComboBox, il devrait se restituer lui-même en fonction de l'état actuel. du magasin.

Bien que je pense qu'il existe un moyen de le mettre à jour automatiquement à tout moment, le magasin met à jour - je ne l'ai pas encore utilisé.

0
Macy Abbey