extjs grid nao carrega os dados

[junaooaks 3]

ola pessoal, estou iniciando com extjs 4, nao estou conseguindo carregar o grid com as informações do json retornado do PHP

 

o json do php me retorna assim:

{"data":
	[{"idempresa":"1",
	  "ie":"222222222",
	  "cnpj":"11111111111111",
	  "nomeEmpresa":null,
	  "nomeFantasia":"Eu sou a lenda",
	  "endereco":"aqui em casa",
	  "bairro":"CENTRO",
	  "cidade":"aqui",
	  "cep":"123456",
	  "uf":"MG",
	  "numero":"101",
	  "telefone":"33333333",
	  "celular":"33 44444444"}],
  "success":true,
  "total":"1"
}

 

app/controller/Empresa.js

Ext.require('Ext.window.MessageBox');

Ext.define('TESTE.controller.Empresa', {
    extend: 'Ext.app.Controller',
    stores: ['Empresas'],
    models: ['Empresa'], 
	
    views: [
    'empresa.List',
    'empresa.Edit'
    ],
    
    refs: [
    {
        ref:'empresaEdit', 
        selector:'empresaEdit'
    },
    {
        ref:'empresaList', 
        selector:'empresaList'
    }
    ],

    init: function() {
        this.control({
            'empresaList': {
                itemdblclick: this.edit
            },

            'empresaList button[action=insert]': {
                click: this.insert
            },
            
            'empresaList button[action=edit]': {
                click: this.edit
            },

            'empresaList button[action=destroy]': {
                click: this.destroy
            },
            
            'empresaList button[action=refresh]': {
                click: this.refresh
            },

            'empresaEdit button[action=save]': {
                click: this.save
            }
        });
    },
     disparandoNossoEvento: function(){
        console.log('Evento customizado detectado');
    },
    
    refresh: function(){
        this.getEmpresaList().store.load();
    },
    
    insert: function(btn, evt, opt) {
        var view = Ext.widget('empresaEdit');
        view.setTitle('Inserindo nova Empresa');
    },
    
    destroy: function() {
        
        var grid    = this.getEmpresaList(),
            records = grid.getSelectionModel().getSelection();

        if(records.length === 0){
            Ext.Msg.alert('Atenção', 'Nenhum registro selecionado');
            return false;
        }else{
            Ext.Msg.show({
                title : 'Confirmação',
                msg : 'Tem certeza que deseja deletar o(s) registro(s) selecionado(s)?',
                buttons : Ext.Msg.YESNO,
                icon : Ext.MessageBox.WARNING,
                scope : this,
                width : 450,
                fn : function(btn, ev){
                    if (btn == 'yes') {
                        var store = this.getEmpresaList().store;
                        store.remove(records);
                        this.getEmpresaList().store.sync();
                    }
                }
            });
        }
    },

    save: function(button) {	
        
        var win     = button.up('window'),
            form    = win.down('form').getForm(),
            id      = form.getRecord() ? form.getRecord().get('id') : 0;
        
        if (form.isValid()) {
            var record = form.getRecord(),
                values = form.getValues();

            if (record){
                if(record.data['id']){
                    record.set(values);
                }
            } else{
                var record = Ext.create('TESTE.model.Empresa');
                record.set(values);
                this.getEmpresaList().store.add(record);
            }

            win.close();
            this.getEmpresaList().store.sync();
        }else{
            Ext.ux.Msg.flash({
                msg: 'Ha campos preenchidos incorretamente',
                type: 'error'
            });
            
        }
        
    },
    
    edit: function(){
        
        var records = this.getEmpresaList().getSelectionModel().getSelection();    	
    	
        if(records.length === 1){
            var editWind = Ext.widget('empresaEdit');    	
            var editForm = editWind.down('form');
            var record = records[0];
            editForm.loadRecord(record);
        }else{
            return;
        }		
    }

});

app/model/Empresa.js

Ext.define('TESTE.model.Empresa', {
    extend: 'Ext.data.Model',
    fields: [
    {
        name: 'idempresa'
    }, 
    {
        name: 'ie'
    }, 
    {
        name: 'cnpj'
    }, 
    {
        name: 'nomeEmpresa'
    }, 
    {
        name: 'endereco'
    }, 
    {
        name: 'bairro'
    },
    {
        name: 'cidade'
    },
    {
        name: 'cep'
    },
    {
        name: 'uf'
    },
    {
        name: 'numero'
    },
    {
        name: 'telefone'
    },
    {
        name: 'celular'
    }
    ]
});

app/stores/Empresa.js

Ext.define('TESTE.store.Empresas', {
    extend: 'Ext.data.Store',
    model: 'TESTE.model.Empresa',
    autoLoad: false,
    remoteSort: false,
    pageSize: 35,
    autoLoad: {start: 0, limit: 35},
    proxy: {
        simpleSortMode: true,
        type: 'ajax',
        api: {
            read: 'php/Empresas.php?action=fetchAll',
            create: 'php/Empresas.php?action=insert',
            update: 'php/Empresas.php?action=update',
            destroy: 'php/Empresas.php?action=delete'
        },
        actionMethods: {
            read: 'POST',
            create: 'POST',
            update: 'POST',
            destroy: 'POST'
        },  
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        },
        writer: {
            type: 'json',
            writeAllFields: true,
            encode: true,
            root: 'data'
        },
        extraParams: { 
            start : 'start',   
            limit : 'limit',  
            sort : 'name',    
            dir : 'ASC', 
            total: 'total' 
        }, 
        listeners: {
            exception: function(proxy, response, operation){
                Ext.MessageBox.show({
                    title: 'REMOTE EXCEPTION',
                    msg: operation.getError(),
                    icon: Ext.MessageBox.ERROR,
                    buttons: Ext.Msg.OK
                });
            }
        }
    },
    listeners: {
        
        write: function(proxy, operation){
            
            var obj = Ext.decode(operation.response.responseText);
            
            if(obj.success){
                Ext.ux.Msg.flash({
                    msg: obj.message,
                    type: 'success'
                });
            }else{
                Ext.ux.Msg.flash({
                    msg: obj.message,
                    type: 'error'
                });
            }
        }
        
    }
    
});

app/view/empresa/G

Ext.define('TESTE.view.empresa.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.empresaList',
    store: 'Empresas',
    title: 'Lista de Empresas',
    selModel: { mode: 'MULTI' },
    columnLines: true,
    tbar: [
        {
            text: 'Incluir',
            action: 'insert',
            iconCls: 'add',
            itemId: 'insert'
            
        }
        ,{
            text: 'Editar',
            action: 'edit',
            iconCls: 'edit',
            itemId: 'edit',
            disabled: true
        }
        ,{
            text: 'Excluir',
            action: 'destroy',
            iconCls: 'delete',
            itemId: 'delete',
            disabled: true
        }
        ,{
            text: 'Refresh',
            action: 'refresh',
            iconCls: 'refresh',
            itemId: 'refresh'
        }
    ],
    columns: [
        {
            header: 'ID',
            dataIndex: 'idempresa',
            flex: 1
        },{
            header: 'IE',
            dataIndex: 'ie',
            flex: 1
        },{
            header: 'CNPJ',
            dataIndex: 'cnpj',
            flex: 1
        },{
            header: 'Nome Empresa',
            dataIndex: 'nomeEmpresa',
            flex: 1
        },{
            header: 'Nome Fantasia',
            dataIndex: 'nomeFantasia',
            flex: 1
        },{
            header: 'Endereço',
            dataIndex: 'endereco',
            flex: 1
        },{
            header: 'Bairro',
            dataIndex: 'bairro',
            flex: 1
        },{
            header: 'Cidade',
            dataIndex: 'cidade',
            flex: 1
        },{
            header: 'Cep',
            dataIndex: 'cep',
            flex: 1
        },{
            header: 'Uf',
            dataIndex: 'uf',
            flex: 1
        },{
            header: 'Numero',
            dataIndex: 'numero',
            flex: 1
        },{
            header: 'Telefone',
            dataIndex: 'telefone',
            flex: 1
        },{
            header: 'Celular',
            dataIndex: 'celular',
            flex: 1
        }
        
    ],
    dockedItems: [
        {
            xtype: 'pagingtoolbar',
            store: 'Empresas',
            dock: 'bottom',
            displayInfo: true
        }
    ],
    
    onRender: function(){
        this.store.load();
        this.callParent(arguments);
    }
}); 

 

 

rid

[William Bruno 1501]

qual a sua dúvida? oq acontece de errado ?

 

aparece algo no console de erros ?

[junaooaks 3]

bruno este e um problema nao apresenta erro no console, carrega ate o pagingtoolbar com a quantidade de retorno

 

so que os dados não são montando na tela

[William Bruno 1501]

coloque online isoladamente e poste um link aqui para que possamos debugar.

[junaooaks 3]

William esta aqui

http://200.195.48.6/teste/principal.php

[William Bruno 1501]

o retorno que eu vi aqui tá diferente cara:

{ 
            children: [
                    {
                        text:'Cadastro',
                        expanded: false,
                        children:[
                            {
                                text:'Dados da Empresa',
                                leaf: true,
                                xtypeClass: 'empresaList',
                                controllerName: 'Empresa'
                            }
                        ]
                    }
                   
                ]
            }

ou vc não tá retornando oq ele espera, ou o leitor para montar o grid q está errado.

[junaooaks 3]

o retorno json? nao apareceu?

 

o model fiz igual esta no banco de dados.

 

 

Bruno notou que registrou a quantidade de registro.

 

 

eu ainda não entendi o que você quis dizer? poderia ser mais especifico?

[William Bruno 1501]

no inicio do post, vc me disse q o retorno era uma coisa.

 

mas qndo acessei a tua url, o retorno foi outro.

 

 

não tem erro nisso ai ?

[junaooaks 3]

eu mudei o conteúdo do banco de dados para testa o json so para fazer um teste de cache, mas os campos continua o mesmo

[junaooaks 3]

a imagem estava ficando por cima do conteudo do grid

pessoal qual a forma ideal de colocar ima imagem background na regiao center, tentei carregar com css, nao deu certo

 

Ext.define('TESTE.view.Viewport', {
    extend: 'Ext.container.Viewport',
    title: 'TESTE',
    layout: 'border',
    itemId: 'viewPortPrincipal',
    items: [
    {
         xtype: 'image',
         id: 'header',
         region: 'north',
        //imagem da barra superior a esquerda
        src: 'resources/images/logo.png',
        height: 50
        
    },
    {
        region:'west',
        border: false,
        split: true,
        margins: '0 0 5 5',
        width: 230,
        minWidth: 150,
        maxWidth: 400,
        xtype: 'treepanel',
        title: 'Menu',
        rootVisible: false,
        autoScroll: true,
        collapsible: true,
        animate: true,
        useArrows: true,
        itemId: 'treePanelPrincipal',
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Expandir todos',
                iconCls: 'expand', 
                handler: function(){
                    this.up('#treePanelPrincipal').expandAll();
                }
            }, {
                text: 'Contrair todos',
                iconCls: 'collapse', 
                handler: function(){
                    this.up('#treePanelPrincipal').collapseAll();
                }
            }]
        }],
        listeners: {
            itemclick: function(view, record, item, index, evt, options) {
                if (record.get('leaf')) {
                  
                  var controller = TESTE.app.getController(record.raw['controllerName']);
                  controller.init();

                    var abaAberta = this.ownerCt.down('#tabCenter').items.findBy(function( aba ){
                        return aba.title === record.get('text');
                    });
                    
                    if(!abaAberta){
                        this.ownerCt.down('#tabCenter').add({
                            title: record.get('text') || 'Tela do sistema',
                            closable: true,
                            layout: 'fit',
                            autoDestroy: true,
                            items: {
                                xtype: record.raw['xtypeClass']
                            }
                        }).show();
                    }else{
                        this.ownerCt.down('#tabCenter').setActiveTab(abaAberta);
                    }
                    
                }
            }
        },
        store: Ext.create('Ext.data.TreeStore', {
            proxy: {
                type: 'ajax',
                url: 'php/Menu.php',
                noCache : false,
                actionMethods: {
                    read: 'POST'
                }
            }
        })
    }
    ,{
        xtype: 'tabpanel',
        region: 'center', 
        margins: '0 0 5 0',
        border: false,
        itemId: 'tabCenter',
        cls: imgFundo

    }/*,
    {
        xtype: 'image',
        
        //imagem de fundo
        src: 'resources/images/fundo.png'
        
      
    }*/
    ]
    
});