1. Inicio
  2. Pregunta y respuesta
  3. ExtJs 4 cuadro combinado con casillas de verificación

ExtJs 4 cuadro combinado con casillas de verificación

2011-07-06 29 views
8

Estoy buscando control de cuadro combinado EXTJS4 que permite seleccionar varios elementos a través de casillas de verificación dentro.ExtJs 4 cuadro combinado con casillas de verificación

En realidad necesito este control http://lovcombo.extjs.eu/ pero está implementado para ExtJs3. Traté de convertirlo a ExtJs4, pero la tarea no es trivial en realidad.

¿Podría sugerir un componente similar para ExtJs4. O tal vez podrías indicarme algún tutorial o ejemplo: ¿cómo hacer esas cosas?

Fuente

2011-07-06 Andrey Selitsky

Respuesta

7
  1. uso esto: http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox

enter image description here

  1. o esto: http://www.sencha.com/forum/showthread.php?132328-CLOSED-ComboBox-using-Grid-instead-of-BoundList

- uso cuadrícula con checkboxselectmodel en combox

Fuente

2011-07-07 06:47:35 atian25

+1

vi este componente, y creo que es muy grande. Pero necesito exactamente un combobox con casillas de verificación. Es un requisito. Gracias de cualquier manera. –

+0

prueba la segunda manera. o espere un momento, habrá alguien para mover lovcombo a 4.x :) – atian25

17

combo multiselección con checkbo x en ExtJS4.0 se puede lograr con algunas líneas de código.

Básicamente necesita hacer uso de la clase CSS existente que se aplica durante la selección y deselección de un elemento y empujando una imagen (casilla de verificación) en ese momento en consecuencia.

"x-boundlist-ítem" y "seleccionado x-boundlist-" son las clases tomadas de ext-all.css.

<style> 

.x-boundlist-item img.chkCombo { 
    background: transparent url(/lib/extjs-4.1.0/resources/themes/images/default/menu/unchecked.gif); 
} 
.x-boundlist-selected img.chkCombo{ 
    background: transparent url(/lib/extjs-4.1.0/resources/themes/images/default/menu/checked.gif); 
} 

</style> 
<head> 

Ext.create('Ext.form.ComboBox', { 
     id: 'BCCAddress', 
     name: 'BCCAddress', 
     maxHeight: 150,   
     width: 210, 
     multiSelect: true, 
     emptyText : "Select Bcc email addresses", 
     renderTo: 'extBCCAddress', 
     store: myArrayStore, 
     displayField: 'fieldName', 
     valueField: 'fieldName', 
     forceSelection: true, 
     editable: false, 
     mode: 'local', 
     triggerAction: 'all', 
     listConfig : {   
      getInnerTpl : function() { 
       return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {fieldName} </div>'; 
      } 
     } 
    });

[continuación es una imagen de este componente personalizado]
enter image description here

Fuente

2012-07-06 15:31:52

+1

Estoy usando v4.2.1.883 (no estoy seguro de si importa) pero el código anterior no funcionó hasta que agregué un alto y un ancho de 16 píxeles a cada uno de los estilos anteriores. También moví la imagen a mi directorio/Images (no estoy seguro si eso importaba). Realmente me pregunto, ¿cuál sería una mejor manera de hacer esto para que no tenga que hacer referencia al código duro de la ruta de recursos extjs? –

+0

En ExtJS 4.2.1 (y otras versiones probablemente), no es necesario codificar la ruta del recurso. En su lugar, coloque los estilos en un archivo SCSS (por ejemplo, sass/etc/all.scss) y use "background: url transparente (images/menu/checked.gif);". Parece que en 4.2.1, tenemos que dar explícitamente un ancho y alto de 16px como lo mencionó Peter. –

+0

@PeterKellner dice: debe agregar alto y ancho de 16 píxeles a su estilo. Me funciona en extjs 4.2.2. –

Cuestiones relacionadas

 Cuestiones relacionadas