ExtJS 4 MVC Viewportとcardレイアウト

15816 ワード

http://ext4all.com/post/a-little-bit-strange-navigation
効果図:

app/view/Viewport.js

Ext.define('App.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'border',
    items: [
        {
            itemId: 'menu',
            region: 'west',
            collapsible: true,
            title: 'Menu',
            width: 200,
            items: [
                {
                    xtype: 'panel',
                    height: 110,
                    padding: '10 10 25 10',
                    width: 200,
                    collapsible: true,
                    title: 'Company Information',
                    items: [
                        {
                            xtype: 'button',
                            height: 27,
                            style: 'margin-left:30px;margin-top:12px;
',
                            width: 128,
                            text: 'Company',
                            action: 'company-view'
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    height: 110,
                    padding: '10 10 25 10',
                    width: 200,
                    collapsible: true,
                    title: 'Department Information',
                    items: [
                        {
                            xtype: 'button',
                            height: 27,
                            style: 'margin-left:30px;margin-top:12px;
',
                            width: 128,
                            text: 'Department',
                            action: 'department-view'
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    height: 110,
                    padding: '10 10 25 10',
                    width: 200,
                    collapsible: true,
                    title: 'Designation Information',
                    items: [
                        {
                            xtype: 'button',
                            height: 27,
                            style: 'margin-left:30px;margin-top:12px;',
                            width: 128,
                            text: 'Designation',
                            action: 'designation-view'
                        }
                    ]
                }
            ],
            margins: '5 0 5 5'
        },
        {
            itemId: 'cards',
            region: 'center',
            margins: '5 5 5 5',
            border: false,
            layout: 'card',
            defaults: { bodyPadding: 10 },
            items: [
                {
                    title: 'Company Information',
                    itemId: 'company-view',
                    html: 'Company Information Details'
                },
                {
                    title: 'Department Information',
                    itemId: 'department-view',
                    html: 'Department Information Details'
                },
                {
                    title: 'Designation Information',
                    itemId: 'designation-view',
                    html: 'Designation Information Details'
                }
            ]
        }
    ]
});

アプリ/controller/Main.js

Ext.define('App.controller.Main', {
    extend: 'Ext.app.Controller',
    refs: [ //                  
        {
            ref: 'cards',//     
            selector: 'viewport > #cards' //Ext.ComponentQuery     
        }
    ],
    init: function () {
        this.control({
            'viewport > #menu button': {
                click: function (button) {
                    this.getCards().getLayout().setActiveItem(button.action);
                }
            }
        });
    }
});

app.js

Ext.Loader.setConfig({ enabled: true });

Ext.application({
    name: 'App',
    appFolder: 'app',
    controllers: [
        'Main'
    ],
    autoCreateViewport: true
});

index.

<!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.0.2/bootstrap.js" type="text/javascript"></script> <link href="../../ext-4.0.2/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="app.js" type="text/javascript"></script> 


</head>
<body>

</body>
</html>

注意:現在のところ、ext-4.0.2のバージョンだけを導入するのは問題ないことが分かりました.最新バージョンの4.2を引用したところ、左側の3つのパネルがパネルの収縮と展開のボタンをクリックしてバグが発生していることが分かりました.
4.2以下のバージョンを使う時は、Ext.Loader.set Configを設定してください.
正常な左側:

収縮をクリックすると上部の空白が突き上げられます.

コードのダウンロード:
http://www.baidupcs.com/file/19b0658b213bde377eca2c8373a7511f?xcode=6c483924a8b184b3a757df2e01b422602fa345c4d75f8604&fid=3993055813-250528-3278538772&time=138389260&sign=FDTAXER-DCb 740 ccc 5511 e 8 fedcff06 b 0803-uF 536 rOcbRZxHUmVHKyLwJb%2 BGU%3 D&to=wb&fm=N，Tx&pires=818 logs=1200

PythonからOSSに画像をアップロードします.

tomcat管理画面にログインできませんでした.