Ext JS 4 mise en page et structure de panneau

Permettez-moi de préface à ma question par admettre que je suis un débutant complet à l'Ext JS, donc veuillez excuser mon ignorance. Je suis familier avec le HTML, CSS et JavaScript/JQuery donc je reçois la plupart de la syntaxe dans les pièces individuelles, mais j'ai du mal à la combinaison de ces pièces.

Je voudrais commencer par la construction d'une base de mise en page qui pourrait inclure un en-tête qui s'étend sur l'ensemble de la ligne du haut, à gauche de la colonne qui prend 50% de l'espace restant ci-dessous et un de la colonne de droite avec les mêmes dimensions que la gauche.

Finalement, je voudrais afficher les différents types de contenu dans les panneaux, mais pour l'instant, j'ai besoin de comprendre la syntaxe de base et de la structure de Ext JS mises en page et les fenêtres. Comme il est, je suis en fin de compte confus. Ci-dessous est un échantillon de ma première tentative, un peu de code, mais il est évidemment chemin hors de la base:

var panel = new Ext.Panel({
    fullscreen: true,
    layout: {
        type: "Panel",
        align: "fit",
    },
    items: [
        {
            xtype: "panel",
            id: "topHeader",
            title: "Header",
            style: "height:200px;"
        },
        {
            xtype: "panel",
            id: "left",
            title: "Left",
            style: "width:500px;z-index:2;background-color:#ccc;position:absolute;left:0px;"
        },
        {
            xtype: "panel",
            id: "right",
            title: "Right",
            style: "width:500px;z-index:2;background-color:#000;position:absolute;right:0px;"
        }
    ]
});
InformationsquelleAutor Carlos | 2011-09-05
  1. 1

    Pour cela, vous devez utiliser une "frontière" de mise en page. Frontière de mise en page vous permet d'ajouter des composants dans différentes régions du Nord, du Centre, de Gauche, de Droite, du Sud.

    Vous pouvez obtenir un exemple ici - http://docs.sencha.com/ext-js/4-0/#!/exemple (Mise en page de la Section Transfrontalière de la Mise en page)

    Espère que cette aide.

    • Merci pour la réponse @NetEmp. J'ai remarqué la frontière mises en page, mais pouvez-vous faire de telles mises en page sans les en-têtes et rétractables sections? Je voudrais juste une simple grille qui est invisible pour l'utilisateur...un sens?
    • À l'exception de la région de centre, vous pouvez prendre toutes les régions. Et si vous voulez ces régions, mais ne veulent pas pour leur permettre de s'effondrer alors vous pouvez donner pliable:false lors de la définition d'entre eux. Excusez-moi mais je ne suis pas être en mesure d'obtenir - "grille qui est invisible pour l'utilisateur".
    InformationsquelleAutor netemp
  2. 0

    Je pense que vous voulez dire quelque chose comme cela?

    Ext.create('Ext.Viewport', {
    layout: {
        type: 'border',
        padding: 5
    },
    defaults: {
        split: true
    },
    items: [
        {
            region: 'north',
            collapsible: false,
            border: false,
            split: true,
            height: 100,
            html: 'north'
        },
        {
            region: 'west',
            collapsible: false,
            border: false,
            split: true,
            width: '50%',
            html: 'west<br>I am floatable'
        },
        {
            region: 'center',
            border: false,
            html: ' I am center'
        }
    ]
});

    Essayez-le et laissez-moi savoir.

    InformationsquelleAutor Armance