2011-10-11 15 views
5

Ho bisogno di un gruppo radio nella griglia extjs. Posso avere il radiogruppo come editor ma gli utenti vogliono selezionare direttamente l'opzione dalla radio.in Editor ExtJS Grid/Grid

ad es. O sì O no O forse

invece di avere sì come impostazione predefinita e una volta selezionata la cella, viene convertita in gruppo radio (come funziona la griglia dell'editor), vogliono il comportamento predefinito come queste opzioni. (Essi non vogliono la discesa)

risposta

2

ho creato un componente del gruppo della radio:

Ext.define('Ext.ux.grid.column.RadioGroupColumn', { 
    extend: 'Ext.grid.column.Column', 
    alias: 'widget.radiogroupcolumn', 

    /* author: Alexander Berg, Hungary */ 
    defaultRenderer: function(value, metadata, record, rowIndex, colIndex, store, view) { 
     var column = view.getGridColumns()[colIndex]; 
     var html = ''; 
     if (column.radioValues) { 
      for (var x in column.radioValues) { 
       var radioValue = column.radioValues[x], radioDisplay; 
       if (radioValue && radioValue.fieldValue) { 
        radioDisplay = radioValue.fieldDisplay; 
        radioValue = radioValue.fieldValue; 
       } else { 
        radioDisplay = radioValue; 
       } 
       if (radioValue == value) { 
        html = html + column.getHtmlData(record.internalId, store.storeId, rowIndex, radioValue, radioDisplay, 'checked'); 
       } else { 
        html = html + column.getHtmlData(record.internalId, store.storeId, rowIndex, radioValue, radioDisplay); 
       } 
      } 
     } 
     return html; 
    }, 

    getHtmlData: function(recordId, storeId, rowIndex, value, display, optional) { 
     var me = this, clickHandler, readOnly; 
     var name = storeId + '_' + recordId; 
     var clickHandler; 
     if (me.readOnly) { 
      readOnly = 'readonly'; 
      onClick = ''; 
     } else { 
      readOnly = ''; 
      onClick = "onclick=\"this.checked=true;Ext.StoreManager.lookup('" + storeId + "').getAt(" + rowIndex + ").set('" + me.dataIndex + "', '" + value + "');\"'"; 
     } 
     return ' ' + display + ' '; 
    } 
});

Uso 1:

{ 
    "xtype" : "radiogroupcolumn", 
    "text" : "Radio Group Test", 
    "width" : 160, 
    "radioValues" : ["yes", "no", "maybe"], 
    "dataIndex" : "radio" 
}

Uso 2:

{ 
    "xtype" : "radiogroupcolumn", 
    "text" : "Radio Group Test", 
    "width" : 160, 
    "radioValues" : [{ 
      "fieldValue" : "yes", 
      "fieldDisplay" : "Yes" 
     }, { 
      "fieldValue" : "no", 
      "fieldDisplay" : "No" 
     }, { 
      "fieldValue" : "maybe", 
      "fieldDisplay" : "Maybe" 
     } 
    ], 
    "dataIndex" : "radio" 
}
+0

Con ext-js 4.1 questo non funziona, che è la versione di ext-js con cui hai testato questo codice? – Gab