Master + Details Sencha Extjs 4 ASP MVC

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