ExtJS - Come mostrare casella combinata nella colonna Griglia

Question

ho un gridpanel includono data e colonna combo http://jsfiddle.net/YjYqX/
Ma io non voglio fare clic per mostrare il mio combo. Voglio mostrare il mio combo senza click, non nasconde all'interno delle cellule come

e lo stesso per la colonna data come

penso chage a clicksToEdit: 0 ma non riescono

plugins: [ 
     Ext.create('Ext.grid.plugin.CellEditing', { 
      clicksToEdit: 1 
     }) 
    ] 

Come fare, grazie

Answer 1

Il combobox o il datepicker vengono iniettati solo dopo aver fatto clic sulla cella, semplicemente non esistono nella griglia prima di fare clic. Il modo per cambiare l'aspetto di una cella è utilizzando il renderer sulla colonna. In questo modo è possibile aggiungere un triggerbox falso come immagine di sfondo o qualcosa del genere.

In risposta al tuo commento, ecco come si potesse fare:

{ 
    xtype: 'gridcolumn', 
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { 
     metaData.tdCls = 'fake-combo'; 

     return value; 
    }, 
    text: 'MyColumn8', 
    editor: { 
     xtype: 'combobox', 
     store: ... 
    } 
} 

Studio la docs per tutte le opzioni di rendering. Esistono diverse classi che è possibile specificare e attributi che verranno utilizzati da DomHelper. La classe css potrebbe avere un'immagine di sfondo, ma devi sperimentare qui. Non sarà facile ottenere un layout coerente con ciò che si vuole fare, ma si avrà pieno accesso al div reso nella cella. Assicurati di controllare i risultati con Firebug o Chrome Dev Tools, ti mostrerà esattamente cosa succede.

Anche se è possibile eseguire lo screenshot di una casella combinata e impostarla come immagine di sfondo. Ma meglio non provare a creare una combobox nel renderer, non è così che funziona. Avere una vera casella combinata per ogni riga è solo personalizzato e potrebbe influire sulle prestazioni se si dispone di un sacco di righe.

Answer 2

L'unico modo per ottenere questo risultato in 4.2x o inferiore è utilizzare un componente personalizzato come la colonna comonente di Skirtle http://skirtlesden.com/ux/component-column Questo tipo di colonna consente di inserire componenti arbitrari in una cella.

La prossima versione di ExtJS avrà qualcosa chiamato Gadget Grid che consentirà funzionalità simili.

Answer 3

var grid = Ext.create('Ext.grid.Panel', { 
      store: store, 
      columns: 
       [ 
      { 
         header: 'Category', 
         dataIndex: 'CategoryName', 
         editor: 
          { 
           xtype: 'combobox', 
           store: 'categoryStore', 
           displayField: 'CategoryName', 
           valueField: 'CategoryID' 
          } 
        } 
       ], 
      width: 450, 
      renderTo: Ext.getElementById('hede') 
     }); 

Answer 4

Prova questo link ..

http://docs.sencha.com/extjs/5.0/components/grids/widgets_widgets_columns.html

Questo da ExtJS 5.

Aggiornamento:

{ 
    xtype: 'widgetcolumn', 
    text: 'Progress', 
    width: 120, 
    widget: { 
     xtype: 'combobox' 
    } 
} 

Questo ha funzionato come un fascino.

Answer 5

Ok, ecco un esempio completo di come utilizzare caselle combinate in Sencha ExtJS:

var grid = Ext.create('Ext.grid.Panel', { 
     store: store, 
     columns: 
      [ 
       { 
        xtype: 'gridcolumn', 
        text: 'UserStatus', 
        dataIndex: 'userstatus', 
        editor: { 
         xtype: 'combobox', 
         allowBlank: false, 
         displayField:'Name', 
         valueField:'Id', 
         queryMode:'local', 
         store: this.getStatusChoicesStore() 
        } 
       } 
      ], 
     width: 450, 
     renderTo: Ext.getElementById('hede') 
    }); 

Ora il questo.La funzione getStatusChoicesStore() ci fornirà le opzioni per questa casella combinata (puoi definire tale funzione ovunque, o semplicemente incorporarla nella definizione delle colonne, per me è più facile da leggere se creo una funzione per esso):

getStatusChoicesStore : function() { 
     return Ext.create('Ext.data.Store', { 
      data : [{Id: 0, Name:"Active"},{Id: 1, Name: "Inactive"}] 
     }); 
    }, 

Inoltre, ulteriori informazioni ed esempi possono essere trovati here.