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.