ExtJS 列布局以及table布局的应用

来源：互联网发布：纪录片知乎编辑：程序博客网时间：2024/06/05 05:32
代码：
/** * Created with IntelliJ IDEA. * User: Administrator * Date: 14-3-5 * Time: 上午10:23 * To change this template use File | Settings | File Templates. */function capturePhotoWin(vid,lpn){    var designer = new capturePhotoWin_Designer(vid,lpn);    designer.Show();}function capturePhotoWin_Designer(vid,lpn) {    this.vid = vid;    this.lpn=lpn;    //控件宽度    this.leftControlWidth = 150;    this.vlpnFlag=0;//0表示为 选中的是车辆    this.CurrentVehicleId=-1;  //车辆ID    this.CurrentVehicleName="";  //车牌号    this.form;    this.window;    this.InitComponent();}capturePhotoWin_Designer.prototype = {    /**     * 发送     */    sendHandler: function () {    //**第一 值        if(this.cbOne.checked==false && this.cbTwo.checked==false && this.cbThree.checked==false  && this.cbFour.checked==false            && this.cbFive.checked==false&& this.cbSix.checked==false&& this.cbSeven.checked==false&& this.cbEight.checked==false){               Ext.Msg.alert("提示","至少选择一个摄像头");               return;        }        var cameraCount=0;//总数        var temp1 = 0;        var temp2 = 0;        var temp3 = 0;        var temp4 = 0;        var temp5 = 0;        var temp6 = 0;        var temp7 = 0;        var temp8 = 0;        if(this.cbOne.checked==true){            temp1=1;        }        if(this.cbTwo.checked==true){            temp2=2;        }        if(this.cbThree.checked==true){            temp3=4;        }        if(this.cbFour.checked==true){            temp4=8;        }        if(this.cbFive.checked==true){            temp5=16;        }        if(this.cbSix.checked==true){            temp6=32;        }        if(this.cbSeven.checked==true){            temp7=64;        }        if(this.cbEight.checked==true){            temp8=128;        }        cameraCount=temp1+temp2+temp3+temp4+temp5+temp6+temp7+temp8;    //**第二 值         //拍摄张数        var shootCount = this.combo_countPhoto.getValue();         //拍摄间隔        var interval = this.combo_shootInterval.getRawValue();         //分辨率        var resolution =this.combo_resolution.getValue();        //保存标志        var saveFlag= this.rb_save.getValue().inputValue;    //**第三 值        //质量        var quality = this.sl_quality.getValue();        //亮度        var bright = this.sl_bright.getValue();        //色度        var chroma = this.sl_chroma.getValue();        //对比度        var contrast = this.sl_contrast.getValue();        //饱和度        var saturation = this.sl_saturation.getValue();        //弹出效果        Ext.MessageBox.show({            msg: '正在发送，请稍等...',            progressText: 'Saving...',            width:300,            wait:true,            waitConfig: {interval:200},            icon:'download',            animEl: 'saving'        });        setTimeout(function(){}, 1000);        //异步处理        Ext.Ajax.request({            url:$("#ctx").val() + "/purview/track/sendCapturePhoto.action",            method:"POST",            params:{                vid:this.vid, //vid                lpn:this.lpn,  //车牌号                cameraCount:cameraCount, //摄像头数                shootCount:shootCount,//拍摄张数                interval:0,//拍摄间隔                saveFlag:saveFlag,//保存标志                resolution:resolution, //分辨率                quality:quality,//质量                bright:bright,//亮度                contrast:contrast,//对比度                saturation:saturation,//饱和度                chroma:chroma//色度            },            success: function(response, options) {                var responseArray = Ext.util.JSON.decode(response.responseText);                if(responseArray.rc == 0){                    Ext.MessageBox.alert("提示", responseArray.retMsg);                    this.window.close();                }                else if(responseArray.rc >= 1 ){                    Ext.MessageBox.alert("提示", responseArray.retMsg);                }                else                {                    Ext.MessageBox.alert("提示","发送失败");                }            }.createDelegate(this)        });    },    /**     * 取消     */    cancelHandler: function () {        this.window.close();    },    /**     * 窗体显示后触发     */    onShow: function () {        HideWaitingHint();    },    /**     * 窗体显示     */    Show: function () {        this.window.show();    },    ShowChange:function(){        this.label1.setText(this.sl_quality.getValue());    }}capturePhotoWin_Designer.prototype.InitComponent = function () {    //***********************第一***************************    this.cbOne =new Ext.form.Checkbox({        boxLabel:"1号",        labelWidth:1    });    this.cbTwo =new Ext.form.Checkbox({        boxLabel:"2号",        labelWidth:1    });    this.cbThree =new Ext.form.Checkbox({        boxLabel:"3号",        labelWidth:1    });    this.cbFour =new Ext.form.Checkbox({        boxLabel:"4号",        labelWidth:1    });    this.cbFive =new Ext.form.Checkbox({        boxLabel:"5号",        labelWidth:1    });    this.cbSix =new Ext.form.Checkbox({        boxLabel:"6号",        labelWidth:1    });    this.cbSeven =new Ext.form.Checkbox({        boxLabel:"7号",        labelWidth:1    });    this.cbEight =new Ext.form.Checkbox({        boxLabel:"8号",        labelWidth:1    });    //汇总1    this.fs_Camera = new Ext.form.FieldSet({        title: "摄像头选择",        layout: "column",        defaults :        {//应用到每一个子元素上的配置            labelWidth: 1,            border : false,//不显示边框            layout : 'form'//在列布局中嵌套form布局        },        width: 520,        height: 85,        items:            [                {columnWidth:0.25,items:[this.cbOne,this.cbFive]}, //列                {columnWidth:0.25,items:[this.cbTwo,this.cbSix]},                {columnWidth:0.25,items:[this.cbThree,this.cbSeven]},                {columnWidth:0.25,items:[this.cbFour,this.cbEight]}            ]    });    //***********************第二****************************    //拍摄张数    this.countphotoStore = new Ext.data.SimpleStore({        fields: ["id", "text"],        data: [            [1,"1"], [2,"2"],[3,"3"],[4,"4"],[5,"5"],            [6,"6"],[7,"7"],[8,"8"],[9,"9"],[10,"10"]        ]    });    this.combo_countPhoto = new Ext.form.ComboBox({        fieldLabel: "拍摄张数",        valueField: 'id',        displayField: 'text',        name: 'text',        store: this.countphotoStore,        typeAhead: true,        mode: 'local',        triggerAction: 'all',        selectOnFocus: true,        forceSelection: true,        editable: false,        width:50,        allowBlank: false,        value:10//默认值    });    //拍摄间隔    this.shootIntervalStore = new Ext.data.SimpleStore({        fields: ["id", "text"],        data: [            [1, "320×240"], [2, "640×480"], [3, "800×600"], [4, "1024×768"], [5, "176×144"],            [6, "352×288"], [7, "704×288"], [8, "704×576"]]    });    this.combo_shootInterval = new Ext.form.ComboBox({        fieldLabel: "拍摄间隔",        valueField: 'id',        displayField: 'text',        name: 'text',        store: this.shootIntervalStore,        typeAhead: true,        mode: 'local',        triggerAction: 'all',        selectOnFocus: true,        forceSelection: true,        editable: false,        width:80,        allowBlank: false,        value:1//默认值    });    //分辨率    this.resolutionStore = new Ext.data.SimpleStore({        fields: ["id", "text"],        data: [            [1, "320×240"], [2, "640×480"], [3, "800×600"], [4, "1024×768"], [5, "176×144"],            [6, "352×288"], [7, "704×288"], [8, "704×576"]]    });    this.combo_resolution = new Ext.form.ComboBox({        fieldLabel: "分辨率",        valueField: 'id',        displayField: 'text',        name: 'text',        store: this.resolutionStore,        typeAhead: true,        mode: 'local',        triggerAction: 'all',        selectOnFocus: true,        forceSelection: true,        editable: false,        width:80,        allowBlank: false,        value:1//默认值    });    //保存标志    this.rb_save =new Ext.form.RadioGroup({        fieldLabel: "保存标志",        columns:2,        items: [            { boxLabel: '实时上传', id: "0", name: "rbmsg", inputValue: 0,checked: true },            { boxLabel: '终端保存', id: "1", name: "rbmsg", inputValue: 1 }        ]    });     //汇总2    this.fs_shootSet= new Ext.form.FieldSet({        title: "拍摄设置",        layout: "column",        defaults :        {//应用到每一个子元素上的配置            border : false,//不显示边框            layout : 'form'//在列布局中嵌套form布局        },        width: 520,        height: 90,        items:            [                {columnWidth:0.4,labelWidth:60,items:[this.combo_countPhoto,this.rb_save]},                {columnWidth:0.3,labelWidth:60,items:[this.combo_shootInterval]},                {columnWidth:0.3,labelWidth:50,items:[this.combo_resolution]}            ]    });    //***********************第三***************************    this.sl_quality = new Ext.form.SliderField({        fieldLabel:"质量(0-10)",//        renderTo: 'basic-slider', //进度条存放的标签（一般是div的id）        width: 95,//进度条长度110        minValue: 0,        maxValue: 10,        clickToChange:true   //允许单击改变进度值      /*  listeners : {            'change':function(thiz, newValue, oldValue) {ShowChange(newValue);}//, //进度条改变值之前触发//            'changecomplete':function(slider, newValue){ChangeComplete(newValue);}   //进度条完成触发        }*/    });    this.sl_bright = new Ext.form.SliderField({        fieldLabel:"亮度(0-255)",        width: 95,//进度条长度        minValue: 0,        maxValue: 255,        clickToChange:true,        plugins: new Ext.slider.Tip({            getText: function (thumb) {                return this.label2.setText(thumb.value);            }        })    });    this.sl_saturation = new Ext.form.SliderField({        fieldLabel:"饱和度(0-127)",        width: 95,//进度条长度        minValue: 0,        maxValue: 127,        clickToChange:true   //允许单击改变进度值    });    this.sl_contrast = new Ext.form.SliderField({        fieldLabel:"对比度(0-127)",        width: 95,//进度条长度        minValue: 0,        maxValue: 127,        clickToChange:true   //允许单击改变进度值    });    this.sl_chroma = new Ext.form.SliderField({        fieldLabel:"色度(0-255)",        width: 95,//进度条长度        minValue: 0,        maxValue: 255,        clickToChange:true   //允许单击改变进度值    });    this.label1=new Ext.form.Label({        width:10    });    this.label2=new Ext.form.Label({        text:"试试a",        width:10    });    this.label3=new Ext.form.Label({        text:"试试a",        width:10    });    this.label4=new Ext.form.Label({        text:"啥啥啥a",        width:10    });    this.label5=new Ext.form.Label({        text:"a",        width:10    });     //汇总3    this.fs_photoset = new Ext.form.FieldSet({        title: "图像设置",        layout: "column",        defaults :        {//应用到每一个子元素上的配置//            labelWidth: 1,//这个要去掉 如果要显示长的且不相同标签的话            border : false,//不显示边框            layout : 'form'//在列布局中嵌套form布局        },        width: 520,        height: 120,        items:            [                {columnWidth:0.5,labelWidth:90,items:[                    {                        layout:'table',                        fieldLabel:"质量(0-10)",                        layoutConfig:{columns:3},                        border:false,                        items:[this.sl_quality]//,this.label1]                    },                    {                        layout:'table',                        fieldLabel:"亮度(0-255)",                        layoutConfig:{columns:3},                        border:false,                        items:[this.sl_bright]//,this.label2]                    },                    {                        layout:'table',                        fieldLabel:"色度(0-255)",                        layoutConfig:{columns:3},                        border:false,                        items:[this.sl_chroma]//,this.label3]                    }                   ]},                {columnWidth:0.5,labelWidth:90,items:[                    {                        layout:'table',                        fieldLabel:"饱和度(0-127)",                        layoutConfig:{columns:3},                        border:false,                        items:[this.sl_saturation]//,this.label4]                    },                    {                        layout:'table',                        fieldLabel:"对比度(0-127)",                        layoutConfig:{columns:3},                        border:false,                        items:[this.sl_contrast]//,this.label5]                    }]}            ]    });    //*****************放到Panel上***********************************    this.winPanel = new Ext.form.FormPanel({        plain:true,        region : 'center',        layout:"form",        defaultType:"textfield",        labelWidth:80,        width: 535,        height: 340,        labelAlign: "right",        baseCls:"x-plain",        bodyStyle:"padding:10px 0 0 12px",        items: [this.fs_Camera,this.fs_shootSet,this.fs_photoset]    });    //窗体    this.window = new Ext.Window({        title: "拍照下发",        width: 550,        autoHeight: true,        layout: 'fit',        plain: false,        iconCls: "addicon",        resizable: false,        collapsible: true,        closeAction: 'close',        closable: true,        shadow: false,        modal: 'true',        buttonAlign: "center",        items: [this.winPanel],        buttons: [            {                text: "发送",                minWidth: 70,                handler: this.sendHandler.createDelegate(this)            }, {                text: resourceCancel,                minWidth: 70,                handler: this.cancelHandler.createDelegate(this)            }        ],        listeners: { "show": this.onShow.createDelegate(this) }    });}
最终的形成：
0 0