2011-01-29 19 views
13

intento usar ComboBox en FormPanel, se define así:ExtJS ComboBox actuando como regulares seleccione

 
     xtype:   'combo', 
     name:   'Reasons', 
     store:   new Ext.data.ArrayStore({ 
     id:  0, 
     fields: [ 'myId', 'displayText' ], 
     data: [ [ 1, 'Reason 1' ], [ 2, 'Second Reason' ], [ 3, 'Something else' ] ] 
     }), 
     typeAhead:  false, 
     mode:   'local', 
     valueField:  'myId', 
     displayField: 'displayText', 
     allowBlank:  false, 
     editable:  false, 
     forceSelection: true 

me gustaría actuar como un elemento de selección ordinario, cuando tengo editable como falso no poder para volver a seleccionar, cuando sea verdadero (predeterminado), necesito eliminar la selección (mediante retroceso o eliminar) para volver a seleccionar.

¿Qué más debo apagar con el fin de rebajar cuadro combinado para seleccionar o shpuld que considero que utilizar otro componente en su lugar?

Mi preocupación es si realmente necesito la selección ordinaria (no del todo normal - la capacidad de almacenar y manipular las opciones es muy buena) - combox me parece un elemento de siguiente nivel que tiene demasiadas características que necesito apagar, y combox se representa como entrada con la flecha hacia abajo imagen qué desencadena toda la acción ....

Mi pregunta es: ¿Es el elemento ExtJS lo que está utilizando la etiqueta de selección HTML, actuando como seleccionar, representando como seleccionar?

+0

Se puede publicar la llamada de función completa a Ext. Combobox – Chandu

+0

Quizás una pregunta tonta, pero ¿qué versión de extJS estás usando? (Me parece que no puede encontrar en la documentación Ext.data.ArrayStore 2.3.0 y FireBug dice "Ext.data.ArrayStore no es un constructor" cuando estoy tratando de ejecutar el script (archivo de la versión en el servidor dice v .2.2)) – aliceraunsbaek

+0

Estamos actualmente en ExtJS 3.3.x - por lo que debe considerar su versión obsoleta. –

Respuesta

10

El truco es usar triggerAction: 'all' - fuerza el menú desplegable desplegable para mostrar todos los elementos al hacer clic en el icono de flecha hacia abajo (disparador).

Esa es probablemente la opción de configuración contrario a la intuición mayoría de ExtJS. Y es imposible descubrir lo que realmente hace al leer los documentos. Y como dices, para obtener un combo simple, tienes que especificar una gran cantidad de opciones de configuración, solo para apagar las cosas de lujo.

Los chicos de ExtJS han prometido arreglar esto en ExtJS 4, pero hasta entonces te sugiero que crees tu propia clase ComboBox que está configurada de la forma que más se necesita en tu aplicación. Por ejemplo, tengo algo como esto en mi proyecto actual:

/** 
* Simple combo, that just allows to choose from a list of values. 
*/ 
var StaticComboBox = Ext.extend(Ext.form.ComboBox, { 
    mode: 'local', 
    triggerAction: 'all', 
    editable: false, 
    valueField: 'value', 
    displayField: 'label', 
    /** 
    * @cfg {[[String]]} data 
    * Items in combobox as array of value-label pairs. 
    */ 
    data: [], 

    initComponent: function() { 
    this.store = new Ext.data.ArrayStore({ 
     fields: ['value', 'label'], 
     data: this.data 
    }); 
    StaticComboBox.superclass.initComponent.call(this); 
    } 
}); 

Tener que, puedo crear un combo simple, con sólo unas pocas líneas:

new StaticComboBox({ 
    name: 'Reasons', 
    data: [ 
    [1, 'Reason 1'], 
    [2, 'Second Reason'], 
    [3, 'Something else'] 
    ] 
}); 
Cuestiones relacionadas