ExtJS 4 MVC 创建 Viewport
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>
代码下载：
ExtJS 4 MVC 创建 Viewport的更多相关文章
- Spring mvc创建的web项目，如何获知其web的项目名称，访问具体的链接地址？
Spring mvc创建的web项目,如何获知其web的项目名称,访问具体的链接地址? 访问URL: http://localhost:8090/firstapp/login 在eclipse集成的 ...
- Extjs 6 MVC开发模式（一）
1.Extjs就绪函数 1)导入Extjs的CSS <link rel="stylesheet" type="text/css" href="r ...
- MVC创建XML,并实现增删改
原文:MVC创建XML,并实现增删改 如果创建如下的XML: <?xml version="1.0" encoding="utf-8" standalon ...
- ASP.NET MVC创建的网站
ASP.NET MVC创建的网站 最近在写一个网站,昨天刚写完,由于要和朋友一起测试,但是他电脑上没有环境,所以希望我在自己电脑上部署一下,让他直接通过浏览器来访问来测试,所以从昨晚到今天上午,通 ...
- 【翻译】在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 ...
- 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 创 ...
- 使用 ASP.NET Core MVC 创建 Web API（五）
使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...
- 使用 ASP.NET Core MVC 创建 Web API（二）
使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 六.添加数据库上下文 数据库上下文是使用Entity Framewor ...
- 使用 ASP.NET Core MVC 创建 Web API（三）
使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 十 ...
随机推荐
- 选课（codevs 1378）
题目描述 Description 学校实行学分制.每门的必修课都有固定的学分,同时还必须获得相应的选修课程学分.学校开设了N(N<300)门的选修课程,每个学生可选课程的数量M是给定的.学生选修 ...
- Codevs 1688 求逆序对
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 给定一个序列a1,a2,…,an,如果存在i<j并且ai>aj,那么我 ...
- BZOJ1573: [Usaco2009 Open]牛绣花cowemb
求半径d<=50000的圆(不含边界)内n<=50000条直线有多少交点,给直线的解析式. 一开始就想,如果能求出直线交点与原点距离<d的条件,那么从中不重复地筛选即可.然而两个kx ...
- POJ 2346 【DP】
题意: 给一个正的不大于10的偶数n,求n个数字组成的数字串前n/2位和后n/2位的和相等的个数. 思路: dp[i][j]由i位数组成的和为j的数字串的个数. dp[i][j]+=dp[i-1][j ...
- Java面试题总结之JDBC 和Hibernate
1.100 用户同时来访数据库,要采取什么技术? 答:采用数据库连接池. 2.什么是ORM? 答:对象关系映射(Object—Relational Mapping,简称ORM)是一种为了解决面向对象与 ...
- try catch finally执行顺序 (return / 变量覆盖)
finally有return 始终返回finally中的return 抛弃 try 与catch中的return 情况1:try{} catch(){}finally{} return x; try{ ...
- stored procedure --存储过程
存储过程(Stored Procedure),计算机用语,是一组为了完成特定功能的SQL语句集,是利用SQL Server所提供的Transact-SQL语言所编写的程序.经编译后存储在数据库中.存储 ...
- 在访问RESTful接口时出现：Could not write content: No serializer found for class的问题解决小技巧收集
注意:市面上对于写RESTful是用RestFul,其实是不规范的,标准写法RESTful. 在Java上,处理这个应该是没有继承Serializable类,然后通过Eclipse生成serialVe ...
- EJB学习（三）——java.lang.ClassCastException: com.sun.proxy.$Proxy2 cannot be cast to..
在上一篇博客介绍了怎样使用使用Eclipse+JBOSS创建第一个EJB项目,在这期间就遇到一个错误: Exception in thread "main" java.lang.C ...
- AspNetPager真假分页对照实例
从開始学习BS已经有一段时间了. 对于BS的设计,都是进行的网页设计,当中包含从数据库中取出来的数据.显示在页面上.曾经在CS中,都是使用GridView等表格控件进行显示,因为数据小.并且右側又有滚 ...