ExtJs - Renderer für remote-store combobox in der grid-editor

Ich weiß, das wurde irgendwo gefragt, wieder und wieder, aber ich kann nicht finden, eine solide Antwort als standard für diese Art von problem.

So viele getan haben, bevor ich einen editor im inneren ein Gitter, das eine combobox verwendet, remote-laden von einer Datenbank. Nehmen wir nun an, es gibt eine Tabelle in der Datenbank mit 50.000 Datensätzen.
Die combobox nur lädt den ersten 15. Wenn ich einen Datensatz auswählen zwischen diesen 15 alles, was gut zeigt. Zum Rendern der displayField statt der valueField verwende ich die folgende Funktion

  renderCombobox : function(value, metaData, record, rowIndex, colIndex, store, view, isNewRow){      
      var me      = this,
          columns = me.columns,
          editor, editorStore, editorIndex, displayField, display, rec;

    for(var i=0,j=columns.length;i<j;i++){          
      if(columns[i].getEditor){
          editor = columns[i].getEditor(record);
          if(editor.xtype === 'combobox'){
              editorStore   = editor.getStore().load();
              editorIndex   = editorStore.findExact(editor.valueField, value);
              displayField = editor.displayField;
          }
      }
    }      
    if(editorIndex != -1){
        rec = editorStore.getAt(editorIndex);
        if(rec && rec.get(displayField)){
            display = rec.get(displayField);
        }               
    }      
    return display;        
}

Das problem ist das folgende Szenario.

Wenn ich geben Sie vor, ich finde einen Datensatz, der nicht zwischen diesen 15 Datensätze. Zum Beispiel die Rekord 42,300. Ich wählen Sie es und für den moment ist alles OK.
Nun, Wenn ich auf einem anderen Feld in einem anderen editor in der grid (d.h. datefield) der renderer
Funktion für die combobox gibt undefined wie versucht wird, finden Sie den Datensatz mit dem Wert des Datensatzes 42,300, die nicht vorhanden in den speichern. Debugger sagt, dass der Speicher enthält wieder nur die ersten 15 Einträge.

Gibt es eine Konfiguration, die ich vermisse? Der laden muss eine Einschränkung. Ich kann nicht 50.000 Datensätze aus der Datenbank auf einmal.

  • Ich denke ein Ansatz ist die Verwendung this.store.on({beforeload:somefns,load:somefns}). Diese beiden Funktionen verantwortlich sein sollte, zu finden, wird der Letzte Wert der combobox, die kamen aus der Datenbank aus und fügen Sie es in den laden mit store.insert(0,record). Also jedes mal, wenn der erste Datensatz werden die von der remote-Quelle. Ich werde versuchen später heute Abend und kommen zurück, sollte ich eine Lösung haben. Dies kann für jemanden nützlich sein.
InformationsquelleAutor dev | 2014-06-01
  1. 2

    Ich denke, dass dieses Beispiel macht genau das, was Sie wollen: http://extjs.eu/ext-examples/#combo-in-grid

    InformationsquelleAutor Saki
  2. 0

    Den genial Saki Artikel gab mir die Ahnung um diese Aufgabe zu lösen.

    Brauchen Sie nicht alle Renderer, fügen Sie einfach eine zusätzliche store-mit allen Schlüssel-Wert-Paare für Ihre combo und Sie 'Bearbeiten' - event an den Start.

    Hier ist es.

    Ihre zusätzliche remote-store :

    Ext.define('crm.store.BillAdTarifsStore', {
    extend      : 'Ext.data.Store',
    storeId     : 'BillAdTarifsStore',
    requires    : 'crm.model.BillAdTarifsModel',
    model       : 'crm.model.BillAdTarifsModel',
    autoLoad    : true 
});

    es ist Modell:

    Ext.define('crm.model.BillAdTarifsModel', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id',        type: 'int'},
        { name: 'VarName',   type: 'string' }
    ],
    proxy   : {
        type    : 'ajax',
        url     : AjaxUrl,
        reader  : {
            type            : 'json',
            idProperty      : 'id',
            root            : 'data',
            totalProperty   : 'total',
            successProperty : 'success',
            messageProperty : 'message'
        },
        extraParams  : {
            Action   : 'DataRequest',
            DataType : 'GetBillAdTarifs'
        }
    }
});

    Grid-Konfiguration:

    plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    })
],
listeners: {
    //this event will change valueField in cell to the displayField (after choosing combo item)
    edit: function(e, eOpts) {
        //eOpts.rowIdx - is the index of row with clicked combo
        var SelectedComboId = Number(Ext.getCmp('ObjectsGrid').getStore().getAt( eOpts.rowIdx ).get('YourGridColumnName'));
        console.log( 'SelectedComboId: '+SelectedComboId );

        if(Number(SelectedComboId) > 0) {
            //ComboItemObj - get field name by index from additional store
            var ComboItemObj = Ext.data.StoreManager.lookup('BillAdTarifsStore').getById(SelectedComboId);
            if ( typeof ComboItemObj.data.id !== null && Number(ComboItemObj.data.id)>0 ) {
                //real combo item is chosen, set field name
                    Ext.getCmp('ObjectsGrid').getStore().getAt(eOpts.rowIdx).set('TrfCianBig',ComboItemObj.data.VarName);
            }
        }
    }

    Spalte Konfiguration kann wie folgt Aussehen:

    editor  : new Ext.form.field.ComboBox({
    triggerAction : 'all',
    forceSelection: false,
    editable    : false,
    allowBlank  : true,
    displayField: 'VarName',
    valueField  : 'id',
    store       : Ext.data.StoreManager.lookup('BillAdTarifsComboStore'),
        listeners: {
                 'change': function(comp, newValue, oldValue, eOpts) {
                               //Selected combo id value
                               var ComboValue  = comp.getValue();
                                //save data by some Ext.Ajax.request
                                },
                 click: {
                            //you can preload combo store with specifig parameters
                            element: 'el', 
                            fn  : function (store, operation, eOpts) {
                                .....
                                ComboStore.load({
                                        params: {
                                            SomeId : SomeParam
                                        }
                                    });
    InformationsquelleAutor Sergey Bogdanov
Schreibe einen Kommentar