Imprimir - CRUD MVC Desktop ou Tradicional - Ext JS 4 com PHP

http://www.extjs.com.br/forum/index.php?action=printpage;topic=5553.0

EXTJS - Comunidade brasileira da biblioteca EXTJS

Geral => Classificados => Tpico iniciado por: Fabio Jr. Policeno em Outubro 01, 2011, 16:38:39

Ttulo: CRUD MVC Desktop ou Tradicional - Ext JS 4 com PHP Enviado por: Fabio Jr. Policeno em Outubro 01, 2011, 16:38:39 CRUD (Desktop ou Menu Esquerdo) utilizando MVC com Ext JS 4 e PHP, ficou bem fcil e produtivo de se trabalhar com ele por motivo da parametrizao e dos AbstractClass. Voc constri aplicaes com muita produtividade e poucas linhas de cdigos, ocultando toda parte complexa de cdigos e ao mesmo tempo tornando flexvel para uma possvel alterao onde esta alterao afetar em todo o cdigo, mantendo o padro. Por exemplo, ao alterar algumas propriedades da grid, ou store, ser aplicada em toda aplicao, sem precisar estar alterando em vrios arquivos. O cdigo est bem estruturado e organizado, aumentado a flexibilidade e o entendimento da tecnologia j que o cdigo bem didtico. (http://www.brimg.info/uploads/4/021824755f.png) (http://www.brimg.info) (http://www.brimg.info/uploads/3/744cc78f6c.png) (http://www.brimg.info) Segue um exemplo para a criao da aplicao: Aplicao principal
Cdigo: Ext.Loader.setConfig({ paths : {'Abstracts': 'view/abstracts'}, enabled: true }); Ext.application({ name : 'CRUDMVC', appFolder : 'view', //pasta onde se encontra a app ExtJS(MVC) controllers: ['Modulo'], launch: function() { CRUDMVC.app = this; Ext.create('CRUDMVC.view.Main'); } });

Controller

Cdigo: Ext.define('CRUDMVC.controller.Cliente', { extend : 'Abstracts.Controller', form : 'clienteform', list : 'clientelist', titleEdit: 'Edio de Cliente', titleNew : 'Cadastro de Cliente', models : ['Cliente'], stores : ['Cliente'], views : [ 'cliente.List', 'cliente.Form' ], init: function() { this.control({ 'clientelist': { itemdblclick: this.edit }, 'clientelist button[action=edit]': { click: this.edit }, 'clientelist button[action=new]': { click: this.edit }, 'clientelist button[action=destroy]': { click: this.destroy }, 'clienteform button[action=save]': {

1 de 9

04/01/2012 09:43

Imprimir - CRUD MVC Desktop ou Tradicional - Ext JS 4 com PHP

http://www.extjs.com.br/forum/index.php?action=printpage;topic=5553.0

click: this.save } }); } });

Model

Cdigo: Ext.define('CRUDMVC.model.Cliente', { extend : 'Ext.data.Model', requires : ['Abstracts.Proxy'], idProperty: 'id', fields : [ {name: 'id', type: 'int'}, 'nome', 'endereco' ], proxy :{ type:'proxy', api : { read : 'controller/ClienteController.php?action=listCliente', create : 'controller/ClienteController.php?action=saveCliente', update : 'controller/ClienteController.php?action=saveCliente', destroy: 'controller/ClienteController.php?action=deleteClientes' } } });

Store

Cdigo: Ext.define('CRUDMVC.store.Cliente', { extend: 'Abstracts.Store', alias : 'widget.storecliente', model : 'CRUDMVC.model.Cliente' });

List

Cdigo: Ext.define('CRUDMVC.view.cliente.List' ,{ extend : 'Abstracts.List', alias : 'widget.clientelist', store : 'Cliente', columns : [{ header: 'Cdigo', dataIndex: 'id', flex: 1 },{ header: 'Nome', dataIndex: 'nome', flex: 1 },{ header: 'Endereo', dataIndex: 'endereco', flex: 1 }] });

Form

Cdigo: Ext.define('CRUDMVC.view.cliente.Form', { extend : 'Abstracts.Form', alias : 'widget.clienteform', fieldsForm: [{ name : 'id', fieldLabel: 'Cdigo', disabled : true },{ name : 'nome', fieldLabel: 'Nome', maxLength : 100 },{ name : 'endereco', fieldLabel: 'Endereo', maxLength : 100 }] });

Apenas com estes cdigos, voc criou sua aplicao de maneira rpida, a cada CRUD novo voc segue o mesmo conceito. Muito simples. No caso do desktop, todas as classes definidas no incio da aplicao, j sero

2 de 9

04/01/2012 09:43

Imprimir - CRUD MVC Desktop ou Tradicional - Ext JS 4 com PHP

http://www.extjs.com.br/forum/index.php?action=printpage;topic=5553.0

renderizadas automaticamente como cone na rea de trabalho, menu no start menu e boto de acesso rpido ao lado do boto iniciar. Atualizaes:

Se houver interesse nos CRUD's ou componentes ou alguma solicitao para criao de telas pelo Ext JS, favor entrar em contato para maiores detalhes: fabiojpoli@hotmail.com Abraos! ;) Ttulo: Re: CRUD MVC Desktop ou Tradicional - Ext JS 4 com PHP Enviado por: Fabio Jr. Policeno em Outubro 31, 2011, 07:27:59 Bom dia, o objetivo agora detalhar melhor o benefcio de cada funcionalidade (incluindo as novas), proporcionando a possibilidade de adquirir os componentes separadamente, incluindo um exemplo de como utiliz-lo. AbstractList
Cdigo: Ext.define('CRUDMVC.view.cliente.Lista' ,{ extend : 'AbstractList', alias : 'widget.clientelista', store : 'Cliente', columns : [{ header : 'Nome', dataIndex: 'nome' }, ...] });

Com este componente, sua grid necessita ter somente este cdigo:

AbstractList com campos relacionados de outra tabela Com esta funcionalidade, voc no precisa de um INNER JOIN na sua consulta para listar o valor relacionado, basta ter este cdigo na coluna da sua grid:
Cdigo: { header : 'Cidade', dataIndex: 'idCidade', renderer : Util.obterValorRelacionado(Ext.create('CRUDMVC.view.cidade.Combo')) }

AbstractList com AbstractFilter Sua grid continua assim:

Cdigo: Ext.define('CRUDMVC.view.cliente.Lista' ,{ extend : 'AbstractList', alias : 'widget.clientelista', store : 'Cliente', columns : [{ header : 'Nome', dataIndex: 'nome' }, ...] });

Os filtro sero adicionados automaticamente, cada um com seu tipo respectivo, sem voc precisar definir nada e na parte do php, ter 1 linha de cdigo para aplicar um filtro. AbstractList com AbstractGroup

3 de 9

04/01/2012 09:43

Imprimir - CRUD MVC Desktop ou Tradicional - Ext JS 4 com PHP

http://www.extjs.com.br/forum/index.php?action=printpage;topic=5553.0

Sua grid continua assim:

Cdigo: Ext.define('CRUDMVC.view.cliente.Lista' ,{ extend : 'AbstractList', alias : 'widget.clientelista', store : 'Cliente', columns : [{ header : 'Nome', dataIndex: 'nome' }, ...] });

O agrupamento estar disponvel automaticamente em todas as colunas da grid. AbstractList com AbstractFilter e AbstractGroup Sua grid ficar com o cdigo simples, como citado anteriormente:
Cdigo: Ext.define('CRUDMVC.view.cliente.Lista' ,{ extend : 'AbstractList', alias : 'widget.clientelista', store : 'Cliente', columns : [{ header : 'Nome', dataIndex: 'nome' }, ...] });

AbstractList com Filter, Group e campos relacionados de outra tabela A grid continuar como citado anteriormente, somente o filtro dever simplesmente ser definido desta forma na coluna:
Cdigo: { header : 'Cidade', dataIndex: 'idCidade', renderer : Util.obterValorRelacionado(Ext.create('CRUDMVC.view.cidade.Combo')), filter : { type : 'list', store : Ext.create('CRUDMVC.store.CidadeCombo'), labelField: 'nome' } }

AbstractForm Seu formulrio poder ser criado somente com este cdigo:
Cdigo: Ext.define('CRUDMVC.view.cliente.Formulario', { extend : 'AbstractForm', alias : 'widget.clienteformulario', camposFormulario: [{ name : 'Nome', fieldLabel: 'nome' }, ...] });

AbstractForm com campos relacionados de outra tabela Ficar como o item anterior, com diferena que haver uma combobox como um campo do formulrio. AbstractListDragDrop

4 de 9

04/01/2012 09:43

Imprimir - CRUD MVC Desktop ou Tradicional - Ext JS 4 com PHP

http://www.extjs.com.br/forum/index.php?action=printpage;topic=5553.0

Ao definir como item do seu formulrio este componente:

Cdigo: { xtype : 'listdragdrop', itemId : 'usuarioModulo', list : 'CRUDMVC.view.modulo.Lista', storeList : 'Espiral.store.Modulo', titleList1: 'Mdulos', titleList2: 'Mdulos do Usurio' }

Voc ter a interface com 2 grids drag and drop. utilizado por exemplo no formulrio do usurio, onde voc ter na primeira grid listados todos os mdulos disponveis no banco de dados e na outra grid os mdulos relacionados a este usurio, para relacionar novos mdulos a este usurio ou remover, basta selecionar os registros na lista e arrastar para a lista desejada, muito simples. AbstractForm com AbstractListDragDrop O item anterior aplicado no AbstractForm. AbstractForm com AbstractListDragDrop e campos relacionados de outra tabela Itens anteriores adicionados no AbstractForm. UploadImage Para um formulrio com upload de foto, por exemplo, voc s precisar definir uma box para exibir a imagem e o campo de upload precisar somente deste cdigo:
Cdigo: { xtype : 'uploadimage', urlUploadTempIE: 'cliente.php?action=uploadTempIE', itemIdboxImage : 'boxImage', name : 'foto', fieldLabel : 'Foto' }

As demais funcionalidades sero feitas por traz pelo componente, e inclui nestas funcionalidades pre visualizao da imagem, ou seja, ao selecionar uma imagem no computador do usurio, ele poder pre-visualizar esta imagem no formulario, antes de salvar o registro. O upload no lado do php simples, com apenas 1 linha de cdigo voc far este upload. AbstractForm com UploadImage Componente anterior includo no AbstractForm. AbstractForm com UploadImage, AbstractListDragDrop e campos relacionados de outra tabela AbstractForm com os componentes acima aplicados. MarkAllowBlank Basta definir o campo como allowBlank: false, que este ser marcado com uma tarja vermelha discreta para que o usurio j esteja ciente de quais campos ele ser obrigado a preencher antes mesmo de tentar salvar o formulrio. AbstractMessage

5 de 9

04/01/2012 09:43

Imprimir - CRUD MVC Desktop ou Tradicional - Ext JS 4 com PHP

http://www.extjs.com.br/forum/index.php?action=printpage;topic=5553.0

Com apenas este cdigo:

Cdigo: AbstractMsg.Msg.alert('Ateno', 'Preencha os campos corretamente', 'warning');

ou
Cdigo: AbstractMsg.Msg.alert('Sucesso', 'Registro cadastrado com sucesso', 'success');

ou
Cdigo: AbstractMsg.Msg.alert('Erro', 'Erro ao executar a operao', 'error');

ou etc, ... Voc exibe uma mensagem de alerta personalizada e bem usual. Esta mensagem ser exibida no topo/centro da aplicao por alguns segundos e depois ficar oculta sem que o usuario precise fecha-la. Menu dinmico criado a partir das permisses de determinado usurio O menu criado de acordo com as permisses do usurio, sero exibidos no menu somente os mdulos que o usurio dever acessar. Este menu ser criado de acordo com as informaes cadastradas no banco de dados. Alm dos itens acima, voc tem a opo de adquirir todos acima aplicado dentro de uma interface Menu esquerdo e/ou Desktop com desconto: Todos itens acima aplicados na interface Menu esquerdo. Todos itens acima aplicados na interface Desktop. Um ou mais itens acima aplicados na interface Menu esquerdo. Um ou mais itens acima aplicados na interface Desktop. Os demais arquivos, como model, store, controller, etc.. ficaro basicamente como postei acima(simples e com pouco cdigo) Na parte do servidor, nada ser esttico (com exceo do menu dinamico de acordo com as permisses do usurio, caso no seja adquirido, este nenu vir do php de forma esttica), tudo ser feito no php para funcionar com banco de dados, etc... como feito em uma aplicao real. Inclusive, apesar de no utilizar framework no php para facilitar o entendimento, para construir um novo CRUD, a parte do php ficou muito simples, somente com estes cdigos, seu backend estar funcionando: Model
Cdigo: <?php require_once 'AbstractModel.php'; class Cliente extends AbstractModel{ public $table = 'cliente'; public $id; public $nome; public $endereco; public $order = 'nome'; } ?>

Controller

Cdigo: <?php require_once 'AbstractController.php'; require_once '../model/Cliente.php'; class ClienteController extends AbstractController{ public $fieldSort = 'nome';

6 de 9

04/01/2012 09:43

Imprimir - CRUD MVC Desktop ou Tradicional - Ext JS 4 com PHP

http://www.extjs.com.br/forum/index.php?action=printpage;topic=5553.0

public function save(){ $this->record = json_decode(Util::getVar('rows')); # seta atributos $this->model->id = $this->record->id; $this->model->nome = $this->record->nome; $this->model->endereco = $this->record->endereco; parent::save(); } } # faz a instancia do objeto para acessar o construtor e executar a acao escolhida new ClienteController(new Cliente()); ?>

Agradeo a ateno. Abraos! Ttulo: Re: CRUD MVC Desktop ou Tradicional - Ext JS 4 com PHP Enviado por: Fabio Jr. Policeno em Novembro 21, 2011, 09:53:31 Houve melhorias na Model e na Controller, por exemplo, a Controller diminuiu disso:
Cdigo: Ext.define('CRUDMVC.controller.Cliente', { extend : 'Abstracts.Controller', form : 'clienteform', list : 'clientelist', titleEdit: 'Edio de Cliente', titleNew : 'Cadastro de Cliente', models : ['Cliente'], stores : ['Cliente'], views : [ 'cliente.List', 'cliente.Form' ],

init: function() { this.control({ 'clientelist': { itemdblclick: this.edit }, 'clientelist button[action=edit]': { click: this.edit }, 'clientelist button[action=new]': { click: this.edit }, 'clientelist button[action=destroy]': { click: this.destroy }, 'clienteform button[action=save]': { click: this.save } }); } });

Para isso:

Cdigo: Ext.define('CRUDMVC.controller.Cliente', { extend : 'Abstracts.Controller', form : 'clienteform', list : 'clientelist', titleEdit: 'Edio de Cliente', titleNew : 'Cadastro de Cliente', models : ['Cliente'], stores : ['Cliente'], views : [ 'cliente.List', 'cliente.Form' ] });

Em resumo, o cdigo para gerar o novo CRUD ser: Aplicao principal

Cdigo: Ext.Loader.setConfig({

7 de 9

04/01/2012 09:43

Imprimir - CRUD MVC Desktop ou Tradicional - Ext JS 4 com PHP

http://www.extjs.com.br/forum/index.php?action=printpage;topic=5553.0

paths : {'Abstracts': 'view/abstracts'}, enabled: true }); Ext.application({ name : 'CRUDMVC', appFolder : 'view', //pasta onde se encontra a app ExtJS(MVC) controllers: ['Modulo'], launch: function() { CRUDMVC.app = this; Ext.create('CRUDMVC.view.Main'); } });

Controller

Cdigo: Ext.define('CRUDMVC.controller.Cliente', { extend : 'Abstracts.Controller', form : 'clienteform', list : 'clientelist', titleEdit: 'Edio de Cliente', titleNew : 'Cadastro de Cliente', models : ['Cliente'], stores : ['Cliente'], views : [ 'cliente.List', 'cliente.Form' ] });

Model

Cdigo: Ext.define('CRUDMVC.model.Cliente', { extend : 'Ext.data.Model', requires : ['Abstracts.Proxy'], idProperty: 'id', fields : [ {name: 'id', type: 'int'}, 'nome', 'endereco' ], proxy :{ type :'proxy', modulo: 'Cliente' } });

Store

Cdigo: Ext.define('CRUDMVC.store.Cliente', { extend: 'Abstracts.Store', model : 'CRUDMVC.model.Cliente' });

List

Cdigo: Ext.define('CRUDMVC.view.cliente.List' ,{ extend : 'Abstracts.List', alias : 'widget.clientelist', store : 'Cliente', columns : [{ header: 'Cdigo', dataIndex: 'id' },{ header: 'Nome', dataIndex: 'nome' },{ header: 'Endereo', dataIndex: 'endereco' }] });

Form

Cdigo: Ext.define('CRUDMVC.view.cliente.Form', { extend : 'Abstracts.Form', alias : 'widget.clienteform', fieldsForm: [{ name : 'id', fieldLabel: 'Cdigo',

8 de 9

04/01/2012 09:43

Imprimir - CRUD MVC Desktop ou Tradicional - Ext JS 4 com PHP

http://www.extjs.com.br/forum/index.php?action=printpage;topic=5553.0

disabled : true },{ name : 'nome', fieldLabel: 'Nome', maxLength : 100 },{ name : 'endereco', fieldLabel: 'Endereo', maxLength : 100 }] });

Abraos! Ttulo: Re: CRUD MVC Desktop ou Tradicional - Ext JS 4 com PHP Enviado por: Fabio Jr. Policeno em Dezembro 01, 2011, 09:02:59 Novo componente criado: Gerenciador de imagens. Um plugin onde pode ser fixado em qualquer parte do seu sistema, em formulrios, listas, editor html, etc. (http://www.brimg.info/uploads/7/fe0acf524b.png)
Powered by SMF 1.1.11 | SMF 2006-2009, Simple Machines LLC

9 de 9

04/01/2012 09:43