Search This Blog

Friday 28 September 2012

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.

No comments:

Post a Comment

Translate