Olá, Pessoal
Bom ano para vocês.
Venho mostrar uma coisa que me deu muita dor de cabeça, um grid + subgrid , ou como preferir master + details, até achei umas soluções prontas do extjs (
Ext.ux.RowExpander ) mas o problema é que quando você quer utilizar as funções de digamos expandir todos os details por padrão, ele fica muito lento e não funciona corretamente .
Então achei uma solução
Ext.grid.feature.RowBody , uma particularidade gostei desse plugin poque pude aplicar a modelagem de hasmany ( um para muitos ) do model do Ext . Por padrão ele já abre o details do grid, e consegui melhorar drasticamente a performance do processamento do grid.
Em um projeto particular que precisava de uma visão de Pedidos de Compras com os Itens em master + details, acredito que foi a melhor solução com ExtJS 4 .
Veja abaixo a codificação
Classes
public class Item
{
public string NumPedido { get; set; }
public int NumItem { get; set; }
public string CodProduto { get; set; }
public string DescProduto { get; set; }
public double ValUnitario { get; set; }
public int Qtd { get; set; }
public double Valor { get; set; }
}
public class Pedido
{
#region >> SINGLETON <<
static readonly Pedido _instance = new Pedido();
static Pedido() { }
Pedido() { }
public static Pedido Instance
{
get
{
return _instance;
}
}
#endregion
public string NumPedido { get; set; }
public int CodCliente { get; set; }
public string NomCliente { get; set; }
public int Qtd { get; set; }
public double Valor { get; set; }
public List<Item> ListItens { get; set; }
public List<Pedido> List()
{
List<Pedido> _listPedido = new List<Pedido>();
Pedido _pedido = new Pedido();
_pedido.NumPedido = "1";
_pedido.Qtd = 10;
_pedido.Valor = 10.00;
_pedido.CodCliente = 1500;
_pedido.NomCliente = "João";
List<Item> _listItem = new List<Item>();
Item _item = new Item();
_item.NumPedido = "1";
_item.NumItem = 1;
_item.ValUnitario = 1.00;
_listItem.Add(_item);
_pedido.ListItens = _listItem;
_listPedido.Add(_pedido);
_pedido = new Pedido();
_pedido.NumPedido = "2";
_pedido.Qtd = 20;
_pedido.Valor = 20.00;
_pedido.CodCliente = 1505;
_pedido.NomCliente = "José";
_listItem = new List<Item>();
_item = new Item();
_item.NumPedido = "2";
_item.NumItem = 1;
_item.ValUnitario = 2.00;
_listItem.Add(_item);
_pedido.ListItens = _listItem;
_listPedido.Add(_pedido);
return _listPedido;
}
}
Controller
namespace aarvanilabExtJS4.Controllers
{
public class PedidoController : Controller
{
//
// GET: /Pedido/
public ActionResult Index()
{
return View();
}
public JsonResult List()
{
var _list = Models.Pedido.Instance.List();
return Json(new { total = _list.Count, data = _list.ToList() }, JsonRequestBehavior.AllowGet);
}
}
}
SCRIPT JAVASCRIPT
<script type="text/javascript">
//Definição dos Models
Ext.define('pedido', {
extend: 'Ext.data.Model',
fields: [ //Definição dos Campos do Pedido
{ name: 'NumPedido', type: 'string' },
{ name: 'CodCliente', type: 'string' },
{ name: 'NomCliente', type: 'string' },
{ name: 'Qtd', type: 'string' },
{ name: 'Valor', type: 'string' }
],
// Relacionamento Pedido - Item ( 1 X N )
hasMany: {
model: 'item',
name: 'ListItens'
}
});
Ext.define('item', {
extend: 'Ext.data.Model',
fields: [
//Definição dos Campos do Item
{ name: 'NumPedido', type: 'string' },
{ name: 'CodCliente', type: 'string' },
{ name: 'NomCliente', type: 'string' },
{ name: 'Qtd', type: 'string' },
{ name: 'Valor', type: 'string' },
{ name: 'NumItem', type: 'string' },
{ name: 'CodProduto', type: 'string' },
{ name: 'DescProduto', type: 'string' },
{ name: 'ValUnitario', type: 'string' }
] ,
// Relacionamento Item - Pedido ( 1 X 1 )
belongsTo: {
model: 'pedido',
name: 'mPedidos',
foreignKey: 'NumPedido'
},
hasOne: {
model: 'pedido',
name: 'mPedidos',
foreignKey: 'NumPedido',
getterName: 'getPedidos'
}
});
//Inicio da execução do SCRIPT
Ext.onReady(function () {
//Definição da Store
var store = Ext.create('Ext.data.Store', {
pageSize: 25,
model: 'pedido',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/Pedido/List',
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
},
listeners: {
exception: function (thisProxy, response, operation, options) {
alert(response.responseText);
}
}
}
});
//Definição da grid
var grid = new Ext.grid.Panel({
title: 'Grid',//Titulo
store: store,//Associar store + grid
renderTo: Ext.getBody(), // Aonde vai ser renderizado pode ser um id da div
features: [ //Ferramentas
{
ftype: 'rowbody', //Details da linha da grid
// Método para adicionar a tabela de details
getAdditionalData: function (data, idx, record, orig) {
var headerCt = this.view.headerCt
colspan = headerCt.getColumnCount();
var html = '';
html = '<div>' +
'<table border="1" >' + //Inicio da tabela em HTML
'<thead><tr>' + //Header da tabela
'<th style="width: 72px;" > Pedido </th>' +
'</tr></thead>';
// Listar os itens do Pedido
Ext.each(record.ListItensStore.data.items, function (chilrecord) {
html = html + '<tbody><tr>' +
'<td >' + chilrecord.data.NumPedido + ' </td>' +
'</tr></tbody>';
});
//Fim da tabela em HTML
html = html + ' </table> </div>';
return {
rowBody: Ext.String.format(html),
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
};
}
}
],
//Definição das colunas
columns: [
{
dataIndex: 'NumPedido', //Associar Campo do model com a coluna
text: 'Pedido'
},
{
dataIndex: 'CodCliente',
text: 'CodCliente'
},
{
dataIndex: 'NomCliente',
text: 'Nome'
},
{
dataIndex: 'Qtd',
text: 'Qtd'
},
{
dataIndex: 'Valor',
text: 'Valor'
}
]
});
});
</script>
Download do projeto
Senha do arquivo aarvani