http://ext4all.com/post/extjs-4-mvc-with-viewport

效果图：

结构图：

没有用到Model层，直接在view里面写上 默认的 json的数据

中间Panel的内容

app/view/Panelcenter.js

  1. //Panel内容
  2. Ext.define('wjw.view.Panelcenter', {
  3.     extend: 'Ext.grid.Panel',
  4.     alias: 'widget.pcenter', //别名
  5.     title: 'All Users',
  6.     initComponent: function () {
  7.         this.store = {
  8.             fields: ['name', 'email', 'phone'],
  9.             data: [
  10.                 { 'name': 'wjw1', 'email': 'wjw1@163.com', 'phone': '1867883XXXX' },
  11.                 { 'name': 'wjw2', 'email': 'wjw2@163.com', 'phone': '1867883XXXX' },
  12.                 { 'name': 'wjw2', 'email': 'wjw3@163.com', 'phone': '1867883XXXX' },
  13.                 { 'name': 'wjw3', 'email': 'wjw4@163.com', 'phone': '1867883XXXX' },
  14.                 { 'name': 'wjw4', 'email': 'wjw5@163.com', 'phone': '1867883XXXX' }
  15.             ]
  16.         };
  17.         this.columns = [
  18.             { header: 'Name', dataIndex: 'name' },
  19.             { header: 'Email', dataIndex: 'email' },
  20.             { header: 'Phone', dataIndex: 'phone' }
  21.         ];
  22.         this.callParent(arguments);//调用所有父类的方法
  23.     }
  24. });

 app/view/Emailpanel.js

  1. Ext.define('wjw.view.Emailpanel', {
  2.     extend:'Ext.panel.Panel',
  3.     alias:'widget.empanel'
  4. });

 app/view/Emailpanel.js

  1. Ext.define('wjw.view.Emailpanel', {
  2.     extend:'Ext.panel.Panel',
  3.     alias:'widget.empanel'
  4. });

app/view/Viewport.js

  1. Ext.define('wjw.view.Viewport', {
  2.     extend: 'Ext.container.Viewport',
  3.     layout: 'border',
  4.     requires: [
  5.         'wjw.view.Panelcenter',
  6.         'wjw.view.Emailpanel',
  7.         'wjw.view.Phonepanel'
  8.     ],
  9.     //Error:is was initComponents
  10.     initComponent: function () {
  11.         Ext.apply(this, {
  12.             items: [{
  13.                 xtype: 'pcenter',
  14.                 title: 'center中间内容',
  15.                 region: 'center',
  16.                 margins: '5 5 5 5'
  17.             }, {
  18.                 xtype: 'empanel', //email panel的别名
  19.                 title: 'south底部',
  20.                 region: 'south',
  21.                 height: 150,
  22.                 margins: '0 5 5 5' //上右下左
  23.             }, {
  24.                 xtype: 'phPanel',
  25.                 title: 'east右侧',
  26.                 region: 'east',
  27.                 width: 150,
  28.                 margins: '5 5 5 0'
  29.             }]
  30.         });
  31.         //Error: do not forget this line in each initComponent method
  32.         this.callParent(arguments);
  33.     }
  34. });

app/controller/controller.js

  1. Ext.define('wjw.controller.Books', {
  2.     extend:'Ext.app.Controller',
  3.     views: [
  4.         'Panelcenter',
  5.         'Emailpanel',
  6.         'Phonepanel',
  7.     ]
  8. });

app/app.js

  1. Ext.application({
  2.     name:'wjw',
  3.     appFolder:'app',
  4.     controllers: [
  5.         'Books'
  6.     ],
  7.     autoCreateViewport:true //自动创建 Viewport
  8. });

看看API内 对于autoCreateViewport的解释：自动加载并实例化 app的 app.view.Viewport.  也就是自动加载 app/view/Viewport.js

index.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title></title>
  6.     <script src="../../ext-4.2/bootstrap.js" type="text/javascript"></script>
  7.     <link href="../../ext-4.2/resources/css/ext-all-gray.css" rel="stylesheet" type="text/css" />
  8.     <script src="app.js" type="text/javascript"></script>
  9. </head>
  10. <body>
  11.  
  12. </body>
  13. </html>

代码下载：

http://pan.baidu.com/share/link?shareid=61215000&uk=3993055813#dir/path=%2F%E5%8D%9A%E5%AE%A2%E4%BB%A3%E7%A0%81

ExtJS 4 MVC 创建 Viewport的更多相关文章

  1. Spring mvc创建的web项目，如何获知其web的项目名称，访问具体的链接地址？

    Spring mvc创建的web项目,如何获知其web的项目名称,访问具体的链接地址? 访问URL:  http://localhost:8090/firstapp/login 在eclipse集成的 ...

  2. Extjs 6 MVC开发模式（一）

    1.Extjs就绪函数 1)导入Extjs的CSS <link rel="stylesheet" type="text/css" href="r ...

  3. MVC创建XML,并实现增删改

    原文:MVC创建XML,并实现增删改 如果创建如下的XML: <?xml version="1.0" encoding="utf-8" standalon ...

  4. ASP.NET MVC创建的网站

    ASP.NET MVC创建的网站   最近在写一个网站,昨天刚写完,由于要和朋友一起测试,但是他电脑上没有环境,所以希望我在自己电脑上部署一下,让他直接通过浏览器来访问来测试,所以从昨晚到今天上午,通 ...

  5. 【翻译】在Visual Studio中使用Asp.Net Core MVC创建你的第一个Web API应用（一）

    HTTP is not just for serving up web pages. It's also a powerful platform for building APIs that expo ...

  6. 002.Create a web API with ASP.NET Core MVC and Visual Studio for Windows -- 【在windows上用vs与asp.net core mvc 创建一个 web api 程序】

    Create a web API with ASP.NET Core MVC and Visual Studio for Windows 在windows上用vs与asp.net core mvc 创 ...

  7. 使用 ASP.NET Core MVC 创建 Web API（五）

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...

  8. 使用 ASP.NET Core MVC 创建 Web API（二）

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 六.添加数据库上下文 数据库上下文是使用Entity Framewor ...

  9. 使用 ASP.NET Core MVC 创建 Web API（三）

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 十 ...

随机推荐

  1. [NOIP2003] 提高组 洛谷P1040 加分二叉树

    题目描述 设一个n个节点的二叉树tree的中序遍历为(1,2,3,…,n),其中数字1,2,3,…,n为节点编号.每个节点都有一个分数(均为正整数),记第i个节点的分数为di,tree及它的每个子树都 ...

  2. LightOJ1094 - Farthest Nodes in a Tree(树的直径)

    http://lightoj.com/volume_showproblem.php?problem=1094 Given a tree (a connected graph with no cycle ...

  3. Hibernate学习笔记（三）

    我是从b站视频上学习的hibernate框架,其中有很多和当前版本不符合之处,我在笔记中进行了修改以下是b站视频地址:https://www.bilibili.com/video/av14626440 ...

  4. JavaOne Online Hands-on Labs

    http://www.oracle.com/technetwork/java/index-156938.html

  5. topcoder srm 552

    div1 250pt: 题意:用RGB三种颜色的球摆N层的三角形,要求相邻的不同色,给出RGB的数量,问最多能摆几个 解法:三种颜色的数量要么是全一样,要么是两个一样,另外一个比他们多一个,于是可以分 ...

  6. Fortinet网络接入及安全方案配置步骤

    http://sec.chinabyte.com/200/12553700.shtml 1.概述: Fortinet无线接入及方案由以下两类设备组成: AC(Wifi接入控制器)及安全网关:Forti ...

  7. [Javascript] Link to Other Objects through the JavaScript Prototype Chain

    Objects have the ability to use data and methods that other objects contain, as long as it lives on ...

  8. Jenkins系列之-—03 修改Jenkins用户的密码

    一.Jenkins修改用户密码 Jenkins用户的数据存放在JENKINS_HOME/users目录. 1. 打开忘记密码的用户文件夹,里面就一个文件config.xml.打开并找到<pass ...

  9. I2S简单学习

    以下只是个人看法,有不妥之处,请批评指出. 参考资料:http://blog.csdn.net/ce123_zhouwei/article/details/6919954: 一.I2S接口简述 I²S ...

  10. android抓log

    1.Logcat(能截取除了Kernel以外的所有Log信息),连接USB到电脑上,执行如下命令:User版本也可以使用adb logcat –v time >c:\ logcat.txtadb ...