Extjs controller/view/

一

1\First I new a webproject and index.html

2/   add the extjs 4.2gpl file and  add the script in the index.html

3/ edit the .project file

4/ change the preference/spket  use spket as the default edit file

Above all,you should notice the config.It is very important!

5/helloworld

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

very important!  USE link lable not script

After then, I will import the view/controller/listener/fireevent into it. It is this article's theme

二.I will use the http://blog.csdn.net/yangxiaojun9238/article/details/8149468 as MVCskeleton

1.change the folder struct.New the file that will be used later

2.change the main.js

main.js

Ext.application({
    name : 'app',
    appFolder : 'app',
    
    launch : function(){
        Ext.create('Ext.container.Viewport',{
            layout : 'fit',
            items  : [{
                    xtype :'panel',
                    layout:'border',
                    items : [
                            {
                                region : 'west',
                                xtype  : 'panel',
                                html   : 'helloworld',
                                width  :  150
                            }
                ]
            }]
        });
    }
});

3.now I will change the ControllerWest.js ,ContentWest.js and main.js.

ControllerWest.js

Ext.define('app.view.ContentWest',{
     extend : 'Ext.panel.Panel',
     alias  : 'widget.contentWest',
     //collapsible : true,
     layout : 'accordion',
     
     items  : [{
         title : ' 帮助',
         xtype : 'treepanel',
         rootVisible : false,
         root : {
             children :[{
                 text : '应用管理',
                 children : [{
                     text : '组织管理',
                     leaf : true
                 },{
                     text : '空间管理',
                     leaf : true
                 }]
             },{
                 text : '云管理',
                 children : [{
                     text : '域名管理',
                     leaf : true
                 },{
                     text : '虚拟机管理',
                     leaf : true
                 }]
             }]
         }
     },{
         title : '问题反馈',
         xtype : 'panel',
         html : '<h3>    welcome to submit the problem that you found,thanks for your support!</h3>',
         buttons : [{
             text : '反馈',
             action : 'sendProblem'
         }]
     },{
         title : '测试网速',
         xtype : 'treepanel',
         rootVisible : false,
         root :{
             children :[{
                 text : 'start',
                leaf : true
             }]
         }
     }
     ],
     
     initComponent : function(){
         this.callParent(arguments);
     }
 })

ControllerWest.js

 Ext.define('app.controller.ControllerWest',{
     extend : 'Ext.app.Controller',
     views  : ['app.view.ContentWest'],
     
     init : function(){
         this.callParent(arguments);
     }
 });

main.js

Ext.application({
    name : 'app',
    appFolder : 'app',
    controllers : ['app.controller.ControllerWest'],
    
    launch : function(){
        Ext.create('Ext.container.Viewport',{
            layout : 'fit',
            items  : [{
                    xtype :'panel',
                    layout:'border',
                    items : [
                            {
                                region : 'west',
                                xtype  : 'contentWest',
                                width  :  150
                            }
                ]
            }]
        });
    }
});

4. I will change ContentNorth.js,ControllerNorth.js,main.js

ContentNorth.js

/**
 *
 */
 Ext.define('app.view.ContentNorth',{
     extend : 'Ext.panel.Panel',
     alias  : 'widget.contentNorth',
     //collapsible : true,
     height : 60,
     layout : 'fit',
     items  : [{
         xtype : 'toolbar',
         items : ['<h1> Smart City Cloud</h1>',
                 {
                     xtype : 'button',
                     text : '首页',
                     action : 'FirstPage'
                 },
                 {
                     xtype : 'button',
                     text : '应用管理',
                     action : 'appManage'
                 },
                  '->',
                 {
                     xtype : 'button',
                     text : '语言切换',
                     action : 'languageSwitch'
                 },
                 {
                     xtype : 'button',
                     text : '登录',
                     action : 'login'
                 },
                 {
                     xtype : 'button',
                     text : '修改密码',
                     action : 'password'
                 }
         ]
         
     }],
     
     
     initComponent : function(){
         this.callParent(arguments);
     }
 });

ControllerNorth.js

 Ext.define('app.controller.ControllerNorth',{
     extend : 'Ext.app.Controller',
     views  : ['app.view.ContentNorth'],
     
     init : function(){
         this.callParent(arguments);
     }
 });

main.js

 *
 */
Ext.application({
    name : 'app',
    appFolder : 'app',
    controllers : ['app.controller.ControllerWest','app.controller.ControllerNorth'],
    
    launch : function(){
        Ext.create('Ext.container.Viewport',{
            layout : 'fit',
            items  : [{
                    xtype :'panel',
                    layout:'border',
                    items : [
                            {
                                region : 'west',
                                xtype  : 'contentWest',
                                width  :  150
                            },{
                                region : 'north',
                                xtype  : 'contentNorth'
                            }
                ]
            }]
        });
    }
});

5.I will change the ContentCenter.js,ControllerCenter.js and main.js and insert the 'store' into the center

ContentCenter.js

  Ext.define('app.view.ContentCenter' ,{
      extend: 'Ext.grid.Panel',
      alias : 'widget.contentCenter',  //别名为userlist
 
      initComponent: function() {   //初始化组件函数
          this.store = {
             fields: ['name', 'email'],
             data  : [
                 {name: 'Ed',    email: 'ed@sencha.com'},
                 {name: 'Tommy', email: 'tommy@sencha.com'}
             ]
         };
 
         this.columns = [
             {header: 'Name',  dataIndex: 'name',  flex: 1},
             {header: 'Email', dataIndex: 'email', flex: 1}
         ];
 
         this.callParent(arguments);
     }
 });

ControllerCenter.js

Ext.define('app.controller.ControllerCenter',{
     extend : 'Ext.app.Controller',
     views  : ['app.view.ContentCenter'],
     
     init : function(){
         this.callParent(arguments);
     }
 });

main.js

/**
 *
 */
Ext.application({
    name : 'app',
    appFolder : 'app',
    controllers : ['app.controller.ControllerWest','app.controller.ControllerNorth','app.controller.ControllerCenter'],
    
    launch : function(){
        Ext.create('Ext.container.Viewport',{
            layout : 'fit',
            items  : [{
                    xtype :'panel',
                    layout:'border',
                    items : [
                            {
                                region : 'west',
                                xtype  : 'contentWest',
                                width  :  150
                            },{
                                region : 'north',
                                xtype  : 'contentNorth'
                            },{
                                region : 'center',
                                xtype  : 'contentCenter'
                            }
                ]
            }]
        });
    }
});

6.change the folder struct and new the ContentStore and  user.json

first the file struct

ContentCenter.js

 Ext.define('app.view.ContentCenter' ,{
      extend: 'Ext.grid.Panel',
      alias : 'widget.contentCenter',  //别名为userlist
      store : 'app.store.StoreCenter',
      initComponent: function() {   //初始化组件函数
         this.columns = [
             {header: 'Name',  dataIndex: 'name',  flex: 1},
             {header: 'Email', dataIndex: 'email', flex: 1}
         ];
 
         this.callParent(arguments);
     }
 });

StoreCenter.js

   Ext.define('app.store.StoreCenter', {
     extend: 'Ext.data.Store',
     fields: ['name', 'email'],
     autoLoad : true,
     proxy: {
         type: 'ajax',
         url: 'app/data/User.json',
         reader: {
             type: 'json',
             root: 'users',
             successProperty: 'success'
         }
     }
 });

User.json

{
    success : true,
    users    : [
         {id: 1, name: 'Ed',    email: 'ed@sencha.com'},
         {id: 2, name: 'Tommy', email: 'tommy@sencha.com'}
    ]
}

add this into the ControllerCenter.js

stores : ['app.store.StoreCenter'],