No post anterior iniciamos a estrutura da nossa aplicação de blog. Agora vamos ver melhor a respeito da arquitetura MVC do Ext JS 4.

Model

1. Criar model no arquivo app/model/Post.js

Ext.define('EB.model.Post', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id',		type: 'int'     },
        {name: 'title',		type: 'string'  },
        {name: 'content',	type: 'string'  }
    ],
	proxy: {
		type: 'ajax',
        url: 'data/posts.json',
        reader: {
            type: 'json',
			root: 'posts',
			idProperty: 'id'
        }
    }
});

2. Criar store no arquivo app/store/Posts.js

Ext.define('EB.store.Posts', {
    extend      : 'Ext.data.Store',
    model       : 'EB.model.Post'
});

3. Criar dados fictícios no arquivo data/posts.json

{
	"posts": [
		{"id":1, "title": "Post 1", "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id nisl tellus, nec pretium tortor. Duis luctus posuere felis vitae viverra. Vivamus nisl purus, pulvinar eget rhoncus et, mattis nec leo. Donec sagittis ultrices molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."},
		{"id":2, "title": "Post 2", "content": "In hac habitasse platea dictumst. Nam commodo, augue id consequat ultricies, lacus augue pharetra odio, in aliquet neque magna vitae ipsum. Praesent porta dictum nibh, quis aliquam tortor volutpat nec. Nulla egestas nibh ac neque congue eu commodo dui elementum. Sed interdum massa sit amet odio aliquet at blandit mauris condimentum."},
		{"id":3, "title": "Post 3", "content": "Vestibulum commodo pellentesque sagittis. Nullam sed venenatis mi. Etiam convallis turpis at velit faucibus lobortis. Sed pretium viverra dui vitae adipiscing. Quisque mattis mollis lectus. Nullam a convallis sapien. Donec vitae eleifend ipsum. Nam tortor ipsum, ultrices eget feugiat nec, sodales et magna."}
	]
}

Fazendo desta forma a nossa camada de dados está pronta. Temos um model, aonde descrevemos os campos que o compõem, e o proxy que fará a conexão com o servidor. Definimos também o reader, que é o responsável por traduzir os dados que vêm do servidor para que o Ext possa criar as instâncias do model.

View

Agora vamos criar a listagem de posts, no arquivo app/view/post/List.js

Ext.define('EB.view.post.List',{
    extend  : 'Ext.view.View',
    alias   : 'widget.postlist',

//inits
    initComponent: function()
    {
        Ext.apply(this,{
			title		: 'Posts',
			store		: 'Posts',
			itemSelector: 'div.post-wrap',
			tpl			: new Ext.XTemplate(
			    '<tpl for=".">',
					'<div style="margin-bottom: 10px;" class="post-wrap">',
						'<h2>{title}</h2>',
						'<p>{content}</p>',
			        '</div>',
			    '</tpl>'
			)
		});

		this.callParent(arguments);
		this.store.load();
    }
});

EB.view.post.List é uma view bem simples. Ela extende de Ext.view.View, definindo o store e também o template utilizado para essa listagem. Vamos deixar os links de edição e exlusão de fora por enquanto.

Controller

Este é a parte responsável por juntar models, stores, views, e adicionar os eventos e interações. Por enquanto não vamos definir os eventos, vamos só criar o arquivo app/controller/Posts.js e juntar todas as partes

Ext.define('EB.controller.Posts', {
    extend  : 'Ext.app.Controller',
    views   : ['post.List'],
    models  : ['Post'],
	stores	: ['Posts']
});

Unindo as partes

Vamos adicionar o controller Posts à nossa definição de application em app.js

Ext.application({
    name: 'EB',					//app namespace (from ExtBlog)
    controllers: ['Posts'],		//here goes the controllers
    autoCreateViewport: true	//automatically creates Viewport
});

O app.js é nosso arquivo de entrada. Ele irá disparar o carregamento de controller definido em app/controller/Posts.js. Como dentro do nosso controller nós indicamos suas views, models e stores envolvidas, estes também serão carregados. No final temos tudo carregado e pronto para o uso!

Basta agora adicionar nossa listagem de posts ao Viewport, usando diretamente o alias postlist

//...
	xtype: 'tabpanel',
	region: 'center',
	items: [{
		xtype: 'postlist'
	},{
		title: 'Post 1',
		html: '...post 1...'
	}]
//...

Como resultado já podemos ver nossa listagem de arquivos sendo carregada. A estrutura MVC do Ext 4 permite que cada diferente parte de uma interface seja definida no seu devido lugar.

Apesar de termos já uma listagem, ainda falta interação para abrir o post e também as regras SASS para deixar a interface do jeito que queremos. Tudo isso será feito no próximo post!

Posts relacionados:

1. Construindo um aplicativo com Ext 4 – Parte 1