Passando parametros para o Controller ASP MVC pela Store do EXTJS 4

Olá, Pessoal

Vamos continuar com os exemplos com EXTJS e .NET .

Uma das maiores dificuldades que tive quando comecei a desenvolver com EXT JS foi passar parâmetros entre o JS e o método do controller do ASP MVC. Vou demonstrar com o exemplo de uma consulta passando o parâmetro string ou array para o controle do ASP MVC.

 

CODE C#

public JsonResult GetClientList(string Nome)
{
    try
    {

        if (!string.IsNullOrEmpty(Nome))
        {
            return Json(new
            {
                total = _list.Where(l => l.Value.ToUpper().Contains(Nome.ToUpper())).ToList().Count,
                data = _list.Where(l => l.Value.ToUpper().Contains(Nome.ToUpper())).ToList()
            }, JsonRequestBehavior.AllowGet);
        }
        else
        {
            return Json(new
            {
                total = _list.Count,
                data = _list.ToList()
            }, JsonRequestBehavior.AllowGet);
        }


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

 

CODE JAVASCRIPT

<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',
        autoload: false,
        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,
        title: 'Lista de Clientes',
        renderTo: Ext.getBody(), //Aonde vai ser renderizada a grid , no caso poderia ser uma div        
        store: store, // Vincular Store á grid
        columns: [
                    {
                        dataIndex: 'Key',
                        text: 'Cod',
                        width: 70
                    },
                    {
                        dataIndex: 'Value',
                        text: 'Nome',
                        width: 100
                    }
                  ],
        tbar: [ // Adicionar barra de ferramentas superior
                  {
                  xtype: 'textfield',
                  id: 'txtConsultar',
                  fieldlabel: 'Nome'
              },
                  {
                      xtype: 'button',
                      text: 'Consultar',
                      handler: function () {

                          // Pegar o que foi digitado no text
                          var txt = Ext.getCmp('txtConsultar');
                          
                          //Passando o parametro para o método do controlle 
                          store.load({
                              params: {
                                  'Nome': txt.value
                              }
                          }
                          );
                      }
                  }
               ]
    }
         );

  
   //Carregue a store
   store.load();

</script>

 

Até a próxima.

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+.