使用extjs的mvc架构开发简单的站点

         首先弄清楚extjs和ejs的区别在哪？

ejs只是一个javascript的模版库(模版引擎)，用于从json数据中生成HTML字符串；而extjs则是一个使用javascript编写的，前端ajax框架。

Extjs的MVC，其中model,store为数据层，controller为控制层，也是聚合器，grid、tree为视图层（view）,.官方的意思就是要把将数据层、视图层在controller注册，就实现了整体的聚合——MVC先用聚合器聚合到一起。

我们使用extjs的MVC模式来开发，一般的源码目录结构如上所示。更一般的应该要带上model目录，像这样

app.js为入口函数，包含在html页面中。

Model定义了存储的数据定义，比如数据字段名称 字段类型等等。而store则是数据类型的实例。当然我看见了。也有的gm中直接没有使用model而是只使用了store，在store中使用了fields字段，貌似也达到了model的效果。

 

具体各个函数的说明可以从http://docs.sencha.com/extjs/4.0.7/#!/api/Ext中查询到。

Ext.application代表了整个完整的应用，我们需要绑定Modles，Views，Controllers，像这样：

使用格式：

application( config )

 

Ext.define定义了一个类，实际上就是创建了一组对象，比如比如model store view controller等等。

使用格式：

define( className, data, [createdFn] ) : Ext.Base

参数说明

Parameters

·        className : String

Theclass name to create in string dot-namespaced format, for example: My.very.awesome.Class, FeedViewer.plugin.CoolPager. It is highly recommended to follow this simple convention:

·        The root and the class nameare 'CamelCased'

·        Everything else islower-cased

data : Object

The key-value pairsof properties to apply to this class. Property names can be of any validstrings, except those in the reserved list below:

·        self

·        alias

·        alternateClassName

·        config

·        extend

·        inheritableStatics

·        mixins

·        override (only when using Ext.define)

·        requires

·        singleton

·        statics

·        uses

       createdFn : Function (optional)

callbackto execute after the class is created, the execution scope of which (this) will be the newly created class itself.

Returns

·        Ext.Base

 

http://www.cnblogs.com/weilao/archive/2011/11/26/2264310.html

在容器中查询某个特定的组件的方法有四种：

 

 

这里看见它使用了一种比较隐晦的方式去实现数据的更新：

这里使用ajax的方式，从同域名下的服务器那边拉取数据。当然服务器那边返回的数据就要求按照指定的格式去组织数据。

 

关于代理的信息：

Typesof Proxy

There are two maintypes of Proxy - Client and Server. The Client proxies save their data locally and include thefollowing subclasses:

·        LocalStorageProxy -saves its data to localStorage if the browser supports it

·        SessionStorageProxy -saves its data to sessionStorage if the browsers supports it

·        MemoryProxy -holds data in memory only, any data is lost when the page is refreshed

The Server proxiessave their data by sending requests to some remote server. These proxiesinclude:

·        Ajax -sends requests to a server on the same domain

·        JsonP -uses JSON-P to send requests to a server on a different domain

·        Direct -uses Ext.direct.Manager tosend requests

Proxies operate onthe principle that all operations performed are either Create, Read, Update orDelete. These four operations are mapped to the methodscreate, read, update and destroy respectively.Each Proxy subclass implements these functions.

The CRUD methods eachexpect an Operation objectas the sole argument. The Operation encapsulates information about the actionthe Store wishes to perform, the model instancesthat are to be modified, etc. See the Operation documentationfor more details. Each CRUD method also accepts a callback function to becalled asynchronously on completion.

Proxies also supportbatching of Operations via a batch object,invoked by the batch method.

 

关于ajax的信息：

AjaxProxy is one of the most widely-used waysof getting data into your application. It uses AJAX requests to load data fromthe server, usually to be placed into a Store. Let's take a look at a typical setup. Herewe're going to set up a Store that has an AjaxProxy. To prepare, we'll also setup a Model:

Ext.define('User',{

    extend: 'Ext.data.Model',

    fields: ['id','name','email']

});

 

//The Store contains the AjaxProxy as an inlineconfiguration

var store = Ext.create('Ext.data.Store',{

    model: 'User',

    proxy: {

        type: 'ajax',

        url : 'users.json'

    }

});

 

store.load();

 

一些比较实用的方法：

Ext.widget        创建某个组件实例

Ext.ComponentQuery.query('button[text ="增加"]');    根据某些属性去查询某个控件

Ext.getCmp("widgetUserlist").store       根据id去获取相关组件         .store为获取存储数据。

这里提供一个使用ExtJS的MVC架构的简单实例：

https://github.com/song0071000/ExampleOfExtJSUsingMVC