Dans ExtJs 3.3.1, comment puis-je montrer une zone de liste déroulante liste déroulante sans cliquez dans EditorGrid?

Je suis en utilisant ExtJs 3.3.1.

Au sein d'une EditorGrid, mon "modifiable" colonne a une zone de liste déroulante de rédacteur en chef. Comment puis-je avoir la liste déroulante toujours montrant pour chaque ligne? Sens, l'utilisateur n'aurait pas à cliquer sur une cellule de savoir qu'il s'agit d'une zone de liste déroulante. Actuellement, j'ai clicksToEdit à 1, mais je souhaite que je pourrais définir ce à 0 (j'ai essayé).

Voir une partie de mon code ci-dessous pour voir ma configuration actuelle.

var combo = new Ext.form.ComboBox({
    typeAhead: true,
    triggerAction: 'all',
    lazyRender: true,
    mode: 'local',
    store: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'statusId',
            'displayText'],
        data: data
    }),
    valueField: 'statusId',
    displayField: 'displayText'
});

var cm = new Ext.grid.ColumnModel({
    columns: [{
        id: 'orderId',
        header: 'ID',
        dataIndex: 'id',
        width: 50
    }, {
        header: 'Status',
        dataIndex: 'status',
        width: 130,
        editor: (data.length == 1) ? null : combo,
        renderer: Ext.util.Format.comboRenderer(combo)
    }, {
        id: 'orderSummary',
        header: 'Summary',
        dataIndex: 'summary',
        renderer: this.renderSummary
    }]
});

var orderGrid = new Ext.grid.EditorGridPanel({
    store: this.getOrderStore(),
    cm: cm,
    autoExpandColumn: 'orderSummary',
    clicksToEdit: 1
});

OriginalL'auteur Justin | 2011-09-15

Voici la solution que j'ai trouvé.

Dans ma colonne de modèle, j'ai fait en sorte que la colonne que je fais "modifiable" a un id. Chaque cellule de cette colonne va maintenant avoir une classe CSS associé nommé "x-grid-col-{id}". Ma colonne id est "statut" de sorte que la classe a été "x-grid-col-état".
J'ai créé le CSS pour la classe "x-grid-col-état", qui définit la flèche vers le bas de l'image comme fond d'écran, aligné à droite. Il définit également le curseur sur le pointeur, de sorte que l'utilisateur sait qu'ils peuvent cliquer sur la cellule.
```
.x-grid3-col-status
{
    background-image: url(Image/trigger-single.gif);
    background-position: right;
    background-repeat: no-repeat;
    cursor: pointer;
}
```
Prochaine, j'ai mis en place un écouteur pour ma ComboBox qui écoute le "focus" de l'événement. Sur la focus, je développez le menu déroulant. Il est important que je devais ajouter lazyInit: faux à mon ComboBox de config, ou bien une liste vide s'affiche lorsque vous développez. lazyInit - true pour ne pas initialiser la liste pour ce combo jusqu'à ce que le champ est concentré (par défaut à true)

Le code:

    Ext.util.Format.comboRenderer = function (combo) {
return function (value, metaData, record, rowIndex, colIndex, store) {
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}        
var combo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyInit: false,
lazyRender: true,
mode: 'local',
editable: false,
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'statusId',
'displayText'
],
data: data
}),
valueField: 'statusId',
displayField: 'displayText',
listeners: {
'focus': {
fn: function (comboField) {
comboField.doQuery(comboField.allQuery, true);
comboField.expand();
}
, scope: this
}
, 'select': {
fn: function (comboField, record, index) {
comboField.fireEvent('blur');
}
, scope: this
}
}
});
var cm = new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
{
id: 'orderId',
header: 'ID',
dataIndex: 'id',
width: 50
}, {
header: 'Status',
id: 'status',
dataIndex: 'status',
width: comboColumnWidth,
editor: combo,
renderer: Ext.util.Format.comboRenderer(combo)
}, {
id: 'orderSummary',
header: 'Summary',
dataIndex: 'summary',
renderer: this.renderSummary
}
]
});
var orderGrid = new Ext.grid.EditorGridPanel({
store: this.getOrderStore(),
cm: cm,
autoExpandColumn: 'orderSummary',
title: title,
clicksToEdit: 1
});

OriginalL'auteur Justin

Je pense que vous aurez besoin d'ajouter une css spéciale pour la zone de liste déroulante qui affiche l'icône de menu déroulant. Ce n'est pas pris en charge nativement par Ext JS. Voici un exemple de la façon dont il peut être fait:

var companyColumn = {
header: 'Company Name',
dataIndex: 'company',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
//provide the logic depending on business rules
//name of your own choosing to manipulate the cell depending upon
//the data in the underlying Record object.
if (value == 'whatever') {
//metaData.css : String : A CSS class name to add to the TD element of the cell.
//metaData.attr : String : An html attribute definition string to apply to
//                        the data container element within the table
//                        cell (e.g. 'style="color:red;"').
metaData.css = 'name-of-css-class-you-will-define';
}
return value;
}
}

Ou vous pouvez utiliser la Ext.grid.TemplateColumn et spécifier le tpl config. Cela va générer automatiquement un moteur de rendu pour les cellules de la colonne et d'appliquer les tpl.

OriginalL'auteur Varun Achar

Vous devez vous connecter pour publier un commentaire.