ExtJS 학습노트 레이아웃의 9가지 스타일 요약

extjs의 용기 구성 요소는 모두 디스플레이 스타일을 설정할 수 있습니다. 유효한 값은 absolute,accordion,anchor,border,card,column,fit,form and table입니다.모두 9종입니다.간단하게 정리하면 기억을 돕는다.

absolute

말 그대로 용기 내부에서 지정한 좌표에 따라 위치를 정하여 표시한다.

accordion

이게 제일 기억하기 쉬워요. 아코디언 효과.

    Ext.OnReady(function(){  
    var panel=new Ext.Panel(//Ext.formPanel Panel form   
          {  
           renderTo:'paneldiv',  
           title:' ',  
           layout:'accordion',         
           width:500,  
           height:200,  
           layoutConfig:{animate:false},  
           items:[  
            {title:' 1',html:''},  
            {title:' 2',html:''},  
            {title:' 3',html:''},  
            {title:' 4',html:''}  
           ]  
          }  
         );  
    });  

anchor

이 효과가 구체적으로 무슨 소용이 있는지 모르지만 주의해야 한다는 것을 안다
1. 용기 안의 구성 요소는 너비를 지정하거나 anchor에서 높이/너비를 동시에 지정합니다.
2. anchor 값은 보통 마이너스(백분율이 아닌 값)일 뿐, 양값은 의미가 없다.
3.anchor는 문자열 값이어야 합니다.

    Ext.onReady(function() {  
            var panel1 = new Ext.Panel({  
                title: "panel1",  
                height: 100,  
                anchor: '-50',  
                html: " 100， = -50"  
            });  
      
            var panel2 = new Ext.Panel({  
                title: "panel2",  
                height: 100,  
                anchor: '50%',  
                html: " 100, = 50%"  
      
            });  
      
            var panel3 = new Ext.Panel({  
                title: "panel3",  
                anchor: '-10, -250',  
                html: " = -10, = -250"  
      
            });  
      
            var win = new Ext.Window({  
                title: "Anchor Layout",  
                height: 400,  
                width: 400,  
                plain: true,                      
                layout: 'anchor',  
                items: [panel1, panel2,panel3]              
            });  
            win.show();  
        });  

border

용기를 다섯 구역으로 나눈다: east,south,west,north,center

     Ext.onReady(function() {       
      
            var button = Ext.get('show-btn');  
            var win;  
              
            button.on('click', function() {  
      
                // TabPanel  
                var tabs = new Ext.TabPanel({  
                    region: 'center', //border ， ， ， ， ， ， TabPanel   
                    margins: '3 3 3 0',  
                    activeTab: 0,  
                    defaults: {  
                        autoScroll: true  
                    },  
                    items: [{  
                        title: 'Bogus Tab',  
                        html: " Tab ."  
                    }, {  
                        title: 'Another Tab',  
                        html: " Tab"  
                    }, {  
                        title: 'Closable Tab',  
                        html: " Tab",  
                        closable: true  
    }]  
                    });  
      
                    // Panel  
                    var nav = new Ext.Panel({  
                        title: 'Navigation',  
                        region: 'west', // ，   
                        split: true,  
                        width: 200,  
                        collapsible: true, //   
                        margins: '3 0 3 3',  
                        cmargins: '3 3 3 3'  
                    });  
      
                    //   
                    if (!win) {  
                        win = new Ext.Window({  
                            title: 'Layout Window',  
                            closable: true,  
                            width: 600,  
                            height: 350,  
                            border : false,  
                            plain: true,  
                            layout: 'border',  
                            closeAction:'hide',  
                            items: [nav, tabs]// panel TabPanel window ， border   
                        });  
                    }  
                    win.show(button);  
                });  
            });  

card

설치 마법사처럼 한 장 한 장 표시

    Ext.onReady(function() {  
      
            var i = 0;  
      
            var navHandler = function(direction) {  
                if (direction == -1) {  
                    i--;  
                    if (i < 0) { i = 0; }  
                }  
      
                if (direction == 1) {  
                    i++;  
                    if (i > 2) { i = 2; return false; }  
                }  
      
      
                var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];  
                var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];  
      
                if (i == 0) {  
                    btnBack.disabled = true;  
                }  
                else {  
                    btnBack.disabled = false;  
                }  
      
                if (i == 2) {  
                    btnNext.value = " ";  
                    btnNext.disabled = true;  
                }  
                else {  
                    btnNext.value = " ";  
                    btnNext.disabled = false;  
                }  
      
                card.getLayout().setActiveItem(i);  
      
            };  
      
      
            var card = new Ext.Panel({  
                width: 200,  
                height: 200,  
                title: ' ',  
                layout: 'card',  
                activeItem: 0, // make sure the active item is set on the container config!  
                bodyStyle: 'padding:15px',  
                defaults: {  
                    border: false  
                },  
                bbar: [  
                    {  
                        id: 'move-prev',  
                        text: ' ',  
                        handler: navHandler.createDelegate(this, [-1])                      
                    },  
                    '->',  
                    {  
                        id: 'move-next',  
                        text: ' ',  
                        handler: navHandler.createDelegate(this, [1])  
                    }  
                ],  
      
                items: [{  
                    id: 'card-0',  
                    html: '<h1> !</h1><p>Step 1 of 3</p>'  
                }, {  
                    id: 'card-1',  
                    html: '<h1> !</h1><p>Step 2 of 3</p>'  
                }, {  
                    id: 'card-2',  
                    html: '<h1> !</h1><p>Step 3 of 3 - Complete</p>'  
    }],  
      
                    renderTo: "container"  
                });  
      
      
      
            });  

column

전체 용기를 일렬로 보고 용기에 서브원소를 넣을 때

    Ext.onReady(function() {  
            var win = new Ext.Window({  
                title: "Column Layout",  
                height: 300,  
                width: 400,  
                plain: true,  
                layout: 'column',  
                items: [{  
                    title:"width=50%",  
                    columnWidth:0.5,  
                    html:"width=( - )*50%",  
                    height:200  
                },  
                {  
                    title:"width=250px",  
                    width: 200,  
                    height:100,  
                    html:" 250px"  
                }              
                ]  
            });  
            win.show();  
        });  

fit

하나의 하위 요소가 전체 용기에 가득 차 있을 것이다(만약 여러 하위 요소가 하나의 요소만 전체 용기에 가득 차 있다면)

    Ext.OnReady(function(){  
    var panel=new Ext.Panel(  
          {  
           renderTo:'paneldiv',  
           title:' ',  
           layout:'fit',  
           width:500,  
           height:100,  
           items:[  
            {title:' 1'},  
            {title:' 2'},  
            {title:' 3'},  
            {title:' 4'},  
            {title:' 5'}  
           ]  
          }  
         );  
    });  

form

양식의 입력 필드를 관리하는 데 사용되는 레이아웃입니다.

    Ext.onReady(function() {  
            var win = new Ext.Window({  
                title: "form Layout",  
                height: 150,  
                width: 230,  
                plain: true,  
                bodyStyle: 'padding:15px',  
                items:   
                {  
                    xtype: "form",  
                    labelWidth: 30,  
                    defaultType: "textfield",  
                    frame:true,  
                    items:   
                    [  
                        {  
                            fieldLabel:" ",  
                            name:"username",  
                            allowBlank:false  
                        },  
                        {  
                            fieldLabel:" ",  
                            name:"nickname"  
                        },  
                        {  
                            fieldLabel: " ",  
                            xtype:'datefield',  
                            name: "birthday",  
                            width:127  
                        }  
                    ]  
                }  
            });  
            win.show();  
        });  

table

일반 표의 방법에 따라 하위 요소를 레이아웃하고 layoutConfig: {columns:3},//부모 용기를 3열로 나눈다

    Ext.onReady(function(){  
    var panel=new Ext.Panel(  
          {  
           renderTo:'paneldiv',  
           title:' ',  
           layout:'table',         
           width:500,  
           height:200,  
           layoutConfig:{columns:3},// 3   
           items:[  
            {title:' 1',html:'ssssssssss',rowspan:2,height:100},  
            {title:' 2',html:'dfffsddsdfsdf',colspan:2},  
            {title:' 3',html:'sdfsdfsdf'},  
            {title:' 4',html:''}  
           ]  
          }  
         );  
    });