Extjs - comment afficher combobox dans la colonne de la grille

la seule façon d'y parvenir en 4.2 x ou en dessous est d'utiliser un composant personnalisé comme la colonne comonent de Skirtle http://skirtlesden.com/ux/component-column ce type de colonne vous permet d'insérer des composants arbitraires dans une cellule.

la prochaine version D'ExtJS aura quelque chose appelé Gadget Grid qui permettra des fonctionnalités similaires.

le combobox ou datepicker ne sont injectés qu'une fois que vous cliquez sur la cellule, ils n'existent tout simplement pas dans la grille avant de cliquer. La façon de changer l'apparence d'une cellule en utilisant le moteur de rendu sur la colonne. De cette façon, vous pouvez ajouter une fausse triggerbox comme image de fond ou quelque chose comme ça.

En réponse à votre commentaire, voici comment vous pouvez le faire:

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

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

Etudier le docs pour toutes les options de rendu. Il y a différentes classes vous peut spécifier et les attributs qui seront utilisés par le DomHelper. La classe css peut avoir une image de fond, mais vous devez expérimenter ici. Il ne sera pas facile d'obtenir une mise en page cohérente avec ce que vous voulez faire, mais vous avez un accès complet au div qui est rendu dans la cellule. Assurez-vous d'inspecter les résultats avec les outils Firebug ou Chrome Dev, il vous montrera exactement ce qui se passe.

bien que vous puissiez screenshot un combobox et le mettre comme une image de fond. Mais mieux vaut ne pas essayer de créer un combobox dans le renderer, ce n'est pas comme ça que ça marche. Avoir un vrai combobox pour chaque rang est personnalisé seulement et pourrait avoir un impact sur la performance si vous avez beaucoup de rangs.

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')
});

Essayez ce lien..

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

C'est à partir de Extjs 5.

mise à Jour:

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

celui-ci a fonctionné comme un charme.

Ok, voici un exemple complet de la façon d'utiliser les boîtes Combo dans 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')
});

ceci.getStatusChoicesStore () function nous fournira les choix pour cette boîte bascule (vous pouvez définir cette fonction n'importe où, ou simplement l'aligner à l'intérieur de la définition des colonnes, pour moi il reste plus facile à lire si je crée une fonction pour elle):

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

en outre, plus d'informations et des exemples peuvent être trouvés ici.