Foro

[SOLUCIONADO] resize column en un grid

0
Hola a todos. Tengo el siguiente problema con un gridPanel, lo he creado añadiendo una columna autoExpandColumn, y se renderiza dentro de un panel con layout:'fit'. El grid no tiene indicado ningún width, para que este sea dinámico. El problema es que cuando cambio el tamaño del browser, el tamaño de las columna no se esta ajustando al tamaño del panel contenedor. Curiosamente la tbar y la bbar del grid si se adaptan al nuevo tamño, pero las columnas no. También he usado el código de view en el grid: 
 
....
view: new Ext.grid.GridView({
             forceFit: true,
           //autoFill: true
})
....
¿alguien conoce algún truco para este problema?

3 Respuestas

Mejores votos Por fecha Solución
0
usa layout:"anchor" en lugar de layout:"fit" y asignale al grid la propiedad anchor:"100% 100%" <!-- s;) --><!-- s;) -->
0
Lo he probado pero sigue sin funcionar. Os paso un codigo de ejemplo: 
                   var rTLF = Ext.data.Record.create([{
                        name: 'tipo'
                    }, {
                        name: 'num',
                    }]);
                    
                    var rdTLF = new Ext.data.JsonReader({
                        totalProperty: "results",
                        root: "rows",
                        id: "id" 
                    }, rTLF);
                    
                    
                    var stTLF = new Ext.data.Store({
                        autoLoad: false,
                        //url: 'prueba.json',                        
                        reader: rdTLF
                    }) //stTLF        
        
                    var grTLF = new Ext.grid.GridPanel({
                        store: stTLF,
                        columns: [{
                            id: 'iuiu',
                            header: "Tipo",
                            width: 200,
                            sortable: true,
                            dataIndex: 'tipo'
                        }, {
                            header: "Núm tlf.",
                            width: 120,
                            sortable: true,
                            dataIndex: 'num'
                        }],
                        anchor: '100% 100%',
                        viewConfig: {
                            forceFit: true,
                            autoFill: true
                        },
                        sm: new Ext.grid.RowSelectionModel({
                            singleSelect: true
                        }),
                        height: 200,
                        borde: true,
                        title: 'Prueba tlf'
                    
                    })//grTLF
                    //stEMP.load();
                    
                    
                    var GUI = new Ext.Panel({
                        title:'test',
                        renderTo: Ext.getBody(),
                        layout: 'anchor',
                        items: grTLF
                    })
Con este ejemplo, en FF si cambias el tamaño de la ventana del browser cambia el panel (GUI) pero no se ajusta el grid, el cual permanece con el mismo tamaño que en el momento de su primer render.
0
La solución a sido incorporar en el Panel el atributo [color=#FF0000]monitorResize: true[/color] 
                    var grTLF = new Ext.grid.GridPanel({
                        store: stTLF,
                        columns: [{
                            id: 'iuiu',
                            header: "Tipo",
                            width: 200,
                            sortable: true,
                            dataIndex: 'tipo'
                        }, {
                            header: "Núm tlf.",
                            width: 120,
                            sortable: true,
                            dataIndex: 'num'
                        }],
                        autoExpandColumn: 'iuiu',
                        sm: new Ext.grid.RowSelectionModel({
                            singleSelect: true
                        }),
                        height: 200,
                        frame: true,
                        title: 'Prueba tlf'
                    
                    })//grTLF
                    //stEMP.load();
                    
                    var GUI = new Ext.Panel({
                        renderTo: Ext.getBody(),
                        title: 'Prueba',
                        layout: 'fit',
                        monitorResize: true, //  <- Soluciona el problema
                        items: grTLF
                    })

¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook

Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.

Tags

Ext JS 3