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',
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>
代码下载：