web-dev-qa-db-fra.com

Extjs - Comment afficher la liste déroulante dans la colonne Grille

J'ai un tableau de grille incluant la date et la colonne combinée jsfiddle

Mais je ne veux pas cliquer pour afficher mon combo. Je veux montrer mon combo sans cliquer, ne pas cacher la cellule comme

enter image description here

et la même chose pour la colonne de date comme

enter image description here

Je pense que chage à clicksToEdit: 0 mais échoue

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

Comment faire ça, merci

extjscomboboxgridextjs4.1
17
DeLe

La seule façon d'y parvenir dans 4.2x ou ci-dessous est d'utiliser un composant personnalisé comme la colonne comonent de Skirtle http://skirtlesden.com/ux/component-column Ce type de colonne vous permettra d'insérer n'importe quel arbitraire composants dans une cellule.

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

8
dbrin

La zone de liste déroulante ou le sélecteur de dates ne sont injectés qu'une fois que vous avez cliqué sur la cellule, ils n'existent tout simplement pas dans la grille avant de cliquer. La façon de modifier l'apparence d'une cellule consiste à utiliser le rendu sur la colonne. De cette façon, vous pouvez ajouter un faux 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: ...
    }
}

Étudiez le docs pour toutes les options de rendu. Il existe différentes classes que vous pouvez spécifier et des attributs qui seront utilisés par DomHelper. La classe css pourrait avoir une image d'arrière-plan, 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 à la div qui est rendue dans la cellule. Assurez-vous d'inspecter les résultats avec Firebug ou Chrome Dev Tools, il vous montrera exactement ce qui se passe.

Bien que vous puissiez capturer une zone de liste déroulante et la définir comme image d'arrière-plan. Mais mieux vaut ne pas essayer de créer une zone de liste déroulante dans le moteur de rendu, ce n'est pas ainsi que cela fonctionne. Le fait d'avoir une véritable zone de liste déroulante pour chaque ligne est uniquement personnalisé et peut avoir un impact sur les performances si vous avez beaucoup de lignes.

8
Benjamin E.
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')
});
6
Eren

Essayez ce lien ..

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

Cela vient d'Extjs 5.

Mise à jour: 

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

Celui-ci a fonctionné comme un charme.

2
Gugan

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

Maintenant, la fonction this.getStatusChoicesStore () nous fournira les choix pour cette zone de liste déroulante (vous pouvez définir cette fonction n'importe où, ou simplement l'intégrer à l'intérieur du définition des colonnes, pour moi ça reste plus facile à lire si je crée une fonction pour ça):

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

De plus, plus d'informations et d'exemples peuvent être trouvés ici .

1
PedroD