PDA

View Full Version : Abstract CRUD - Ext JS 4 MVC



fabio.policeno
29 Sep 2012, 11:27 AM
Hello guys,


I would like to share a special CRUD ;D


This is in MVC CRUD in both Ext JS as part of the PHP (native) and the best is that you are using abstract classes


I tried to apply the best practices possible, leave the code leaner / short and practical as possible, simplifying abstract but seeking to obtain the maximum productivity in development.


This was done in PHP, but of course, the part of Ext JS can be perfectly applied to other languages ??backend, requiring only change the url's in AbstractProxy and ready.


CRUD features:
- Free latest version of Ext JS (4.1.1a)
- Includes scripts to package the project for production
- Part of the totally abstract PHP
- Part of the Ext JS completely abstract
- Using the best possible practices recommended by Sencha
- Friendly Layout
- Includes menu, opening the modules in tabs
- Accompany ux Ext.ux.Alert (http://www.sencha.com/forum/showthread.php?244040-Ext.ux.Alert-Ext-JS-4)


Below is some example code:
model(PHP)

<?php
require_once 'AbstractModel.php';


class Cliente extends AbstractModel{
public $table = 'cliente';
}
?>


controller(php)

<?php
require_once '../model/Cliente.php';
require_once 'AbstractController.php';


class ClienteController extends AbstractController {}
new ClienteController(new Cliente());


controller(Ext JS)

Ext.define('Simple.controller.Cliente', {
extend: 'Abstracts.Controller',
module: 'cliente',
models: ['Cliente'],
stores: ['Cliente'],
views : [
'cliente.Module',
'cliente.List',
'cliente.Form'
]
});


model (Ext JS)

Ext.define('Simple.model.Cliente', {
extend: 'Ext.data.Model',
proxy : {
type : 'abstractproxy',
module: 'cliente'
},
fields: [
{name: 'id', type: 'int'},
'nome',
'endereco'
]
});


store (Ext JS)

Ext.define('Simple.store.Cliente', {
extend: 'Ext.data.Store',
model : 'Simple.model.Cliente'
});


form (Ext JS)

Ext.define('Simple.view.cliente.Form', {
extend: 'Abstracts.Form',
alias : 'widget.clienteform',
items : [{
name : 'id',
fieldLabel: 'Id',
disabled : true
},{
name : 'nome',
fieldLabel: 'Nome',
maxLength : 100
},{
name : 'endereco',
fieldLabel: 'Endereco',
maxLength : 100
}]
});


list (Ext JS)

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



I found it interesting to share this personal look at the Ext JS with respect to productivity and organization and performance that can be reached with this fantastic framework and go now seeking advanced knowledge in this technology.


Demo online: http://policenosistemas.com.br/Simple
Download: http://www.4shared.com/get/XcGpciBI/Simple.html



Suggestions and improvements are always welcome.


Hugs!