En extjs, si tengo una red de definición como esta:

xtype: 'grid',
store: 'someStore',
flex: 1,
frame: true,
loadMask: true,
titleCollapse: true,
cls: 'vline-on',
ref: '../someGrid',
id: 'someGrid',
columns: [
           {
             xtype: 'gridcolumn',
             header: 'ID',
             dataIndex: 'someID',
             sortable: true,
              width: 100
            }

Es allí una manera de aplicar algún formato para esta columna? Por ejemplo, este campo es un número y, si quiero, para establecer un decimal de precisión..puedo hacer yo? O tengo que aplicar el formato cuando la tienda está cargado en mi archivo java?
Mi conjetura es el último??

InformationsquelleAutor Victor | 2011-02-09

4 Comentarios

  1. 9

    Uso «renderer» opción. Usted puede definir la función de allí. Por ejemplo quiero mostrar someID envuelto en la etiqueta:

    columns: [
           {
             xtype: 'gridcolumn',
             header: 'ID',
             dataIndex: 'someID',
             sortable: true,
             width: 100,
             renderer: function(value) {
                 //your logic here
                 return "<b>" + value + "</b>";
             }
            }
    • Gracias voy a probar esto.
    • Hay una manera que usted puede especificar un sistema de representación de atributo en el ui.js archivo a través de la ext designer? Porque, si la mano de editar el ui.js de archivo, que será reemplazado por el diseñador de la próxima vez. Y si usted añadir «representador» para el .archivo js, creo que usted necesita para copia de toda la columna definición
    • No lo sé. Yo no uso Ext Designer. Estoy escribiendo el código manualmente.
    • si la actualización de los archivos dentro de la carpeta de metadatos, a continuación, el Arquitecto será sobrescribir. Hice esto en Arquitecto 3
  2. 1

    Si quieres mostrar la precisión decimal en el interior de una columna de cuadrícula, se debe definir el dataindex en su tienda de «flotar» tipo:

    ...
    , {name: 'column_data_name', type: 'float'}
    ...

    A continuación, en el interior de la columna de cuadrícula definición debe especificar un sistema de representación, como se sugiere por KomarSerjio, y el uso de la misma.

    function floatRenderer(value) {
        if (value) {
            var val = value.toFixed(2);
    
            return addSeparatorsNF(val, '.', ',', '.');
        }
        else return "";
    }
    ...
    , { id:'column_data_name', header: 'label', dataIndex: 'column_data_name' , renderer: floatRenderer ,  align: 'right' }
    ...

    La función addSeparatorsNF ha sugerido aquí.

  3. 0

    Para dar formato a la cuadrícula valor decimal para restringir después de que seleccione el número dos, o hasta que usted desea simplemente utilizar a continuación el código en su columna :
    procesador: Ext.util.Formato.numberRenderer(‘00.00’)

  4. 0

    He probado el renderizador config KomarSerjio sugerido y funcionó brillantemente para mí cuando el uso de Sencha Ext JS 6. Yo lo he utilizado a cero llenar algunos datos en tiempo que estaba recibiendo por el que se echa el prefijo de cero para hacer de él un tiempo de 24 horas. Lo he intentado de la siguiente y funcionó muy bien! Gracias.

    Ext.define('ViewLL.view.main.List', {
        extend: 'Ext.grid.Panel',
        xtype: 'mainlist',
        reference: 'mainList',
        flex: 1,
    
    
        requires: [
            'ViewLL.store.Datastore'
        ],
    
        title: 'Records',
    
        store: {
            type: 'datastore'
    
        },
    
        columns: 
            { text:'Pln On Site Time', 
              dataIndex:'plnOnSiteTime', 
              renderer: function (number) {
              if (number<=2400) { number = ("000"+number).slice(-4); }
              return number;
              }
            }
    
    });

    Antes de representador de configuración de mi red estaba mostrando valores por ejemplo, 926, 800, 1000.
    Post añadiendo la función a través de representador de config de mi cuadrícula valores mostrados por ejemplo, 0926, 0800, 1000

Dejar respuesta

Please enter your comment!
Please enter your name here