docs - store load extjs

Extjs-Cómo mostrar combobox en la columna de cuadrícula

Question

Tengo una cuadrícula que incluye fecha y combo columna jsfiddle

Pero no quiero hacer clic para mostrar mi combo. Quiero mostrar mi combo sin hacer clic, no ocultar dentro de la celda como

y lo mismo para la columna de fecha como

Creo que chage to clicksToEdit: 0 pero falla

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

Como hacer eso gracias

Answer 1

El cuadro combinado o el selector de fecha solo se inyectan una vez que hace clic en la celda, simplemente no existen en la cuadrícula antes de hacer clic. La forma de cambiar la apariencia de una celda es mediante el uso del renderizador en la columna. De esta manera usted podría agregar un triggerbox falso como imagen de fondo o algo así.

En respuesta a tu comentario, aquí tienes cómo puedes hacerlo:

{
    xtype: ''gridcolumn'',
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
        metaData.tdCls = ''fake-combo'';

        return value;
    },
    text: ''MyColumn8'',
    editor: {
        xtype: ''combobox'',
        store: ...
    }
}

Estudia los docs para todas las opciones de render. Hay diferentes clases que puede especificar y los atributos que utilizará DomHelper. La clase css podría tener una imagen de fondo, pero tienes que experimentar aquí. No será fácil obtener un diseño coherente con lo que quieres hacer, pero tienes acceso completo al div que se procesa en la celda. Asegúrese de inspeccionar los resultados con Firebug o Chrome Dev Tools, le mostrará exactamente lo que sucede.

Aunque puedes capturar una captura de pantalla y establecerla como imagen de fondo. Pero mejor no intentes crear un cuadro combinado en el renderizador, no es así como funciona. Tener un cuadro combinado real para cada fila es solo personalizado y podría afectar el rendimiento si tiene muchas filas.

Answer 2

La única forma de lograr esto en 4.2x o más abajo es usar un componente personalizado como la correspondiente columna de Skirtle http://skirtlesden.com/ux/component-column Este tipo de columna le permitirá insertar cualquier componente arbitrario en una celda.

La próxima versión de ExtJS tendrá algo llamado Gadget Grid que permitirá una funcionalidad similar.

Answer 3

Ok, aquí hay un ejemplo completo de cómo usar los cuadros combinados en 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'')
});

Ahora, la función this.getStatusChoicesStore () nos proporcionará las opciones para este cuadro combinado (puede definir esa función en cualquier parte, o simplemente integrarla dentro de la definición de las columnas, para mí es más fácil de leer si creo una función para ella) :

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

Además, más información y ejemplos se pueden encontrar here .

Answer 4

Prueba este enlace ..

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

Esto es de Extjs 5.

Actualizar:

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

Este funcionó a la perfección.

Answer 5

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'')
});