My First ExtJS 4 MVC Architecture Project

    ExtJS 4 基于mvc的应用开发.开发工具ecilpse,Ext自动代码补齐插件spkter

    先建一个web项目,这里要是创建java项目会出现一个问题,js文件的动态加载,会找不到源文件,这是因为这里的js文件加载只支持XHR(XmlHttpRequest),对file://协议不支持 ,下面是在WebRoot下创建的.

mvc目录结构

    --->project name

        --->app(js文件夹)

            --->controller(控制器文件夹)

            --->model(模型文件夹)

            --->store(存储器文件夹)

            --->view(视图文件夹)

        --->extjs(ext的文件夹)

            --->resources

            --->src

            --->ext-all.js

        --->data(静态数据)

        --->app.js(项目入口)

        --->index.html(应用加载)

    index.html中引入ext的css(resources/css/ext-all.css)和js(ext-all.js)文件,然后在引入项目入口app.js

    app.js内容

        

Ext.requires('Ext.container.Viewport');
Ext.application({
   name : 'App',   //应用的名称
   
   appFolder : 'app',  //应用js的文件名
   
   controllers : [],

   launch : function(){
       Ext.create('Ext.container.Viewport',{
           layout : 'fit',
           items : [
              {
                 xtype : 'panel',
                 title : 'Books',
                 html : 'The Books are displayed in the viewport!'
              }
           ]
       })

   }

});