ExtJS样例总结 -1

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

1、组合框

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);
}) ;

2、页面布局：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列  

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"
    });
});

4、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元素。

5、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);

6、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'
        }
    }]
});

6、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'));
    });
});

7、让面板整体色调保持一致

frame:true, 

True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。

8、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);
});

9、调整label标签与combo之间的距离

labelWidth: 50,

labelAlign:'right'

10、调试

chrome：scripts->选择需要调试的js文件，打断点进行调试

ctrl+shift+i后：network->documents中可查看request传递的参数

11、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.把从数据库拿到的数据进行前台页面缓存
                }
            });
        });
    });
})()