ExtJS 列布局以及table布局的应用
代码：
/**
* 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) }
});
}
最终的形成：