1

ここに画像の説明を入力2 つのパネルを表示する hbox を作成しようとしています。左側のパネルのレイアウトを「CARD」にするまでは問題なく動作していました。そのために使用したコードは

Ext.define("InfoImage.view.WorkItems", {
    layout:'hbox',
    extend:'Ext.Container',
    requires:[
        'Ext.TitleBar',
        'Ext.layout.HBox',
        'Ext.List'
    ],
    xtype:'workitems',
    id:'workitems',
   // layout:'fit',
    config:{
        //scrollable:'true',
        fullscreen:true,
        layout:'fit',
        cls:'hboxpanel',
        items:[
            {
                xtype:'leftPanel'
            },
            {
                xtype:'documentPanel'
            }
        ]

    }

});

左パネルのコードを以下に示します。

Ext.define('InfoImage.view.leftPanel', {
    extend:'Ext.Panel',
    requires:[
        'InfoImage.view.Main',
        'InfoImage.view.WorkItems',
         'Ext.TitleBar'
    ],

    id:'leftPanel',
    xtype:'leftPanel',

    config:{
        width:'30%',
        fullscreen:true,
        autoScroll:true,
        layout:'card',
        cardSwitchAnimation:'slide',
        cls:'leftPanel',
        items:[
            /*{
                xtype:'workItemPanel'
            },
            {
                xtype:'inboxQueuePanel'

            },*/
            {
                xtype:'toolbar',
                docked:'bottom',
                items:[

                    {
                        xtype:'button',
                        cls:'workitem',
                        text:"<img src='resources/images/compose.png' style='width:40px;height:40px;' />",
                        iconMask:true,
                        ui:'normal',
                        id:'workitem',
                        handler:function () {
                        }
                   },
                    {
                        xtype:'button',
                        cls:'inbox',
                        text:"<img src='resources/images/mail.png' style='width:40px;height:40px;' />",
                        iconMask:true,
                        ui:'normal',
                        id:'inbox',
                        handler:function () {
                        }
                    },
                    {
                        xtype:'button',
                        cls:'filecabinet',
                        text:"<img src='resources/images/cabinet_256.jpg' style='width:40px;height:40px;' />",
                        iconMask:true,
                        ui:'normal',
                        id:'filecabinet',
                        handler:function () {
                        }
                   }
                ]
            }
        ]
    }
});

私の問題は、プロジェクトを実行すると、右側のパネルのみが表示されることです。leftPanel の問題を修正するにはどうすればよいですか?

4

1 に答える 1

0

あなたが求めているのは、leftPanel を 3 つの「カード」タブのいずれかに切り替えることだと思いますか? これは、Sencha GeoCongressのサンプル (フルスクリーンですが) のようなもので、examples ディレクトリに同梱されています。app/controller/SplashScreen.js ファイルには、 setActiveItem() を呼び出してカードを設定する関数がいくつかあります。ハンドラでも同じことができます:

ハンドラ:関数 () {
    var leftPanel = Ext.getCmp('leftPanel'); // 左パネルの ID を取得します
    leftPanel.setActiveItem(Ext.getCmp('workItemPanel')); // カードの ID を取得してアクティブにします
}

これがInfoImage.view.LeftPanelの私の作業バージョンです

Ext.define('InfoImage.view.LeftPanel', {
    拡張:'Ext.Panel',
    必要：[
        'InfoImage.view.Main',
        'InfoImage.view.WorkItems',
        「Ext.TitleBar」
    ]、

    id:'左パネル',
    xtype:'leftPanel',

    構成:{
        幅:'30%',
        フルスクリーン:真、
        autoScroll:真、
        レイアウト： {
            タイプ: 'カード',
            アニメーション: {
                タイプ: 'スライド'
            }
        }、
        cls:'左パネル',
        アイテム:[

            {
                xtype:'ツールバー',
                ドッキング: 'bottom',
                アイテム:[

                    {
                        xtype:'ボタン',
                        cls:'ワークアイテム',

                        html:"1 <img src='resources/images/compose.png' style='width:20px;height:20px;'/>",
                        iconMask:true,
                        ui:'ノーマル',
                        id:'ワークアイテム',
                        ハンドラ:関数 () {
                            var leftPanel = Ext.getCmp('leftPanel');
                            leftPanel.setActiveItem(Ext.getCmp('one'));
                        }
                    }、
                    {
                        xtype:'ボタン',
                        cls:'受信箱',
                        text:"2 <img src='resources/images/mail.png' style='width:40px;height:40px;' />",
                        iconMask:true,
                        ui:'ノーマル',
                        id:'受信箱',
                        ハンドラ:関数 () {
                            var leftPanel = Ext.getCmp('leftPanel');
                            leftPanel.setActiveItem(Ext.getCmp('workItemPanel'));
                        }
                    }、
                    {
                        xtype:'ボタン',
                        cls:'ファイルキャビネット',
                        text:"3 <img src='resources/images/cabinet_256.jpg' style='width:40px;height:40px;' />",
                        iconMask:true,
                        ui:'ノーマル',
                        id:'ファイルキャビネット',
                        ハンドラ:関数 () {
                            var leftPanel = Ext.getCmp('leftPanel');
                            leftPanel.setActiveItem(Ext.getCmp('inboxQueuePanel'));
                        }
                    }
                ]
            }、
            {
                xtype: 'パネル',
                やりました'、
                html:'1'
            }、
            {
                xtype: 'パネル',
                id: 'workItemPanel',
                html:'ワークアイテムパネル'
            }、
            {
                xtype: 'パネル',

                id: 'inboxQueuePanel',
                html:'inboxQueuePanel'
            }
        ]
    }
});
于 2012-04-27T17:39:00.253 に答える