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

效果图:

结构图:

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

中间Panel的内容

app/view/Panelcenter.js

//Panel内容
Ext.define('wjw.view.Panelcenter', {
extend: 'Ext.grid.Panel',
alias: 'widget.pcenter', //别名
title: 'All Users',
initComponent: function () {
this.store = {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'wjw1', 'email': 'wjw1@163.com', 'phone': '1867883XXXX' },
{ 'name': 'wjw2', 'email': 'wjw2@163.com', 'phone': '1867883XXXX' },
{ 'name': 'wjw2', 'email': 'wjw3@163.com', 'phone': '1867883XXXX' },
{ 'name': 'wjw3', 'email': 'wjw4@163.com', 'phone': '1867883XXXX' },
{ 'name': 'wjw4', 'email': 'wjw5@163.com', 'phone': '1867883XXXX' }
]
};
this.columns = [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email' },
{ header: 'Phone', dataIndex: 'phone' }
];
this.callParent(arguments);//调用所有父类的方法
}
});

 app/view/Emailpanel.js

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

 app/view/Emailpanel.js

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

app/view/Viewport.js

Ext.define('wjw.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
requires: [
'wjw.view.Panelcenter',
'wjw.view.Emailpanel',
'wjw.view.Phonepanel'
],
//Error:is was initComponents
initComponent: function () {
Ext.apply(this, {
items: [{
xtype: 'pcenter',
title: 'center中间内容',
region: 'center',
margins: '5 5 5 5'
}, {
xtype: 'empanel', //email panel的别名
title: 'south底部',
region: 'south',
height: 150,
margins: '0 5 5 5' //上右下左
}, {
xtype: 'phPanel',
title: 'east右侧',
region: 'east',
width: 150,
margins: '5 5 5 0'
}]
});
//Error: do not forget this line in each initComponent method
this.callParent(arguments);
}
});

app/controller/controller.js

Ext.define('wjw.controller.Books', {
extend:'Ext.app.Controller',
views: [
'Panelcenter',
'Emailpanel',
'Phonepanel',
]
});

app/app.js

Ext.application({
name:'wjw',
appFolder:'app',
controllers: [
'Books'
],
autoCreateViewport:true //自动创建 Viewport
});

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

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../ext-4.2/bootstrap.js" type="text/javascript"></script>
<link href="../../ext-4.2/resources/css/ext-all-gray.css" rel="stylesheet" type="text/css" />

<script src="app.js" type="text/javascript"></script>
</head>
<body> </body>
</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. android开发里跳过的坑——android studio打包的APK签名无效

    近期把一个项目从eclipse上移植到了android studio, 在打包发布APK的时候,应用上传到应用市场时提示取不到签名.但是,我确实使用了 做过签名了. 然后换了一种打包方式 build ...

  2. ESI 动态缓存技术[转载]

    任何一个Web网站的内容都是在不断更新和变化,但这并不意味这这个网站的内容就是动态内容,事实上,动态的内容是指用户每次点击 相同的链接时取的的内容是由Web服务器应用程序生成的,如常见得ASP,JSP ...

  3. spring boot 没有主清单属性

  4. Spring Cloud(8):Sleuth和Zipkin的使用

    场景: 某大型电商网站基于微服务架构,服务模块有几十个. 某天,测试人员报告该网站响应速度过慢.排除了网络问题之后,发现很难进一步去排除故障. 那么:如何对微服务的链路进行监控呢? Sleuth: 一 ...

  5. 国内代码托管平台(Git和SVN)

        Github(Git和SVN)https://github.com/ 可以说GitHub的出现完全颠覆了以往大家对代码托管网站的认识.GitHub不但是一个代码托管网站,更是一个程序员的SNS ...

  6. poj 3468 A Simple Problem with Integers(线段树、延迟更新)

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 74705   ...

  7. SQL 连接(JOIN)

    SQL 连接(JOIN) SQL join 用于把来自两个或多个表的行结合起来. SQL JOIN SQL JOIN 子句用于把来自两个或多个表的行结合起来,基于这些表之间的共同字段. 最常见的 JO ...

  8. Malformed or corrupted AST file: &#39;Unable to load module &quot;...

    Malformed or corrupted AST file: 'Unable to load module "/Users/topbar/Library/Developer/Xcode/ ...

  9. 理解Android线程创建流程(转)

    /android/libcore/libart/src/main/java/java/lang/Thread.java /art/runtime/native/java_lang_Thread.cc ...

  10. MyEclipse搭建SSH(Struts2+Spring2+Hibernate3)框架项目教程

    对Struts.spring.hibernate大体上了解一遍后,就是针对这个几个框架的整合了. 怎样整合,请看以下: 第一:Struts2的jar和xml配置文件: jar包: commons-fi ...