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>

代码下载：

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