Ext JS 4 Grid com ASP MVC 3 primeiros passos

Olá , Pessoal

Venho com novidades, hoje vou começar as primeiras iterações com dados entre o EXTJS e o ASP MVC 3 , estou tentando simplificar ao máximo para que todos que tenham um pouco de noção da ferramenta .Net , consiga entender o funcionamento e possa aplicar em seu dia dia, essa ferramenta excelente , que tem uma variedade enorme de facilidades .

Requisitos VS 2010 , Framework EXT JS 4. 

Adicione um novo Controller ao projeto



Clique direito na pasta Controllers e Add



Defina o nome e adicione

Adicione um nova View ao projeto 



Clique direito no Action Result dentro do Controller

E Add view e Add

Crie um método que vai servir de consulta ao seus dados

public JsonResult GetClientList()
        {
            try
            { 

                Dictionary<string, string> _list = new Dictionary<string, string>();
                _list.Add("01", "João");
                _list.Add("02", "José");
                _list.Add("03", "Maria");                

                return Json(new
                {
                    total = _list.Count,
                    data = _list.ToList()
                }, JsonRequestBehavior.AllowGet);

            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

E na view adicione o script do EXT JS

<script type="text/javascript">

    // Defina um modelo de dados
    Ext.define('Cliente', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'Key', type: 'string' },
            { name: 'Value', type: 'string' }         
        ]
    });

    // Crie uma Store e defina o tipo de Proxy e URL
    var store = Ext.create('Ext.data.Store', {
        model: 'Cliente',
        proxy: {
            type: 'ajax',
            //nome do controller e o método de consulta com json result
            url: '/Cliente/GetClientList',
            reader: {
                type: 'json',
                root: 'data',
                totalProperty: 'total'
            }
        }
    });
    
    // Crie e carregue a grid
    var grid = new Ext.grid.Panel({
        width: 300, 
        height: 200,               
        renderTo : Ext.getBody(),  //Aonde vai ser renderizada a grid , no caso poderia ser uma div
        title: 'Lista de Clientes',
        store: store,        
        columns: [
                    {
                        dataIndex: 'Key',
                        text: 'Cod',
                        width: 70
                    },
                    {
                        dataIndex: 'Value',
                        text: 'Nome',
                        width: 100
                    }                                                
                  ]
                });

   
   //Carregue a store
   store.load();

</script>

Dowload do código

Até a próxima.

Configuração do EXT JS 4 com ASP MVC 3

Olá , Pessoal

Segue os primeiros passos para desenvolvimento no framework extjs 4.

No inicio faça o download dos arquivos JS no link
http://www.sencha.com/products/extjs/download/

Você tem a opção de trabalhar com a licença OPEN GNU Lincence 3 ou comercial que é paga.

Crie um novo projeto no VS 2010 em ASP MVC 3 .


Após fazer o download , desempacote o arquivo , e adicone ao seu projeto, somente no inicio, os arquivos JavaScript e CSS minimos.

Conforme imagem abaixo.

Adicione a referência js e css no seu projeto . No Layout principal.

<link href="@Url.Content("~/Scripts/extjs-4.1.0/resources/css/ext-all.css")" rel="stylesheet" type="text/css" />    
<script src="@Url.Content("~/Scripts/extjs-4.1.0/ext-all.js")" type="text/javascript"></script>

Primeiro script de teste , um Hello Word.

<script type="text/javascript">//Inicio da execução do SCRIPT
    Ext.onReady(function () {
        //Criando um container
        Ext.create('Ext.container.Viewport', {
        //Tipo de layout
        layout: 'fit',
        items: [
        {
            title: 'Olá Ext',
            html: 'Olá! Bem vindo ao Ext JS.'
        }
        ]
        });
});
</script>

Segue o código fonte.

Download

t+.

Introdução EXT JS

Olá , Pessoal
Vou começar a postar o que venho descobrindo sobre um mundo novo , um mundo novo extraordinário chamado EXT JS , é um framework baseado em javacript, depois de desenvolver diversas aplicações em Silverlight , comecei a me aventurar com ASP MVC .

Que por sinal não estou me arrependendo por conta das facilidades e flexibilidade que essa dupla oferece .

Para começar no EXT JS vou passar um pouco de como funciona a parte de dados manipulação de dados e estrutura .

MODEL

A princípio temos um modelo dos dados (Model) ou o desenho aonde estará a estrutura que você vai descer do seu proxy, o model você pode definir restrições de validação (Validation ) ou associações (Association) entre outros models .

PROXY

O Proxy é o mapeamento de como você vai consumir o seu dado ou o link de onde vai ser feita essa consulta (Reader) ou escrita (Writer).

STORE

A store é aonde vão ser armazenados os dados podemos ordenar os dados (Sorter) filtrar (Filter) ou agrupar (Grouper).

Até a proxima.

ref. http://docs.sencha.com/ext-js/4-1/#/guide/data

Agrupar Generic List Usando Reflection

Olá Pessoal,

Conforme tinha falado , estou enviando mais um ajudinha para agrupar dados de uma lista do tipo generics object.

/// <summary>
/// Método para agrupar itens da lista dinamico
/// </summary>
/// <param name="_property"> Propriedade da lista</param>
/// <param name="_list"> Lista que gostaria de Agrupar</param>
/// <returns>Lista Agrupada</returns>
public List<Entidade.Pedido> DoGroup(
                                string _property,                                            
                                List<Entidade.Pedido> _list
                                )
{
_list.GroupBy(c => new { typeof(Entidade.Pedido).GetProperty(_property).Name });   
return _list;
}

Até a próxima.

Ordenar um GENERIC LIST de modo dinâmico usando Reflection

Olá , Pessoal
Estou um pouco ocupado trabalhando com EXTJS com ASP MVC 3 e está um pouco difícil , mas , me sobrou um tempinho para mandar uma dica que achei super útil. Ordenar um GENERIC LIST de modo dinâmico.

 
        /// <summary>
        /// Método para ordernar itens da lista dinamico
        /// </summary>
        /// <param name="_property"> Propriedade da lista </param>
        /// <param name="_direction"> Direção </param>
        /// <param name="_list"> Lista que gostaria de ordenar</param>
        /// <returns>Lista Ordenada</returns>
        public List<Entidade.Pedido> DoOrder (
                                               string _property , 
                                               string _direction , 
                                               List<Entidade.Pedido> _list
                                              )
        {                            

            if (_direction == "ASC")
            {
                _list = _list.OrderBy(plist => typeof(Entidade.Pedido).GetProperty(_property).GetValue(plist, null)).ToList();
            }
            if (_direction == "DESC")
            {
                _list = _list.OrderByDescending(plist => typeof(Entidade.Pedido).GetProperty(_property).GetValue(plist, null)).ToList();
            }

            return _list;
        }

Espero que tenham gostado e vou trazer coisas novas.