ExtJS样例总结 -4

 

1、联动菜单

var provinces = [ [ 1, '北京' ], [ 2, '上海' ] ];
var cities = new Array();
cities[1] = [ [ 11, '海淀' ], [ 22, '东城' ] ];
cities[2] = [ [ 33, '黄埔' ], [ 44, '浦东' ], [ 55, '静安' ] ];

var comboProvinces = new Ext.form.ComboBox({

    store : new Ext.data.SimpleStore({
        fields : [ "provinceId", "provinceName" ],
        data : provinces
    }),

    listeners : {
        select : function(combo, record, index) {
            comboCities.clearValue();
            comboCities.store.loadData(cities[record.data.provinceId]);
        }
    },

    valueField : "provinceId",
    displayField : "provinceName",
    mode : 'local',
    forceSelection : true,
    blankText : '请选择省份',
    emptyText : '请选择省份',
    hiddenName : 'provinceId',
    editable : false,
    triggerAction : 'all',
    allowBlank : true,
    fieldLabel : '请选择省份',
    name : 'provinceId',
    width : 80

});

var comboCities = new Ext.form.ComboBox({
    store : new Ext.data.SimpleStore({
        fields : [ "cityId", 'cityName' ],
        data : []
    }),

    valueField : "cityId",
    displayField : "cityName",
    mode : 'local',
    forceSelection : true,
    blankText : '选择地区',
    emptyText : '选择地区',
    hiddenName : 'cityId',
    editable : false,
    triggerAction : 'all',
    allowBlank : true,
    fieldLabel : '选择地区',
    name : 'cityId',
    width : 80
});

new Ext.Window({
    width : 300,
    height : 200,
    layout : 'column',
    items : [ comboProvinces, comboCities ]
}).show();

2、让window最小化：重写minimize方法

var window = new Ext.Window({
        width : 400,
        height : 300,
        title : 'my window',
        minimizable :true,
        minimize : function() {
            window.hide();
        },
        maximizable : true
    });
    window.show();

3、灵活的javascript

function Animal(name) {
    this.name = name;
    this.age = 0;
};

alert(Animal); //赋值功能。输出函数本身
alert(Animal());//执行函数。undefined，执行函数但无返回值
alert(new Animal());//object
alert(new Animal);//object

4、javascript的可变参数：定义时不需要指定输入参数个数

function sum() {
    var s = 0;
    for(var i = 0; i < arguments.length ; i++){
        s += arguments[i];
    }
    return s;
};

alert(sum(1,2));
alert(sum(1,2,3,4,5,6));

5、combo默认选中一个，且前台展示和后台传值存在mapping关系

render : function(combo) {
                        combo.setValue("0");   //设置默认选中第一个值
                    }

 

data : [ ['all', '0'],['ip', '1'], ['cookie', '2']]

默认前台会选中all 

6、combo从远程记载数据

var mystore = new Ext.data.ArrayStore({
    fields : [ 'myId', 'displayText' ],
    //data : [ [ 1, 'ALL' ], [ 2, 'IP' ], [ 3, 'COOKIE' ] ]
    proxy: new Ext.data.HttpProxy({url: '../../blackList/searchCookieTypes.do'}),
});
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: 'remote',
        valueField: 'myId',
        displayField: 'displayText'
    },
    items : [ {
        fieldLabel : 'lable1',
        store : mystore
    }
    , {
        fieldLabel : 'lable2',
        store : mystore
    }],
    buttons : [ {
        text : 'save'
    }, {
        text : 'cancel'
    } ]
});

top.render(document.body);

7、gridpanle的展示与数据传递分开

返回：回调ColumnModel的 renderer  方法

header : "处罚方式",
dataIndex : 'punishMode',
//水印:0、断链:1、错误码(拦截):2
renderer : function(punishNumber) {
    if(punishNumber == 0){
        return "水印";
    }
    if(punishNumber == 1){
        return "断链";
    }
    if(punishNumber == 2){
        return "错误码";
    }
    return "";
}

下发数据：只能java代码处理，无法做映射回去

8、switch语句

var submitObject = form.getValues();
                        submitObject.appId = appId;
                        switch(submitObject.punishMode){
                            case 'waterMark':submitObject.punishMode='0';break;
                            case 'disconnect':submitObject.punishMode='1';break;
                            case 'errorCode':submitObject.punishMode='2';break;
                            default:submitObject.punishMode="";
                        }

9、html中的靠左显示和靠右显示

 

<span style='float:left'>居左</span><span style='float:right'>居右</span>

<div style="float:left;">靠左显示</div>

<div style="float:right;">靠右显示</div> 

10、js中的续行 

js的行符是“\”
document.write("dsdddddd\
dffdsg\
gdfsgfd\
gfdgfdgdf";
是合法代码

11、顶部用户名显示：header_panel.body.update(topMenu);

var header_panel = new Ext.Panel(
                    {
                        // frame : false,
                        // border : false,
                        autoScroll : false,
                        height : 60,
                        region : 'north',
                        bodyStyle : 'background-color:#D5E2F2',
                        listeners : {
                            afterrender : function(thiz) {
                                Ext.Ajax.request({
                                            url : '../../user/getUserName.do',
                                            success : function(response, opts) {
                                                var responseText = Ext.decode(response.responseText);
                                                if (responseText.success) {
                                                    username = responseText.data[0];
                                                } else {
                                                    username = "customer";
                                                }
                                                var topMenu = '<p><img alt="" src="logo.png"><a href="main.html">首页</a>&nbsp;\
                                                    用户:'+ username + ' &nbsp;&nbsp;<a href="../others/others.html">退出系统</a></p>';
                                                header_panel.body.update(topMenu);
                                            }
                                        });
                            }
                        }/*,
                        html : '<p><img alt="" src=\'#\'" /a>&nbsp;\
                        用户:Admin'+ username + ' &nbsp;&nbsp;<a href="../others/others.html">退出系统</a></p>'*/
                    });