23/03/2012 Development / asp3

Salve, salve pra quem estiver lendo esse post! Vou falar um pouco sobre a experiência que estou tendo atualmente na criação de grids.

No projeto de reformulação do SIO eu comecei a mexer nessa parte de grids, que inicialmente era feita através de uma classe em Asp que simplismente retorna uma tabela com todos os dados e metodos que eu queria que o meu grid tivesse, ou seja, era uma verdadeira meleca, e até então eu achava a coisa ais linda da terra :-|

Com funcionava?

Set tbl = new WMTable()
tbl.ColNames = Array("Lj.", "Ref","Vagas")
tbl.ColAlign = Array("left", "left", "left")
tbl.ColWidth = Array("60", "60", "80")
tbl.ColFields = Array("txtLoja","referencia","txtCategoria")
tbl.ColText Array("  :txtLoja:","  :referencia:","  :txtCategoria:")
tbl.ImageAsc = "img/sort_asc.gif”
tbl.ImageDesc = "img/sort_desc.gif”
tbl.ControlID = "cod"
tbl.ConnectionString = Application("conexao")
tbl.Source = SQL
tbl.Paginate = True
tbl.PageSize = 100
tbl.JsFunction = "wmTable(':qString:');"
tbl.Create("tblImovel")
Set tbl = Nothing

e ele retorna uma tabela e eu simplismente dava $(algumacoisa).html(retorno)...óoooooooooooooh que blz! Esse retorno era em base 77kb!

Até que funcionava mesmo, só que nos padrões de desenvolvimento e, sobretudo em relação a desempenho, performance isso não é legal né! O certo é só retorna os  dados e pronto!

Então vamos partir pra outro modelo, que tal ExtJS!!!!

Achei uma classe na internet chamada ASPJSON, que você passa um objeto conexao e um sql e ele retorna a parada toda em json.


Fields : [
{ name: 'foto', type: 'string' },
{ name: 'destaque', type: 'string' },
{ name: 'lancamento', type: 'string' },
{ name: 'publicar', type: 'string' },
{ name: 'n_vagas', type: 'string' },
{ name: 'quartos', type: 'string' },
{ name: 'cidade', type: 'string' }],
columns:
[{ header: 'Loja', dataIndex: 'txtLoja' },
{ header: 'Ref', dataIndex: 'referencia' },
{header: 'Tipo', dataIndex: 'txtCategoria' },
{ header: 'Cidade', dataIndex: 'cidade' } ]

Supomos que a gente queira gerar um grid de grid({'url' : 'minhaUrl.asp', 'fields' : fields, 'columns' : columns, 'renderTo' : document.body});

Função que grã o grid

grid = function(options) {

    var store = new Ext.data.JsonStore({
        url: options.url,
        autoLoad: true,
        fields: options.fields
    });

    var grid = Ext.getCmp('griPanel_' + options.renderTo);
    if (grid) {
        grid.store
        grid.getView().refresh();
    }

    var grid = new Ext.grid.GridPanel({
        //renderTo: options.renderTo,
        region: center,
        store: store,
        id:'griPanel_' + options.renderTo,
        columns: options.columns,
        container: options.renderTo,

        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Visualizando {0} - {1} de {2}',
            emptyMsg: "Nenhum registro"
            //plugins: new Ext.ux.SlidingPager(),
            /*items: [
            '-', {
            pressed: true,
            enableToggle: true,
            //text: 'Show Preview',
            //cls: 'x-btn-text-icon details',
            toggleHandler: function(btn, pressed) {
            var view = grid.getView();
            view.showPreview = pressed;
            view.refresh();
            }
            }]*/
        })

    })

    var el = Ext.get(options.renderTo);
    var panel = new Ext.Panel({
        renderTo: options.renderTo,
        border: false,
        plugins: [new Ext.ux.plugins.FitToParent(el)],
        layout: 'fit',
        items: grid
    });
};

...Melzinho na chupeta!!!! Esse retorno é em base 10kb

Apesar de eu gostar bastante desse modelo, eu ainda acho que ExtJs é muito lento, porém é bonito pra caramba, mas tem que saber usar as paradas, encaixar as caixas e isso é complicadinho.

Então um modelo que eu particularmente venho usando é o MVC...A gente cria o modelo dos dados do grid e depois faz um merge com json, ou seja, você modelo a sua tabela do seu jeito que você quiser totalmente.

Então pra isso vamos utilizar o jQuery.tmpl() ou jQuery Template

Laudo.prototype.grid = function(args) {

    var that = this;
    var instanceId = that.instanceId;
    var template = ["<tr>",
                        "<td>${txtLoja}</td>",
                        "<td>${referencia}</td>",
                        "<td>${txtCategoria}</td>",
                        "<td>${cod}</td>",
                        "<td>${endereco}</td>",
                        "<td>${bairro}</td>",
                        "<td>${valor}</td>",
                        "<td>${number}</td>",
                        "<td>${foto2}</td>",
                        "<td>${fotoss}</td>",
                        "<td>${foto}</td>",
                        "<td>${destaque}</td>",
                        "<td>${lancamento}</td>",
                        "<td>${publicar}</td>",
                        "<td>${n_vagas}</td>",
                        "<td>${quartos}</td>",
                        "<td>${cidade}</td>",
                    "</tr>"].join("");

    var theader = ["<table>",
                        "<thead>",
                            "<tr>",
                                "<td>Loja</td>",
                                "<td>Ref</td>",
                                "<td>Tipo</td>",
                                "<td>Cód</td>",
                                "<td>Endereço</td>",
                                "<td>Bairro</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                            "</tr>",
                        "</thead>",
                        "<tbody></tbody>",
                    "</table>"].join("");

   _.Execute({ 'acao': 'gridLaudo', 'data': args, 'callback': function(resp) {

            var data = eval('(' + resp + ')'); //eu sei que isso é feio mas é só exemplo mesmo ;-)
            var tbody = $("#gridLaudo_" + instanceId).html(theader);
            jQuery.tmpl(template, data).appendTo("#gridLaudo_" + instanceId + " tbody");
        }
    });
Esse retorno é em base 7kb!

Espero que sirva!