Elemente der Rechtsangleichung in der HBOX layout extjs 4

Ich 3 Elemente unter einander in der Mitte der Seite. Es ist nicht ein problem mit der HBOX. Aber meine Elemente in verschiedenen breiten:
zwei Elemente mit 350 Breite und ein element mit 1000 Breite. hier ist das Beispiel:

    Ext.create('Ext.Viewport', {
            layout: {
                type: "hbox",
                pack: "center",
                align: "middle"
            },
            items: {
                xtype: 'container',
                items:[{
                    xtype: 'image',
                    height: 350,
                    width: 350,
                    src: '/images/logo.jpg'
                },{
                    xtype: 'image',
                    height: 350,
                    width: 350,
                    src: '/images/logo2.jpg'
                },{
                    xtype: 'panel',
                    width: 1000,
                    margin: '0px 0px 0px -325px',
                    frame: true,
                    autoscroll: true,
                    title: 'panel title',
                    html: 'some panel with some rows with<br /> some text'
                }]
            },
            renderTo: Ext.getBody()
    });

Das Hauptproblem ist horizontaler Ausrichtung der Elemente.
Das zweite problem ist: keine scrollbar angezeigt, wenn die Auflösung des Bildschirm ist klein und ich habe große text in der Platte.

Ok, anderes Beispiel:

Ext.create('Ext.Viewport', {
                layout: {
                    type: "hbox",
                    pack: "center",
                    align: "middle"
                },
                items: {
                    xtype: 'container',
                    items:[{
                        xtype: 'form',
                        width: 350,
                        title: 'Form Panel',
                        items: [{
                            xtype: 'textfield',
                            fieldLabel: 'Name'
                        }]
                    },{
                        xtype: 'panel',
                        width: 1000,
                        frame: true,
                        autoscroll: true,
                        title: 'panel title',
                        html: 'some panel with some rows with<br /> some text'
                    }]
                },
                renderTo: Ext.getBody()
});

In diesem panel genau in der Mitte des Bildschirms, aber die form nicht.
P. S. ich habe versucht, verschieben Sie das layout um die container - es funktioniert nicht

Können Sie bitte aktualisieren Sie Ihre code-Beispiel mit der richtigen Breite? und auch versuchen Sie zu verwenden vbox oder hbox?
Es tut mir Leid, ich war in Eile. Dieser code ist mein code, damit ich HBOX und mi Breite 350px und 1000px
wieder bitte korrigieren Sie Ihre Frage - Sie haben die VBOX in Titel und tags, aber HBOX im code. Sie sprechen auch über die Breite, aber die Höhe im code
Bilder Breite 350px, ich habe versucht, zu verwenden ", Breite:350" im Bild-container, aber es funktioniert nicht
Ich habe eine Lösung gefunden. Es ist einfach, aber Es funktioniert nicht mit dynamisch-Breite Objekte. Meine Lösung ist, um Spielraum für kleine Elemente. In diesem Beispiel für die form-oder Bild-code "margin -: '0px 0px 0px 325px',"

InformationsquelleAutor Evgeniy Timchenko | 2012-06-04

  1. 2
    Ext.create('Ext.Viewport', {
    layout : 'fit',
    autoScroll : true,
    items: {
        xtype: 'container',
        autoScroll : true,
        minHeight : 1000,
        layout: {
            type: "vbox",
            pack: "center",
            align: "center"
        },
        items:[{
            xtype: 'image',
            height: 350,
            width: 350,
            src: '/images/logo.jpg'
        },{
            xtype: 'image',
            height: 350,
            width: 350,
            src: '/images/logo.jpg'
        },{
            xtype: 'panel',
            width: 1000,
            margin: '0px 0px 0px -325px',
            frame: true,
            title: 'panel title',
            html: 'some panel with some rows with<br /> some text'
        }]
    },
    renderTo: Ext.getBody()
});

    Ich denke, dass vielleicht Sie sollten einen minHeight auf den container, und das layout 'fit' auf den container, um die autoscroll-panel.

    Beinhalten und die vbox layout der contianer' items.

    dieser arbeitete für mich: Ext.create('Ext.Viewport', { layout : 'fit', autoScroll : true, items: { xtype: 'container', minHeight : 845, wo 845 ist in der Höhe meiner Inhalte. Aber ich habe noch ein horizontaler Balken 🙁
    <style> .x-box-layout-ct{ width: 100% !important; } </style> machte mich glücklich. Kein horizontaler scrollbar.

    InformationsquelleAutor liss.sb

  2. 0

    Zunächst bewegen Sie Ihre layout-definition in container. Es hat nichts zu tun mit viewport. Sekunde für Ihre layout-ich glaube, Sie sollten 

    type: 'vbox',
align: 'center', 
pack: 'center',

    Ich denke auch, es könnte etwas mit der Art und Weise ExtJs layouts Bilder - weil, wenn ich versucht dein Beispiel in jsfiddle - Bilder noch nicht layout in der vbox, aber auch andere Komponenten (Kontrollkästchen oder eine Schaltfläche), würde das layout einfach nur fein

    Ich habe versucht zu bewegen, layout-container, und zum ändern von "middle" zu "center" - funktioniert nicht. Über Bilder... ich habe einen anderen code, mit Bilder.
    Auf einer halb-verwandten beachten, Bilder können ein problem sein, da bei layout das Bild noch nicht geladen ist und hat 0 x 0 Dimensionen. Ich habe einen workaround hatte, um einen listener auf Last call doComponentLayout auf dem Behälter.

    InformationsquelleAutor sha

Schreibe einen Kommentar