0

アプリケーションで ExtJS ポータル コードを使用しています

ページ読み込み時にポートレットを折りたたんだ状態にしたい。だから私は次のようなことをしました

items: [{
                            id: 'portlet-1',
                            title: 'Grid Portlet Texsds',
                            tools: this.getTools(),
                            height:200,
                            **collapsed:true,**
                            autoScroll :true,
                            items: Ext.create('Ext.app.GridPortlet'),
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this),
                                'endDrag': Ext.bind(this.onPortletDrag, this),
                                'resize' :Ext.bind(this.onPortletResize, this)
                            }
                        }

折りたたまれたプロパティをtrueにしました。しかし、このため、[ページのロード後に] ポートレットを展開しようとすると、空白の Grid.Plz が表示されます。添付の画像を参照してください。

何が問題ですか ？リフレッシュする必要がありますか？collapsed を false に設定すると、グリッドが表示されるためです。

ここに欠けているものを提案してください。ここに画像の説明を入力

これは getTools のコードです: function(){

{
            type: 'Minimize',
            handler: function(e,target,panelHeader,tool){
                //panelHeader.ownerCt.toggleCollapse();
                if (panelHeader.ownerCt.collapsed)
                {
                    panelHeader.ownerCt.expand();

                }
                else {
                    panelHeader.ownerCt.collapse();
                }
            }
        }

初めてポートレットがロードされたときは折りたたまれた状態ですが、[展開アイコンの「^」] ではなく十字アイコンをクリックすると、空白のグリッドが表示されます。

今回はうまく説明できればと思います。

4

1 に答える 1

0

Ext JS 4 サンプル ポータル アプリを使用して、コード (アスタリスクなし) を portlet-1 に追加しました。読み込み時に適切に折りたたまれ、展開されてグリッドが表示されます。

あなたが投稿したコードに問題はないと思います。おそらく、周囲のコンテナーのレイアウトまたはレイアウト プロパティを変更し、それがポートレットに影響を与えている可能性があります。

ここに私の完全な portal.js があります:

Ext.define('Ext.app.Portal', {

    extend: 'Ext.container.Viewport',
    //requires: [ 'Ext.diag.layout.ContextItem', 'Ext.diag.layout.Context' ],
    uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],

    getTools: function(){
        return [{
            xtype: 'tool',
            type: 'gear',
            handler: function(e, target, panelHeader, tool){
                var portlet = panelHeader.ownerCt;
                portlet.setLoading('Loading...');
                Ext.defer(function() {
                    portlet.setLoading(false);
                }, 2000);
            }
        }];
    },

    initComponent: function(){
        var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';

        Ext.apply(this, {
            id: 'app-viewport',
            layout: {
                type: 'border',
                padding: '0 5 5 5' // pad the layout from the window edges
            },
            items: [{
                id: 'app-header',
                xtype: 'box',
                region: 'north',
                height: 40,
                html: 'Ext Portal'
            },{
                xtype: 'container',
                region: 'center',
                layout: 'border',
                items: [{
                    id: 'app-options',
                    title: 'Options',
                    region: 'west',
                    animCollapse: true,
                    width: 200,
                    minWidth: 150,
                    maxWidth: 400,
                    split: true,
                    collapsible: true,
                    layout:{
                        type: 'accordion',
                        animate: true
                    },
                    items: [{
                        html: content,
                        title:'Navigation',
                        autoScroll: true,
                        border: false,
                        iconCls: 'nav'
                    },{
                        title:'Settings',
                        html: content,
                        border: false,
                        autoScroll: true,
                        iconCls: 'settings'
                    }]
                },{
                    id: 'app-portal',
                    xtype: 'portalpanel',
                    region: 'center',
                    items: [{
                        id: 'col-1',
                        items: [{
                            id: 'portlet-1',
                            title: 'Grid Portlet',
                            tools: this.getTools(),
                            collapsed: true,
                            height: 200,
                            autoscroll: true,
                            items: Ext.create('Ext.app.GridPortlet'),
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        },{
                            id: 'portlet-2',
                            title: 'Portlet 2',
                            tools: this.getTools(),
                            html: content,
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }]
                    },{
                        id: 'col-2',
                        items: [{
                            id: 'portlet-3',
                            title: 'Portlet 3',
                            tools: this.getTools(),
                            html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }]
                    },{
                        id: 'col-3',
                        items: [{
                            id: 'portlet-4',
                            title: 'Stock Portlet',
                            tools: this.getTools(),
                            items: Ext.create('Ext.app.ChartPortlet'),
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }]
                    }]
                }]
            }]
        });
        this.callParent(arguments);
    },

    onPortletClose: function(portlet) {
        this.showMsg('"' + portlet.title + '" was removed');
    },

    showMsg: function(msg) {
        var el = Ext.get('app-msg'),
            msgId = Ext.id();

        this.msgId = msgId;
        el.update(msg).show();

        Ext.defer(this.clearMsg, 3000, this, [msgId]);
    },

    clearMsg: function(msgId) {
        if (msgId === this.msgId) {
            Ext.get('app-msg').hide();
        }
    }
});
于 2012-05-29T14:22:35.173 に答える