Ir para conteúdo


Foto

CRUD PHP - MVC Ext JS 4


  • Por favor, faça o login para responder
43 respostas neste tópico

#21 vcardins

vcardins

    Novato

  • Membros
  • PipPip
  • 12 posts

Postado 09 May 2011 - 12:39

Meu unico problema no momento é que o controller não está respondendo pelos eventos. Ao clicar no grid ou nos botões de ação nada acontece, verifico do Dev Tools e nenhum erro é gerado. Será que é alguma referência que estou colocando errado ?

Por outro lado, sei que o controller está sendo carregado em função do código a seguir: A função this.onPanelRendered está sendo chamada, porém 4 vezes ... :S
init: function() {
        
        this.control({
        	// evento duplo click na tela principal(viewport) --> usuariolista(grid)
            'viewport > panel': {
                render  : this.onPanelRendered
            },            
        	'usergrid': {
                itemdblclick: this.edit
            },
            // evento click no botao (definido com action: add) da grid definida como usuariolista
            'usergrid button[action=add]': {
                click: this.edit
            },
            // evento click no botao (definido com action: del) da grid definida como usuariolista
            'usergrid button[action=del]': {
                click: this.del
            },
            // evento click no botao (definido com action: save) do formulario definido como usuarioedicao
            'usergrid button[action=save]': {
                click: this.save
            }
        });
            
    },
    onPanelRendered: function() {
        console.log('The panel was rendered');
    },   


#22 vcardins

vcardins

    Novato

  • Membros
  • PipPip
  • 12 posts

Postado 09 May 2011 - 14:34

Fábio, muito obrigado pela atenção. Todos os problemas resolvidos.
A questão foram as referências aos alias das views e forms, verifiquei tudo e está funcionando perfeitamente.

Quando finalizar irei postar o exemplo completo com validação de usuário e troca de idioma !!

#23 Fabio Jr. Policeno

Fabio Jr. Policeno

    Member Avançado

  • Expert User
  • 2933 posts
  • LocationCuritiba - PR

Postado 09 May 2011 - 14:43

Fábio, muito obrigado pela atenção. Todos os problemas resolvidos.
A questão foram as referências aos alias das views e forms, verifiquei tudo e está funcionando perfeitamente.

Quando finalizar irei postar o exemplo completo com validação de usuário e troca de idioma !!


Ótimo, seu exemplo será muito bem vindo, ficaremos no aguardo. Abraços!
Produtos/Serviços Ext JS
Porque dEle, por Ele, para Ele são todas as coisas

#24 artlinux

artlinux

    Member Avançado

  • Membros
  • PipPipPip
  • 43 posts
  • LocationSalvador

Postado 23 May 2011 - 18:18

Muito bom! Parabéns!

... mas as vezes fico completamente perdido com os exemplos do Ext JS 4 (e no 3 tbém ficava).... A definição do desktop é feita de uma forma e este exemplo de outra.... Qual utilizar? Qual a "melhor prática"? Confesso que não entendo muito do Ext JS.... Já fiz algumas coisas, mas com "pedaços de códigos" e muitas tentativas.... Neste caso.... como juntar o exemplo do desktop com este? ??? O desktop "começa" com "Ext.define" e este, com "Ext.application"....  ??? ???  :-\  :'(

#25 artlinux

artlinux

    Member Avançado

  • Membros
  • PipPipPip
  • 43 posts
  • LocationSalvador

Postado 24 May 2011 - 19:12

Saudações!

Estive a fazer alguns testes acerca de "Ext.define" e Ext.application" ao longo do dia de hoje, entre uma compilação ou outra do velho amigo COBOL, e consegui "mesclar" as duas coisas (retirando o viewport, é claro). Funciona.... mas.... carrega automaticamente as grids e isso não é nada bom....  :(

Abraços

#26 André Medeiros

André Medeiros

    Member Avançado

  • Membros
  • PipPipPip
  • 149 posts
  • LocationSão Paulo

Postado 02 June 2011 - 21:25

Ola Pessoal !

Parabéns Fábio pelo exemplo, se me permite usar seu exemplo para esclarecer uma dúvida.
Já há algum tempo tenho utilizado MVC para desenvolver em outras linguagens, conheço pouco ainda de ExtJs.
Tirando como base o seu MVC, segue as seguintes alterações:

Mudei o controlador e view usuario para menu, no arquivo /view/menu/menu.js deixei assim
tbar :[{
    	text: 'Usuarios',
    	action: 'caduser' // action identificada para executar na camada controller
    },{
    	text: 'Grupo',
    	action: 'cadgrupo'
    }],

No arquivo /controller/menu.js deixei assim

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

Ext.define('MVC.controller.Menu', {
	extend: 'Ext.app.Controller',

	views: [
        'menu.Menu'
    ],
    
	refs: [{
		ref: 'menuMenu',
        selector: 'menumenu'
	}],
    
	init: function() {
        this.control({
            // evento click no botao (definido com action: incluir) da grid definida como usuariolista
            'menuMenu button[action=caduser]': {
                click: function(){
                    Ext.MessageBox.alert('Aviso', 'Clicou no usuários');
                }
            },
            // evento click no botao (definido com action: excluir) da grid definida como usuariolista
            'menuMenu button[action=cadgrupo]': {
                click: function(){
                    Ext.MessageBox.alert('Aviso', 'Clicou no grupo');
                }
            }
        });
    }
    
});

Mantive seus comentários para facilitar a localização no código.
O que eu gostaria de saber e, não faço idéia por onde começar utilizando o conceito MVC. Como devo proceder para chamar um grid/controlador na região central do viewport usando MVC ?
Poderia me dar um exemplo simples apenas de uma janela sendo chamada pelo menu e reinderizada na região central do viewport

Segue também a mudança que fiz no index.js

Ext.Loader.setConfig({enabled: true});
// Definições da aplicação
Ext.application({
    name: 'MVC', // nome da aplicação
    appFolder: 'extview', // pasta da aplicação (pasta onde está a estrutura MVC do extjs)

    controllers: [
        'Usuario', // Nome do controller utilizado na aplicação
        'Menu'
    ],

    // Função chamada após o carregamento completo da página
    launch: function() {
    	// Cria o componente principal da aplicação
        Ext.create('Ext.Viewport', {
            layout: 'border',
            defaults: {
                //frame: true,
                bodyStyle: 'padding: 5px'  
            }, 
            // Item do viewport, neste caso é a grid de lista de usuários
            items: [{
                region: 'north',
                bodyStyle: 'padding: 0px',
                margins: '10 10 10 10',
                title : 'Titulo do sistema',
                items: [{
                    xtype: 'menuMenu' // Definido no alias em view/menu/Menu.js
    			}]
			},{
                region: 'west',
                html: 'Oeste',
                width: 150,
                margins: '0 10 0 10',
                collapsible: true
			},{
                region: 'center'
			},{
                region: 'east',
                html: 'leste',
                width: 150,
                margins: '0 10 0 10',
                collapsible: true
			},{
                region: 'south',
                html: 'sul',
                height: 100,
                margins: '10 10 10 10',
                collapsible: true
			}]
        });
    }
});

Abraços a todos
Deus coopera em tudo para o bem daqueles que o amam Rm 8:28

#27 mineirim-bh

mineirim-bh

    Iniciante

  • Membros
  • Pip
  • 5 posts
  • LocationBelo Horizonte

Postado 04 June 2011 - 20:00

almp1

Primeiro vc precisa alterar o seu viewport para criar um Panel adicional(ou outro container), com layout fit no region center conforme segue:
{
      region: 'center',
      xtype: 'container',
      region: 'center',
      layout: 'fit',
      items :{xtype : 'panel',layout:'fit',id:'ctnCentral'}
}
É neste Panel que você deverá inserir as suas views.
Isto se deve à uma limitação do BorderLayout, que não permite a adição ou remoção de componentes diretamente nos containers gerenciados por ele.
http://www.objis.com...ner.Border.html

Agora crie a function responsável por carregar o controller:
loadController : function(controllername){
         var controller = this.getController(controllername),
               view = this.getView(controller.views[0]).create(),
               ctnCentral = Ext.getCmp('ctnCentral');
        controller.init();
        //remove a view atualmente no container...
        ctnCentral.remove(0);
        // e adiciona a nova view
        ctnCentral.add(view);
    }

E altere o seu código para chamar a function:
        'menuMenu button[action=caduser]': {
                click: function(){
                   this.loadController('nomecontroller');
                }
        }


Att,

"Ego sum Alpha et Omega, principium et finis, dicit Dominus Deus, qui est et qui erat et qui venturus est Omnipotens"

#28 André Medeiros

André Medeiros

    Member Avançado

  • Membros
  • PipPipPip
  • 149 posts
  • LocationSão Paulo

Postado 06 June 2011 - 11:28

Olá amigo mineirim  :D,

Muito Obrigado por sua ajuda, deu tudo certim !

fiz uma adaptação para abrir em nova aba conforme o código abaixo.


alterado no controlador do menu
        'menuMenu button[action=caduser]': {
                click: this.abreAba
            },


//adicionado funcao
  abreAba: function(button){
                		
        var titulo = button.text;		
        
        var novaAba = tabPanelCentral.items.findBy(
            function( aba )
            { 
                return aba.title === titulo; 
            }
        ); 
    
  
		// cria nova aba no centro da aplicação
		if(!novaAba){
			novaAba = tabPanelCentral.add
			({
                               var controller = this.getController(button.eXtype),
                                view = this.getView(controller.views[0]).create(),
                                layout: 'fit',
				title : titulo
			});
		}
		
		tabPanelCentral.setActiveTab(novaAba);
                           
    }    

adicionado no index.js

var tabPanelCentral = new Ext.TabPanel({
 	region		: 'center',
	enableTabScroll: true,
	activeTab	: 0, 
	defaults	: {closable: true},
	bodyStyle	: 'padding:0px;',
	// Pagina principal inicial
	items		: [{
		closable	: true
	}]
});



Abraços
Deus coopera em tudo para o bem daqueles que o amam Rm 8:28

#29 leodg

leodg

    Iniciante

  • Membros
  • Pip
  • 3 posts

Postado 04 August 2011 - 21:28

Parabens Fabio, muito bom, vai me ajuda muito...
Seguinte postei uma duvida neste topico => http://forum.extjs.c...hp?topic=5325.0
se poder me da uma ajuda, aguardo

#30 Felipe Duardo

Felipe Duardo

    Novato

  • Membros
  • PipPip
  • 13 posts

Postado 02 September 2011 - 12:20

legal baxei seu exemplo aqui, pois estou fazendo um passo a passo de MVC com extjs
e ja no primeiro passo, tropecei e dei de cara no chao...

anexei a estrura inicial para do List apenas mas nao aparece nada na minha
tela, ja revi varias vezes o modelo mas não sei o que pode ser, estou começando
a desconfiar de alguma config no meu server (apache, via xampp)...

se pude dar um help muito grato, é a estrutura bem básica...

#31 Daniel Schmitz

Daniel Schmitz

    Member Avançado

  • Membros
  • PipPipPip
  • 458 posts

Postado 10 September 2011 - 09:14

oi,

só uma dúvidazinha :)

se você criou um ViewPort no "launch: function()", em teoria você não precisa do Viewport.js lá na pasta view/view ....

Nao to querendo ser chato nao :) só pra saber se eu entendi mesmo essa arquitetura....


Confie na API do EXT, ela é a sua melhor amiga: http://docs.sencha.com/ext-js/

#32 Fabio Jr. Policeno

Fabio Jr. Policeno

    Member Avançado

  • Expert User
  • 2933 posts
  • LocationCuritiba - PR

Postado 10 September 2011 - 10:22

isso mesmo, não e obrigatório, só segui o exemplo da documentação. Obrigado pela observação.
Produtos/Serviços Ext JS
Porque dEle, por Ele, para Ele são todas as coisas

#33 Daltox

Daltox

    Novato

  • Membros
  • PipPip
  • 21 posts
  • LocationValparaíso de Goiás

Postado 17 November 2011 - 14:34

Olá Fabio Jr. Policeno,

Baixei o seu exemplo e encontrei um pequeno equívoco, no arquivos .SQL o nome da tabela está como "Usuarios" e no arquivo "model/Usuarios" está aparecendo assim
private $NM_TABELA = 'usuarios';
fato que apenas precisa trocar o u pelo U, fora isto, parabéns pelo exemplo.  8)

#34 Fabio Jr. Policeno

Fabio Jr. Policeno

    Member Avançado

  • Expert User
  • 2933 posts
  • LocationCuritiba - PR

Postado 17 November 2011 - 14:38

Olá Daltox, seja bem vindo ao fórum, agradeço pela observação.

Dê uma olhada neste exemplo que está bem mais elaborado ;)

http://forum.extjs.c...hp?topic=5553.0

Abs!
Produtos/Serviços Ext JS
Porque dEle, por Ele, para Ele são todas as coisas

#35 vcardins

vcardins

    Novato

  • Membros
  • PipPip
  • 12 posts

Postado 17 November 2011 - 15:39

Olá Fábio, tudo bem? Acabei me ausentando por uns tempos por força de outros projetos mas agora estou de volta com força total ;).
O desafio agora é desenvolver um CMS com: ExtJs 4 MVC, Oracle SP, .Net 4 MVC3 Razor (backend).

Continuo usando como base seu exemplo inicial, mas estou tendo um problema de "design" que acredito que seja um bug do Ext.
Carrego o menu - Trepanel Accordion - dinamicamente, de acordo com o perfil do usuário, o Json é gerado corretamente, porém da segun seção em diante só aparece cortado, com apenas 40px. Procurei no forum da sencha e está reportado sim como bug e até o momento não vi respostas concretas.

Alguém já se deparou com a situação? Como resolveram? Algum workaround ou partiram para uma solução alternativa?
As imagens em anexo ilustram o problema.

Obs. : Minha idéia é criar um front-end único, com padrão de comunicação Json e chamadas REST de arquitetura bem definida e que funcione com qualquer linguagem de backend que implemente MVC / REST. Quem tiver interesse em desenvolver a idéia ...

Abraço a comunidade !

#36 victorjoseh

victorjoseh

    Iniciante

  • Membros
  • Pip
  • 6 posts

Postado 14 December 2011 - 17:04

Olá amigo mineirim  :D,

Muito Obrigado por sua ajuda, deu tudo certim !

fiz uma adaptação para abrir em nova aba conforme o código abaixo.


alterado no controlador do menu

        'menuMenu button[action=caduser]': {
                click: this.abreAba
            },


//adicionado funcao
  abreAba: function(button){
                		
        var titulo = button.text;		
        
        var novaAba = tabPanelCentral.items.findBy(
            function( aba )
            { 
                return aba.title === titulo; 
            }
        ); 
    
  
		// cria nova aba no centro da aplicação
		if(!novaAba){
			novaAba = tabPanelCentral.add
			({
                               var controller = this.getController(button.eXtype),
                                view = this.getView(controller.views[0]).create(),
                                layout: 'fit',
				title : titulo
			});
		}
		
		tabPanelCentral.setActiveTab(novaAba);
                           
    }    

adicionado no index.js

var tabPanelCentral = new Ext.TabPanel({
 	region		: 'center',
	enableTabScroll: true,
	activeTab	: 0, 
	defaults	: {closable: true},
	bodyStyle	: 'padding:0px;',
	// Pagina principal inicial
	items		: [{
		closable	: true
	}]
});



Abraços


teria como vc disponibilidar o exemplo que voce criou? pelo menos a parte do menu, pois estou com uma dificuldade tremenda de criar um layout para o sistema, a parte do CRUD ta blz, o problema eh criar menus e etc.

#37 alvaro.brasilia

alvaro.brasilia

    Iniciante

  • Membros
  • Pip
  • 1 posts

Postado 03 February 2012 - 14:54

Estou tendo uma grande dificuldade em inserir o LiveSearchGridPanel em um CRUD MVC, sem seguir o pattern funciona tranquilamente e eu inseria da seguinte forma:

            ...
            ...
var gridCliente = Ext.create('Ext.ux.LiveSearchGridPanel', {
			store: store,
            columns: [
            ...        
            ...
            ...

Minha dúvida é onde e como eu deve utilizar esse componente tendo em vista que na extrutura MVC meu grid é criado da seguinte forma:


            ...
            ...
    layout: 'border',
    items: [
        {
            region: 'center',
            border: false,
            xtype: 'grid',
            store: 'GridDemo',
            id:'grid-demo',
            columns: [
            ...
            ...
            ...

Tentei inserir o nome do componente ali no xtype mas não rola, retorna esse erro no console do chrome no arquivo ext-all.js e a aplicação não carrega.

Uncaught TypeError: Cannot call method 'substring' of undefined


Segue código do Grid que eu gostaria de inserir a LiveSearchGridPanel, ou qualquer outro tipo de busca que funcione no extjs 4 MVC.

Ext.define('motaDesktop.view.griddemo.GridDemoList', {
	extend: 'Ext.window.Window',
	
	alias: 'widget.userlist',

    requires: [
        'Ext.data.ArrayStore',
        'Ext.util.Format',
        'Ext.grid.Panel',
        'Ext.grid.RowNumberer',
		'Ext.ux.LiveSearchGridPanel',
		'Ext.ux.GridSearch',
		'Ext.ux.TextMaskPlugin'
    ],

	widgetName:'userlist',
    id:'grid-win',
    title:'Clientes',
    width:740,
    height:480,
    iconCls: 'icon-clientes',
    animCollapse:false,
    constrainHeader:true,
    stateful: false,
    isWindow: true, 
    constrainHeader: true,
    minimizable: true,
    maximizable: true,
    hideMode: 'offsets',    
    showInTaskBar:true,
    layout: 'border',
    items: [
        {
			region: 'center',
            border: false,
            xtype: 'grid',
            store: 'GridDemo',
            id:'grid-demo',
            columns: [
                {xtype:'rownumberer',width:30},
                {
    	            text: "Nome",
					flex: 1,
            	    dataIndex: 'EmpNome'
	            },{
    	            text: "Email",
					flex: 1,
            	    dataIndex: 'EmpEmail'
	            },{
					header: "Telefone",
    	            text: "Telefone",
					width: 86,
            	    dataIndex: 'EmpFone_Res'/*,
					renderer: Ext.util.Format.maskRenderer('(99) 9999-9999')*/
	            }
            ]
        },{
			id: 'detailPanel',
            region: 'east',
			title: 'Detalhes',
	        width: 200,
    	    split: true,
        	bodyPadding: 7,
			collapsible: true,
			collapsed: true,
            html: 'Selecione algum cliente ao lado para exibir os detalhes.'
   		}
    ],
    
    tbar:[{
    	text: 'Incluir',
    	action: 'incluir', // action identificada para executar na camada controller
		tooltip:'Cadastrar um novo cliente.',
		icon   : 'client/resources/images/add.png' 
    },{
    	text: 'Excluir',
    	action: 'excluir',
		tooltip:'Excluir o cliente.',
		icon   : 'client/resources/images/delete.png'
    }
     ],
	 // Paginação
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: 'GridDemo',
        dock: 'bottom',
        displayInfo: true
    }],
                

    init : function(){
        this.launcher = {
            text: 'Clientes',
            iconCls:'icon-clientes',
            handler : this.createWindow,
            scope: this
        };
    },


	createWindow : function(){
        var desktop = this.app.getDesktop();
        var win = desktop.attachWindow(this);
        return win;
    }
 


});


Detalhe, a aplicação está no estilo Desktop.

Obrigado.

#38 ncaldas

ncaldas

    Iniciante

  • Membros
  • Pip
  • 2 posts
  • LocationMANAUS/AM

Postado 11 February 2012 - 01:58

Obrigado pelo excelente exemplo, só uma dúvida instalei no localhost o banco e funcionou beleza mas no servidor remoto mysql11.redehost.com.br não vai de jeto nenhum, tem algo para ser configurado no EXT JS 4 para funcionar ?

#39 betolima

betolima

    Novato

  • Membros
  • PipPip
  • 19 posts

Postado 08 March 2012 - 13:25

olá vcardins por acaso vc já tem uma demo pra disponibilizar pro pessoal baixar e estudar?
mesmo que sendo algo basico
grato

#40 jhonatan.morais

jhonatan.morais

    Iniciante

  • Membros
  • Pip
  • 5 posts

Postado 27 March 2012 - 10:02

Pessoal eu tenho algumas duvidas sobre o codigo do extjs... poderiam me ajudar?

1 - Pra que serve a propriedade "refs" do arquivo "Usuarios.js"?

refs: [{
		ref: 'usuariosPanel',
        selector: 'panel'
	},{
		ref:'usuarioLista', 
		selector:'usuariolista'
	}],

2 - esta trata sobre em quem momento da função "salvarUsuario" do controller "Usuario.js" o Ext coloca os parametros do form na variavel $_POST para que o php posa recebe-la?
é claro que o ext faz isso implicitamente... mas eu gostaria de ouvir alguma explicação sobre isso tem como?

segue os codigos:

function salvarUsuario:
// Função para salvar os registros do usuário
    salvarUsuario: function(button) {
        var win    = button.up('window'), // recupera um item acima(pai) do button do tipo window
        	form   = win.down('form').getForm(), // recupera item abaixo(filho) da window do tipo form
			idUsuario = form.getRecord() ? form.getRecord().get('id') : 0;
			
	    if (form.isValid()) {
            form.submit({
            	scope: this,
            	url: 'include/usuariosAction.php?action=cadastrarUsuario',
            	params: {id: idUsuario},
                success: function(form, action) {
                   Ext.Msg.alert('Sucesso', action.result.msg);
                   win.close();
                   this.getUsuariosStore().load();
                },
                failure: function(form, action) {
                    Ext.Msg.alert('Erro', action.result.msg);
                }
            });
        }
		
    }

metodo que recebe os valores do form no php:

public function cadastrarUsuario(){
		
		# instancia classe
		$objUsuarios = new Usuarios();
		
		# seta atributos
		$objUsuarios->setId((int) getVar('id'));
		$objUsuarios->setNome(utf8_decode(getVar('nome')));		
		$objUsuarios->setEmail(utf8_decode(getVar('email')));		
		
		if($objUsuarios->usuarioExiste()){
			$msg = 'Usuario já cadastrado.';
			$usuarioInserido = false;
		}
		else{
			# se foi recuperado id, ser� atualiza��o de um registro existente
			if($objUsuarios->getId()){
				$usuarioInserido = $objUsuarios->update();
			
				$msg = $usuarioInserido ? 'Usuario editado com sucesso.' : 'Erro ao editar Usuario.';
			}	
			# sen�o � inser��o de um novo registro
			else{
				$usuarioInserido = $objUsuarios->insert();
				$msg = $usuarioInserido ? 'Usuario cadastrado com sucesso.' : 'Erro ao cadastrar Usuario.';
			}
		}
		
		# retorna o resultado da execu��o do SQL
		echo json_encode(array(
			"success" => $usuarioInserido,
			"msg" => $msg
		));
								
	}



3 - O que faz o parametro " scope: this, " setado na function "salvarUsuario" do controller "Usuario.js"?


bom... é isso pessoal.. muito obrigado!





0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos