ExtJS樣例總結 -1

extjs2:http://tianya23.blog.51cto.com/1081650/821649

一、組合框

new Ext.onReady(function(){
    var top = new Ext.FormPanel({
        labelAlign: 'top',
        frame:true,
        title: 'Multi Column, Nested Layouts and Anchoring',
        bodyStyle:'padding:5px 5px 0',
        width: 600,
        items: [{
            layout:'column',
            items:[{
                columnWidth:.5,
                layout: 'form',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'First Name',
                    name: 'first',
                    anchor:'95%'
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Company',
                    name: 'company',
                    anchor:'95%'
                }]
            },{
                columnWidth:.5,
                layout: 'form',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Last Name',
                    name: 'last',
                    anchor:'95%'
                },{
                    xtype:'textfield',
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email',
                    anchor:'95%'
                }]
            }]
        },{
            xtype:'htmleditor',
            id:'bio',
            fieldLabel:'Biography',
            height:200,
            anchor:'98%'
        }],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    top.render(document.body);
}) ;

二、頁面佈局：layout，參考：http://virgoooos.iteye.com/blog/288924

absolute

顧名思義，在容器內部，根據指定的座標定位顯示 

• accordion

這個是最容易記的，手風琴效果  

• anchor

這個效果具體還不知道有什麼用，就是知道注意一下 
1.容器內的組件要麼指定寬度，要麼在anchor中同時指定高/寬， 
2.anchor值一般只能爲負值(指非百分比值)，正值沒有意義， 
3.anchor必須爲字符串值 

 

• border

將容器分爲五個區域:east,south,west,north,center  

• card

像安裝嚮導同樣，一張一張顯示  

• column

把整個容器當作一列一列的,而後向容器放入子元素時;

• fit

一個子元素將充滿整個容器（若是多個子元素則只有一個元素充滿整個容器） 

• form

是一種專門用於管理表單中輸入字段的佈局  

• table

按照普通表格的方法佈局子元素，用layoutConfig:{columns:3},//將父容器分紅3列  

三、翻頁效果

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");
        var btnBack = Ext.get("move-next");
        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"
    });
});

四、render、renderTo、applayTo、el、show說明

1.調用組件的render方法    panel.render('div'); 2.在配置中指定 renderTo 屬性    renderTo:'div', 3.配置中指定 applyTo ，這將把元素呈現到該屬性的父元素上    applyTo:'divChild', 4.經過指定 el 屬性，指定後調用 render 方法    el:'div'    panel.render(); 5.經過調用 show 方法    panel.show(); //通常用在顯示已經被 hide 的元素上 總結：el與renderTo類似，都是渲染到某個HTML元素。

五、FormPanel使用

var simple = new Ext.FormPanel({
        labelWidth : 75, // label settings here cascade unless overridden
        url : 'save-form.php',
        frame : true,
        title : 'Simple Form',
        bodyStyle : 'padding:5px 5px 0',
        width : 350,
        defaults : {
            width : 230
        },
        defaultType : 'textfield',

        items : [ {
            fieldLabel : 'First Name',
            name : 'first',
            allowBlank : false
        }, {
            fieldLabel : 'Last Name',
            name : 'last'
        }, {
            fieldLabel : 'Company',
            name : 'company'
        }, {
            fieldLabel : 'Email',
            name : 'email',
            vtype : 'email'
        }, new Ext.form.TimeField({
            fieldLabel : 'Time',
            name : 'time',
            minValue : '8:00am',
            maxValue : '6:00pm'
        }) ],

        buttons : [ {
            text : 'Save'
        }, {
            text : 'Cancel'
        } ]
    });
    simple.render(document.body);

六、viewport和border佈局

new Ext.Viewport({
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        autoHeight: true,
        border: false,
        margins: '0 0 5 0'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 200
        // the west region might typically utilize a TreePanel or a Panel with Accordion layout
    }, {
        region: 'south',
        title: 'Title for Panel',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }, {
        region: 'east',
        title: 'Title for the Grid Panel',
        collapsible: true,
        split: true,
        width: 200,
        xtype: 'grid',
        // remaining grid configuration not shown ...
        // notice that the GridPanel is added directly as the region
        // it is not "overnested" inside another Panel
    }, {
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }]
});

六、store、model

Ext.onReady(function() {
    var myStore = new Ext.data.ArrayStore({
        fields: ['id','fullname', 'first'],
        idIndex: 0 // id for each record will be the first element
    });
    var myData = [
                  [1, 'Fred Flintstone', 'Fred'],  // note that id for the
                  // record is the first
                  // element
                  [2, 'Barney Rubble', 'Barney']
                  ];


    myStore.loadData(myData);

    myStore.each(function(model) {
        alert(model.get('fullname'));
    });
});

七、讓面板總體色調保持一致

frame:true, 

True表示爲面板的邊框外框可自定義的，false表示爲邊框可1px的點線（默認爲false）。

八、combo使用

new Ext.onReady(function() {
    var mystore = new Ext.data.ArrayStore({
        fields : [ 'myId', 'displayText' ],
        data : [ [ 1, 'ALL' ], [ 2, 'IP' ], [ 3, 'COOKIE' ] ]
    });
    var top = new Ext.FormPanel({
        width : 600,
        height : 400,
        title : 'hello',
        labelWidth: 50,
        labelAlign:'right',
        bodyStyle : 'padding:5px 5px 10 10',
        frame : true,
        defaults : {
            xtype : 'combo',
            width : 120,
            height : 20,
            typeAhead: true,
            triggerAction: 'all',
            lazyRender:true,
            mode: 'local',
            valueField: 'myId',
            displayField: 'displayText'
        },
        items : [ {
            fieldLabel : 'lable1',
            store : mystore
        }
        , {
            fieldLabel : 'lable2',
            store : mystore
        }, {
            fieldLabel : 'lable3',
            store : mystore
        }, {
            fieldLabel : 'lable4',
            store : mystore
        }, {
            fieldLabel : 'lable5',
            store : mystore
        }, {
            fieldLabel : 'lable6',
            store : mystore
        }, {
            fieldLabel : 'lable7',
            store : mystore
        }, {
            fieldLabel : 'lable8',
            store : mystore
        } ],
        buttons : [ {
            text : 'save'
        }, {
            text : 'cancel'
        } ]
    });

    top.render(document.body);
});

九、調整label標籤與combo之間的距離

labelWidth: 50,

labelAlign:'right'

十、調試

chrome：scripts->選擇須要調試的js文件，打斷點進行調試

ctrl+shift+i後：network->documents中可查看request傳遞的參數

十一、Ajax實現聯動菜單 

(function(){
    function createChild(value,name){
        var el = document.createElement("option");
        el.setAttribute("value",value);
        el.appendChild(document.createTextNode(name));
        return el;
    }
    var data = {};

    Ext.onReady(function(){
        //1.獲得city這個dom對象
        var cityObj = Ext.get("city");
        //2.咱們爲這個city對象註冊一個change
        cityObj.on("change",function(e,select){
            //3.獲得改變後的數值
            var ids =  select.options[select.selectedIndex].value;
            //3.1 他先去前臺的緩存變量中差數據,當沒有的時候在去後臺拿
            if(data["city"]){
                //直接操做
            }else{
                //作ajax
            }
            //4.ajax請求把後臺數據拿過來
            Ext.Ajax.request({
                url:'/extjs/extjs!menu.action',
                params:{ids:ids},
                method:'post',
                timeout:4000,
                success:function(response,opts){
                    var obj = eval(response.responseText);
                    //5.獲得地區的哪一個對象area DOM
                    var oldObj = Ext.get("area").dom;
                    //6.清除裏面項
                    while(oldObj.length>0){
                        oldObj.options.remove(oldObj.length-1);
                    }
                    //7.加入新的項
                    Ext.Array.each(obj,function(o){
                        Ext.get('area').dom.appendChild(createChild(o.valueOf(),o.name));
                    })
                    //8.把從數據庫拿到的數據進行前臺頁面緩存
                }
            });
        });
    });
})()