Extjs 4 MVC 例子

最新推荐文章于 2025-11-26 15:40:52 发布

原创最新推荐文章于 2025-11-26 15:40:52 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#测试 #javascript #ViewUI

extjs4 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用Sencha ExtJS 4.0框架实现的MVC架构应用示例。该示例包括了基本的目录结构、index.html文件、app.js文件以及UsersControl.js文件的内容。通过这个简单的应用程序，读者可以了解到如何利用ExtJS 4.0创建MVC架构的应用。

Sencha Docs ExtJs 4.0 MVC例子

目录结构如下：

MVC目录

代码:index.html

<html>
  <head>
     <title>Account Manager</title>
     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
     <script type="text/javascript" src="../../bootstrap.js"></script>
     <script type="text/javascript" src="app.js"></script>
  </head>
  <body>
  </body>
</html>

app.js

Ext.onReady(function(){
   Ext.QuickTips.init();
   //Uncaught Ext.Error: Ext.Loader is not enabled...
   Ext.Loader.setConfig({
      enabled:true
   });
   
   Ext.application({
    name: 'AM',

    appFolder: 'app',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'panel',
                    title: 'Users',
                    html : 'List of users will go here'
                }
            ]
        });
    },
    controllers:[
       'UsersControl'   //请注意此处
    ]
});

});

UsersControl.js

Ext.define('AM.controller.UsersControl',{
   extend: 'Ext.app.Controller',
   init:function(){
      console.log('Initialized Users!');
   }
});

待续..