0

上部と下部に積み重ねられたツールバーを備えたモーダルウィンドウが必要です。中央のパネルのすべてのコンテンツはスクロール可能で表示されている必要があります。しかし、私がそれをしているとき、パネルはスクロール可能ですが:'垂直'ですが、ドラッグしたときにのみスクロールし、マウスを上げるとすぐに元の位置にスクロールして戻ります。この問題のため、カルーセルの下の長いテキストは、パネルを引き上げたときにのみ表示されます。このパネルを、トップに戻るのではなく、離すとスクロールを停止するリストのように単純にスクロール可能にする方法。

これが私がロードしているビューです:

Ext.define('myshop.view.StyleDetails', {
    extend : 'Ext.Panel',
    requires : [ 'Ext.Toolbar', 'Ext.carousel.Carousel', 'Ext.Img', ],
    alias : 'widget.styledetailsview',
    xtype : 'styledetail',
    config : {
        modal : true,
        id : 'fullDetails',
        cls : 'detailsBox',
        width : 300, // Some dummy values
        height : 200, // Some dummy values
        hideOnMaskTap : true,
        title : 'Details',
        styleHtmlContent : true,
        rec : '', // Record
        tid : '', // templateId
        items : []
    },
    initialize : function() {
        var me = this;
        var info = me.config.rec;
        var hccontainer = Ext.getCmp('hccontainer');
        me.add([
                {
                    xtype : 'toolbar',
                    docked : 'top',
                    id : 'detailsTopToolbar',
                    title : info.styleProperties.title,
                    items : [ {
                        xtype : 'button',
                        ui : 'decline-round',
                        text : 'X',
                        docked : 'right',
                        listeners : {
                            tap : {
                                fn : function(e, html, obj, c) {
                                    this.parent.parent.closeWindow();
                                }
                            }
                        }
                    } ]
                },
                {
                    xtype : 'panel',
                    layout : 'vbox',
                    inline: {
                        wrap: false
                    },
                    scrollable : 'vertical',
                    items : [{
                        xtype : 'carousel',
                        directionLock : true,
                        flex : 3,
                        cls : 'pdp imgs',
                        config : {
                            direction : 'horizontal',
                            id : 'det'
                        }
                    },
                    {
                        xtype : 'panel',
                        layout : 'vbox',
                        flex : 1,
                        items : [ {
                            xtype : 'panel',
                            id : 'detailsPrice',
                            cls : 'pdp price',
                            html : 'Rs. ' + info.price
                        }, {
                            xtype : 'panel',
                            id : 'detailsSizes',
                            cls : 'pdp sizes',
                            html : 'Available Sizes: ' + info.available_sizes
                        }, {
                            xtype : 'panel',
                            id : 'desc',
                            cls : 'pdp desc',
                            html : ''
                        } ]
                    }]
                },
                {
                    xtype : 'button',
                    ui : 'confirm',
                    text : 'Buy Now',
                    docked : 'bottom',
                    listeners : {
                        tap : {
                            fn : function(e, html, obj, c) {
                                window.open('www.website.com'+ '?ref=jd');
                            }
                        }
                    }
                } ]);
        var detCarousel = Ext.getCmp("det");
        var imgs = [];
        if (!Ext.isEmpty(info.styleProperties.backImageUrl)) {
            imgs.push({
                xtype : 'image',
                src : info.styleProperties.backImageUrl
            });
        }
        if (!Ext.isEmpty(info.styleProperties.bottomImageUrl)) {
            imgs.push({
                xtype : 'image',
                src : info.styleProperties.bottomImageUrl
            });
        }
        if (!Ext.isEmpty(info.styleProperties.defaultImageUrl)) {
            imgs.push({
                xtype : 'image',
                src : info.styleProperties.defaultImageUrl
            });
        }
        if (!Ext.isEmpty(info.styleProperties.frontImageUrl)) {
            imgs.push({
                xtype : 'image',
                src : info.styleProperties.frontImageUrl
            });
        }
        if (!Ext.isEmpty(info.styleProperties.leftImageUrl)) {
            imgs.push({
                xtype : 'image',
                src : info.styleProperties.leftImageUrl
            });
        }
        if (!Ext.isEmpty(info.styleProperties.rightImageUrl)) {
            imgs.push({
                xtype : 'image',
                src : info.styleProperties.rightImageUrl
            });
        }
        if (!Ext.isEmpty(info.styleProperties.topImageUrl)) {
            imgs.push({
                xtype : 'image',
                src : info.styleProperties.topImageUrl
            });
        }
        detCarousel.setItems(imgs);
        // Rendering sizes
        var sizeOptions = info.productOptions;
        var html = "Available Sizes : ";
        for ( var i = 0; i < sizeOptions.length; i++) {
            if (sizeOptions[i].active && sizeOptions[i].available) {
                html = html + sizeOptions[i].unifiedSize + ', ';
            }
        }
        html = Ext.String.trim(html);
        html = html.substring(0, html.length - 1);
        html = html + ' (<a href="' + info.sizeChartImage
                + '" target="_blank">Size Chart</a>' + ')';
        Ext.getCmp("detailsSizes").setHtml(html);

        // Rendering Description
        Ext.getCmp("desc").setHtml(info.description);

        me.setMinWidth(hccontainer.element.dom.offsetWidth);
        me.setMinHeight(hccontainer.element.dom.offsetHeight - 88);
        this.callParent(arguments);
    },
    closeWindow : function() {
        console.log("closing");
        this.hide('slideOut');
        Ext.defer(function(){ 
            Ext.getCmp("fullDetails").destroy();
        }, 500, this);
    }
});

SenchaTouch2.1を使用しています

4

2 に答える 2

0

初期化関数で minWidth と minHeight を変更することで、この問題を解決しました。

me.setMinWidth(myparent.element.dom.offsetWidth);
me.setMinHeight(myparent.element.dom.offsetHeight - 88);

myparent親コンテナはどこにありますか。

于 2013-01-28T11:31:35.293 に答える
0

あなたのコーディング技術は正しくありません。UI のみの View クラスを作成し、Controller クラスにコントローラー メソッドを追加します。

あなたが直面している問題により、中央のパネルがツールバーの下に拡張されていると思います。上部と下部の両方のツールバーに高さを追加してみてください。

于 2012-12-10T12:12:59.443 に答える