terça-feira, 15 de março de 2011

Trabalhando com EXTJS

Senhores,

O caso de uso era simples: colocar um Grid dentro de um Accordion.

Criei o grupo do grid, no modo tradicional:

    // Variávl "Modelo de coluna", cria as colunas do grid.
    var clModel = new Ext.grid.ColumnModel(this.gridColumns);

    // Variável "Modelo de número de registros" cria as linhas do grid de acordo com a quantidade de registros 
    var rsModel = new Ext.grid.RowSelectionModel(this.gridSelection);
    rsModel.addListener('rowselect', function(obj, rowIndex, record){
        fmPanel.getForm().loadRecord(record);
        formataPopups(record);
    }, this);

    // Variável "Guardadora de dados do banco", esta variável será colocada dentro do rsModel para popular o grid
    var dtStoree = new Ext.data.Store({
        url: '<<local onde está o reposítório>>',
        reader: new Ext.data.JsonReader({
            successProperty: 'success',
            root: 'data',
            totalProperty: 'total'
        }, this.gridData)
    });
   
    dtStoree.addListener('load', function(store, records, options){
        initView();
    }, this);

    dtStoree.addListener('beforeload', function(store, records, options){
        var instruction = "dtStore.baseParams = { ";
        var cont = 0;
        if(tela.filterField1 != null){
            cont++;
            instruction += "\"" + tela.filterField1 + "\" : \"" + Ext.getCmp(tela.filterField1).getValue().split(' - ')[0] + "\",";
        }
        if(tela.filterField2 != null){
            cont++;
            instruction += "\"" + tela.filterField2 + "\" : \"" + Ext.getCmp(tela.filterField2).getValue().split(' - ')[0] + "\",";
        }
        if(tela.filterField3 != null){
            cont++;
            instruction += "\"" + tela.filterField3 + "\" : \"" + Ext.getCmp(tela.filterField3).getValue().split(' - ')[0] + "\",";
        }
        instruction += " }"
        if(cont>0){
            eval(instruction);
        }
    }, this);

    // Variável de montagem do painel do grid. Essa variável junta todos os componentes
    // e cria uma referencia ao grid pronto
    var gdPanel = new Ext.grid.GridPanel({
        layout: 'fit',
        autoWidth: true,
        height: 500,
        anchor: '100% 100%',
        autoScroll: true,
        // trecho a seguir redesenha o grid após a pesquisa dos dados
        view: new Ext.grid.GridView({
            forceFit:true
        }),
        cm: clModel,
        sm: rsModel,
        store: dtStoree,
        bbar: new Ext.PagingToolbar({
           pageSize: this.gridSize,
           store: dtStoree,
           displayInfo: true,
           displayMsg: 'Mostrando registros {0} - {1} de {2}',
           emptyMsg: "Nenhum registro para mostrar",
       })
    });

Logo após, coloquei a variável gdPanel dentro do construtor do Accordion:
Aqui é importante mencionar que fiz algo que não encontrei em nenhum exemplo por ai:
Ajuste de Grid dentro de Accordion em EXTJS.
Ao tentar arrumar o Grid dentro do Accordion, comecei tentando pelo próprio Grid, afinal, era este objeto que não tinha o comportamento que eu desejava.
Porém, por mais que eu tratasse o Grid, não havia como fazê-lo aparecer completo, com scroll, de forma satisfatória para o usuário final.
Então, suspeitei que o objeto do Accordion estivesse "espremendo" o Grid, não fornecendo lugar adequado para sua apresentação.
Mas o problema não foi no objeto do Accordion. Embora este tenha grupo "defaults", indicado para o conteúdo ser extendido por todos os items, o layout é controlado diretamente dentro de cada item do accordion.
O código do accordion ficou assim:

    // Variável de montagem do painel dde Accordion's. Essa variável junta todos os componentes
    // e cria uma referencia ao accordion pronto   
    var accordion = new Ext.Panel({
        title: 'Accordion Layout',
        layout:'accordion',
        defaults: {
            // Aplicado para cada painel
            bodyStyle: 'padding:15px'
        },
        layoutConfig: {
            // Configurações específicas do Grupo Accordion vão aqui
            titleCollapse: false,
            animate: true,
            autoWidth: true,
            autoHeight: 600
        },
        items: [{
            title: 'Panel 1',
            autoScroll: true,
            autoWidth: true,
            autoHeight: true,
            items: gdPanel
        }
,{
            title: 'Panel 2',
            html: '<p>Panel content!</p>'
        },{
            title: 'Panel 3',
            html: '<p>Panel content!</p>'
        }]
    });

Por fim, utilizei o objeto do accordion para gerar um formField:

    // Objeto dos "Campos do Form". Ao invés de criá-los diretamente no painel, cria-se ou juntam-se os objetos aqui.
    // o nome da variável faz referência direta a todo grupo de elementos que aparecerão na tela.
    // neste caso em específico, criou-se um objeto de grid;
    // esse grid foi colocado dentro do objeto de accordion;
    // o accordion foi colocado dentro do formFields;
    // o formFields será utilizado dentro do fmPanel;
    // o fmPanel será um objeto do painel que será criado dentro do initView, objeto que cria, efetivamente, a tela.
    var formFields = [{
        autoScroll: true,
        layout: 'column',
        width: 465,
        heigth: 50,
        labelWidth: 1,
        items: [{
            layout: 'form',
            width: 350,
            labelWidth: 85,
            items: [ {
                xtype: 'textfield',
                id: 'id',
                title: 'id',
                fieldLabel: 'id',
                width: 244,
                scope: this,
                editable: false,
                allowBlank: false,
                tabIndex: 4,
                valueDto: null,
            }]
        },{
            layout: 'form',
            width: 115,
            labelWidth: 5,
            items: [{
                xtype: 'button',
                text: 'Botão',
                minWidth : 110,
                listeners:{
                    click:function(){
                        if ( Ext.getCmp('id').getValue() != '' && Ext.getCmp('id').getValue() != 'null') {
                            fmPanel.getForm().submit(searchAction);
                        } else {
                            Ext.Msg.alert('Atenção', 'Campo id em Branco.');
                        }
                    }
                }          
            }]
        }]
    },
    accordion
    ];

Nenhum comentário:

Postar um comentário