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

Imprim Imprimir ir - CRU CRUD D MVC MVC Desk Desktop top ou Tradiciona Tradicionall - Ext Ext JS 4 com PHP

http://www. http://www.ex extjs.com tjs.com.br/foru .br/forum m/index.ph /index.php?act p?action= ion=print printpag page;t e;topic=55 opic=5553.0 53.0

EXTJS - Comunidad e brasileira da biblioteca EXTJS Geral => => Classificados Classificados => Tópico iniciado por: Fabio Fabio J r. Policeno em Outubro 01, 2011, 16:38:39

Desktop ou Tr adicional - Ext JS 4 com P HP Título: CRUD MVC Desktop 16:38:39 39 Enviado por: Fabio Jr. P oliceno em Outubr o 0 1, 2011, 16:38:

CRUD (Desktop ou Menu Esquerdo) utilizando MVC com Ext JS 4 e PHP, ficou bem fácil e produtivo de se trabalhar com ele por motivo da parametrização e dos AbstractClass. Você constrói aplicações com muita muita produtividade pr odutividade e poucas linhas linh as de códigos, ocultando ocultando toda parte complexa de códigos e ao mesmo tempo tornando flexível para uma possível alteração onde esta alteração afetará em todo o código, mantendo mantendo o padrão. Por exemplo, exe mplo, ao alterar algumas al gumas propriedades da da grid, ou store, será aplicada apli cada em toda aplicação, aplicação, sem precisar precisar estar alterando al terando em vários arquivos. arqui vos. O código está bem estrutu estruturado rado e organizado, organiz ado, aumentado a flexibilidade e o entendimento da tecnologia já que o código é bem didático. (http://www.brimg. (http://www.brimg.info/uploads/4/0218247 info/uploads/4/021824755f.png) 55f.png) (http://www.brimg. (http://www.brimg.info) info) (http://www.brimg. (http://www.brimg.info/uploads/3/744cc78f6c.png) info/uploads/3/744cc78f6c.png) (http://www.brimg.info) (http://www.brimg.info) Segue um exemplo exe mplo para a criação da aplicação: Aplicação principal Código:

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 Código:

Ext.define('CRUDMVC.controller.Cliente', { extend extend : 'Abstra 'Abstracts cts.Co .Contro ntrolle ller', r', form : 'c 'clienteform', list : 'clientelist', titleEdit: 'Edição 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]': {

1d 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 Código:

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

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

List

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

Form

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

Apenas com estes códigos, você criou sua aplicação de maneira rápida, a cada CRUD novo você segue o mesmo conceito. Muito simples. No caso do desktop, todas as classes definidas no início da aplicação, já serão

2d 9

04/01/2012 09 43



renderizadas automaticamente como ícone na área de trabalho, menu no start menu e botão de acesso rápido ao lado do botão iniciar. Atualizações: Se houver interesse nos CRUD's ou componentes ou alguma solicitação para criação de telas pelo Ext JS, favor entrar em contato para maiores detalhes: [email protected] Abraços! ;) Título: Re: CRUD MVC Desktop ou Tradicio nal - Ext JS 4 com PH P Enviado por: Fabio Jr. P oliceno em Outubr o 3 1, 2011, 07:27:59 Bom dia, o objetivo agora é detalhar melhor o benefício de cada funcionalidade (incluindo as novas), proporcionando a possibilidade de adquirir os componentes separadamente, incluindo um exemplo de como utilizá-lo. AbstractList

Com este componente, sua grid necessita ter somente este código:

Código:

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

AbstractLi st com campos relacionados de outra tabela

Com esta funcionalidade, você não precisa de um INNER JOIN na sua consulta para listar o valor relacionado, basta ter este código na coluna da sua grid: Código: { header : 'Cidade', dataIndex: 'idCidade', renderer : Util.obterValorRelacionado(Ext.create('CRUDMVC.view.cidade.Combo')) }

AbstractList com AbstractFilter

Sua grid continua assim: Código: Ext.define('CRUDMVC.view.cliente.Lista' ,{ extend : 'AbstractList', alias : 'widget.clientelista', store : 'Cliente', columns : [{ header : 'Nome', dataIndex: 'nome' }, ...] });

Os filtro serão adicionados automaticamente, cada um com seu tipo respectivo, sem você precisar definir nada e na parte do php, terá 1 linha de código para aplicar um filtro. AbstractList com AbstractGroup

d 9

04/01/2012 09 43



Sua grid continua assim: Código: Ext.define('CRUDMVC.view.cliente.Lista' ,{ extend : 'AbstractList', alias : 'widget.clientelista', store : 'Cliente', columns : [{ header : 'Nome', dataIndex: 'nome' }, ...] });

O agrupamento estará disponível automaticamente em todas as colunas da grid. Abstr actList com AbstractFilter e Abstr actGroup

Sua grid ficará com o código simples, como citado anteriormente: Código: Ext.define('CRUDMVC.view.cliente.Lista' ,{ extend : 'AbstractList', alias : 'widget.clientelista', store : 'Cliente', columns : [{ header : 'Nome', dataIndex: 'nome' }, ...] });

AbstractLis t com Filter, Group e campos relacionados d e outra tabela

A grid continuará como citado anteriormente, somente o filtro deverá simplesmente ser definido desta forma na coluna: Código: { 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 formulário poderá ser criado somente com este código: Código: Ext.define('CRUDMVC.view.cliente.Formulario', { extend : 'AbstractForm', alias : 'widget.clienteformulario', camposFormulario: [{ name : 'Nome', fieldLabel: 'nome' }, ...] });

Abstr actForm com campos relacionados de outra tabela

Ficará como o item anterior, com diferença que haverá uma combobox como um campo do formulário. AbstractListDragDrop

d 9

04/01/2012 09 43



Ao definir como item do seu formulário este componente: Código: { xtype : 'listdragdrop', itemId : 'usuarioModulo', list : 'CRUDMVC.view.modulo.Lista', storeList : 'Espiral.store.Modulo', titleList1: 'Módulos', titleList2: 'Módulos do Usuário' }

Você terá a interface com 2 grids drag and drop. É utilizado por exemplo no formulário do usuário, onde você terá na primeira grid listados todos os módulos disponíveis no banco de dados e na outra grid os módulos relacionados a este usuário, para relacionar novos módulos a este usuário 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. AbstractFor m com AbstractListDragDro p e campos relacionados de outra tabela

Itens anteriores adicionados no AbstractForm. UploadImage

Para um formulário com upload de foto, por exemplo, você só precisará definir uma box para exibir a imagem e o campo de upload precisará somente deste código: Código: { xtype : 'uploadimage', urlUploadTempIE: 'cliente.php?action=uploadTempIE', itemIdboxImage : 'boxImage', name : 'foto', fieldLabel : 'Foto' }

As demais funcionalidades serão feitas por traz pelo componente, e inclui nestas funcionalidades pre visualização da imagem, ou seja, ao selecionar uma imagem no computador do usuário, 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 código você fará este upload. AbstractForm com UploadImage

Componente anterior incluído no AbstractForm. Abstr actForm com UploadImage, AbstractLi stDragDrop 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 usuário já esteja ciente de quais campos ele será obrigado a preencher antes mesmo de tentar salvar o formulário. AbstractMessage

5d 9

04/01/2012 09 43



Com apenas este código: Código: AbstractMsg.Msg.alert('Atenção', 'Preencha os campos corretamente', 'warning');

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

ou Código: AbstractMsg.Msg.alert('Erro', 'Erro ao executar a operação', 'error');

ou etc, ... Você exibe uma mensagem de alerta personalizada e bem usual. Esta mensagem será exibida no topo/centro da aplicação por alguns segundos e depois ficará oculta sem que o usuario precise fecha-la. Menu dinâmico criado a partir das permissões de determinado usuário

O menu é criado de acordo com as permissões do usuário, serão exibidos no menu somente os módulos que o usuário deverá acessar. Este menu será criado de acordo com as informações cadastradas no banco de dados. Além dos itens acima, você tem a opção 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.. ficarão basicamente como postei acima(simples e com pouco código) Na parte do servidor, nada será estático (com exceção do menu dinamico de acordo com as permissões do usuário, caso não seja adquirido, este nenu virá do php de forma estática), tudo será feito no php para funcionar com banco de dados, etc... como é feito em uma aplicação real. Inclusive, apesar de não utilizar framework no php para facilitar o entendimento, para construir um novo CRUD, a parte do php ficou muito simples, somente com estes códigos, seu backend estará funcionando: Model Código:

Controller Código:

6d 9

04/01/2012 09 43



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()); ?>

Agradeço a atenção. Abraços! Título: Re: CRUD MVC Desktop ou Tradicio nal - Ext JS 4 com PH P Enviado por: Fabio Jr. P oliceno em No vembr o 21 , 2011, 09:53:31 Houve melhorias na Model e na Controller, por exemplo, a Controller diminuiu disso: Código:

Ext.define('CRUDMVC.controller.Cliente', { extend : 'Abstracts.Controller', form : 'clienteform', list : 'clientelist', titleEdit: 'Edição 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: Código:

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

Em resumo, o código para gerar o novo CRUD será: Aplicação principal Código:

Ext.Loader.setConfig({

7d 9

04/01/2012 09 43



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 Código:

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

Model Código:

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

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

List

Código: Ext.define('CRUDMVC.view.cliente.List' ,{ extend : 'Abstracts.List', alias : 'widget.clientelist', store : 'Cliente', columns : [{ header: 'Código', dataIndex: 'id' },{ header: 'Nome', dataIndex: 'nome' },{ header: 'Endereço', dataIndex: 'endereco' }] });

Form

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

8d 9

04/01/2012 09 43



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

Abraços! Título: Re: CRUD MVC Desktop ou Tradicio nal - Ext JS 4 com PH P Enviado por: Fabio Jr. P oliceno em Dezemb ro 01, 2011, 09:02:59 Novo componente criado: Gerenciador de imagens. Um plugin onde pode ser fixado em qualquer parte do seu sistema, em formulários, listas, editor html, etc. (http://www.brimg.info/uploads/7/fe0acf524b.png) Powered by SMF 1 .1.11 | SMF © 2006-2009, Simple Machines LLC

9d 9

04/01/2012 09 43

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

Recommend Documents