titleCollapse:true,//高级搜索点击搜索显示,隐藏
页面调试样式
style:'margin-left:24px', //页面向右边移动24px
labelWidth:90 //页面字体的长度
labelWidth:90 //页面字体的长度
添加按钮 》弹出页面
1.添加按钮
//核销 在控制层页面添加页面路径》添加操作按钮》
window.allOrderListXlyView_orderFunc_consumeXLY = function(recordId,orders_id,orderNO){
Ext.getCmp('allOrderListXlyView').fireEvent('expensecalendar',recordId,orders_id,orderNO);
}
2.去defind.js页面添加弹出页面以及弹出的控制层
window.allOrderListXlyView_orderFunc_consumeXLY = function(recordId,orders_id,orderNO){
Ext.getCmp('allOrderListXlyView').fireEvent('expensecalendar',recordId,orders_id,orderNO);
}
2.去defind.js页面添加弹出页面以及弹出的控制层
// 线路游消费
var consumeXLYView_id_order = 'consumeXLYView_order';
var consumeXLYView_order = 'App.view.order.allOrderXly.consumeXLYView';
var consumeXLYController_order = 'App.controller.order.allOrderXly.consumeXLYController';
3.在弹出view时注意
var consumeXLYView_id_order = 'consumeXLYView_order';
var consumeXLYView_order = 'App.view.order.allOrderXly.consumeXLYView';
var consumeXLYController_order = 'App.controller.order.allOrderXly.consumeXLYController';
3.在弹出view时注意
Ext.define(
consumeXLYView_
order,{ //这个页面路径是defind.js
extend:'Ext.window.Window',
initComponent:function(){
Ext.apply(this,{
width:450,
height:450,
autoShow:true,
modal:true,
animCollapse : true,
animateTarget : Ext.getBody(),
layout:'fit',
items:[{
xtype:'form',
margin:'10 10 10 10',
scrollable:true,
items:[
{
xtype:'displayfield',fieldLabel:'消费订单号',name:'orderNO',width:150,labelWidth:80
},{
xtype:'fieldcontainer',
width:'100%',name:'refundNumContainer',
//hidden:true,
items:[{
xtype:'displayfield',fieldLabel:'电子码',name:'codeField',width:150,labelWidth:60
},{
xtype:'fieldcontainer',layout:{type:'hbox',align:'middle'},width:'100%',
items:[
{
xtype:'numberfield',fieldLabel:'退款数量',minValue:'1',name:'count',width:150,labelWidth:60,value:'1',
allowBlank:false,blankText:'退款数量不能为空'
},{
xtype:'tbtext',text:'',name:'refundAbleTbtext'
},
]
}]
},
{
xtype:'displayfield',fieldLabel:'产品名称',name:'printName',width:150,labelWidth:60
},
{
xtype:'displayfield',fieldLabel:'已消费数量',name:'consumeNum',width:150,labelWidth:80
},
]
}],
buttons:[{
text:'取消',
cls:'btn btn-danger',
handler:function(o){
o.up('window').close();
}
},{
text:'提交',
name:'btnOk',
cls:'btn btn-success'
}]
});
this.callParent(arguments);
}
});
extend:'Ext.window.Window',
initComponent:function(){
Ext.apply(this,{
width:450,
height:450,
autoShow:true,
modal:true,
animCollapse : true,
animateTarget : Ext.getBody(),
layout:'fit',
items:[{
xtype:'form',
margin:'10 10 10 10',
scrollable:true,
items:[
{
xtype:'displayfield',fieldLabel:'消费订单号',name:'orderNO',width:150,labelWidth:80
},{
xtype:'fieldcontainer',
width:'100%',name:'refundNumContainer',
//hidden:true,
items:[{
xtype:'displayfield',fieldLabel:'电子码',name:'codeField',width:150,labelWidth:60
},{
xtype:'fieldcontainer',layout:{type:'hbox',align:'middle'},width:'100%',
items:[
{
xtype:'numberfield',fieldLabel:'退款数量',minValue:'1',name:'count',width:150,labelWidth:60,value:'1',
allowBlank:false,blankText:'退款数量不能为空'
},{
xtype:'tbtext',text:'',name:'refundAbleTbtext'
},
]
}]
},
{
xtype:'displayfield',fieldLabel:'产品名称',name:'printName',width:150,labelWidth:60
},
{
xtype:'displayfield',fieldLabel:'已消费数量',name:'consumeNum',width:150,labelWidth:80
},
]
}],
buttons:[{
text:'取消',
cls:'btn btn-danger',
handler:function(o){
o.up('window').close();
}
},{
text:'提交',
name:'btnOk',
cls:'btn btn-success'
}]
});
this.callParent(arguments);
}
});
3 在弹出的controller控制层中注意
Ext.define(consumeXLYController_order,{ //这块需要换成与define.js相符的controller路径,这些里面必须与后台接口返回的数据字段相符合,才能显示出来
extend:'Ext.app.Controller',
views:[consumeXLYView_order],
init:function(){
var currentObjView = null;
var refundApplyCodeIds = [];
this.control({
'#consumeXLYView_order':{
'afterrender':function(o){
currentObjView = o;
Ext.Ajax.request({
url:__APP__+'/XlyOrders/listOrdersConsumeCodes',
params:{
orders_id:o.orderId
},
timeout:60000,
success:function(response,opts){
var text=Ext.decode(response.responseText);
if(text.success==false){
o.close();
Ext.MessageBox.alert('提示',text.msg);
}else {
var code = text.lists;
if(code.length>0)refundApplyCodeIds = code;
//console.log(code.length);
if(code.length==1){
o.down('fieldcontainer[name=refundNumContainer]').show();
o.down('displayfield[name=codeField]').setValue(code[0].code);
o.down('displayfield[name=orderNO]').setValue(o.orderNO);
var refundAbleNum = code[0].canRefundNum;
var printName = code[0].printName;
//console.log(printName);
o.down('numberfield[name=num]').setMaxValue(refundAbleNum);
o.down('displayfield[name=printName]').setValue(printName);
o.down('tbtext[name=refundAbleTbtext]').setText('(可退款数量'+refundAbleNum+')');
}else if(code.length>1){
o.down('numberfield[name=num]').disable();
o.down('fieldcontainer[name=refundCodeContainer]').show();
o.down('displayfield[name=orderNO]').setValue(o.orderNO);
Ext.Array.each(code,function(mv){
o.down('fieldcontainer[name=refundCodeContainer]').down('checkboxgroup').insert(0,{
boxLabel:mv.code, name:'codes', checkboxInputId:mv.id,submitValue:false
});
});
}
}
},
failure: function(response, opts) {
o.close();
Ext.MessageBox.alert('服务器出错',response.status);
}
});
}
},
'#consumeXLYView_order checkbox[name=selectAll]':{
'change':function(o,newValue,oldValue){
var checkboxgroup = Ext.ComponentQuery.query('fieldcontainer[name=refundCodeContainer] checkbox[name=codes]');
Ext.Array.each(checkboxgroup,function(mv){
mv.setValue(newValue);
});
}
},
'#consumeXLYView_order button[name=btnOk]':{
click:function(o){
//var checkboxs = Ext.ComponentQuery.query('numberfield[name=num]');
//var codeStr = [];
//Ext.Array.each(checkboxs,function(mv){
// if(mv.getValue()==true)codeStr.push(mv.checkboxInputId);
//});
//var code_id = codeStr.join(',');
//if(refundApplyCodeIds.length==1)code_id = refundApplyCodeIds[0].id;
o.up('window').down('form').submit({
waitMsg:'提交中...',
clientValidation: true,
submitEmptyText:false,
url: __APP__+"/index.php/XlyOrders/consumeOrder", //提交后调整页面的路径也相当于地址
params:{
order_id:currentObjView.orderId
},
success: function(form, action){
o.up('window').close();
Ext.getStore('order.allOrderXly.allOrderListStore').loadPage(1);
Ext.toast({
html: action.result.msg,
title: '提示',
width: 400,
align: 't'
});
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('退款失败', '无效输入');
break;
case Ext.form.action.Action.CONNECT_FAILURE:
Ext.Msg.alert('退款失败', '联网失败');
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.Msg.alert('退款失败', action.result.msg);
}
}
});
}
}
});
}
});
extend:'Ext.app.Controller',
views:[consumeXLYView_order],
init:function(){
var currentObjView = null;
var refundApplyCodeIds = [];
this.control({
'#consumeXLYView_order':{
'afterrender':function(o){
currentObjView = o;
Ext.Ajax.request({
url:__APP__+'/XlyOrders/listOrdersConsumeCodes',
params:{
orders_id:o.orderId
},
timeout:60000,
success:function(response,opts){
var text=Ext.decode(response.responseText);
if(text.success==false){
o.close();
Ext.MessageBox.alert('提示',text.msg);
}else {
var code = text.lists;
if(code.length>0)refundApplyCodeIds = code;
//console.log(code.length);
if(code.length==1){
o.down('fieldcontainer[name=refundNumContainer]').show();
o.down('displayfield[name=codeField]').setValue(code[0].code);
o.down('displayfield[name=orderNO]').setValue(o.orderNO);
var refundAbleNum = code[0].canRefundNum;
var printName = code[0].printName;
//console.log(printName);
o.down('numberfield[name=num]').setMaxValue(refundAbleNum);
o.down('displayfield[name=printName]').setValue(printName);
o.down('tbtext[name=refundAbleTbtext]').setText('(可退款数量'+refundAbleNum+')');
}else if(code.length>1){
o.down('numberfield[name=num]').disable();
o.down('fieldcontainer[name=refundCodeContainer]').show();
o.down('displayfield[name=orderNO]').setValue(o.orderNO);
Ext.Array.each(code,function(mv){
o.down('fieldcontainer[name=refundCodeContainer]').down('checkboxgroup').insert(0,{
boxLabel:mv.code, name:'codes', checkboxInputId:mv.id,submitValue:false
});
});
}
}
},
failure: function(response, opts) {
o.close();
Ext.MessageBox.alert('服务器出错',response.status);
}
});
}
},
'#consumeXLYView_order checkbox[name=selectAll]':{
'change':function(o,newValue,oldValue){
var checkboxgroup = Ext.ComponentQuery.query('fieldcontainer[name=refundCodeContainer] checkbox[name=codes]');
Ext.Array.each(checkboxgroup,function(mv){
mv.setValue(newValue);
});
}
},
'#consumeXLYView_order button[name=btnOk]':{
click:function(o){
//var checkboxs = Ext.ComponentQuery.query('numberfield[name=num]');
//var codeStr = [];
//Ext.Array.each(checkboxs,function(mv){
// if(mv.getValue()==true)codeStr.push(mv.checkboxInputId);
//});
//var code_id = codeStr.join(',');
//if(refundApplyCodeIds.length==1)code_id = refundApplyCodeIds[0].id;
o.up('window').down('form').submit({
waitMsg:'提交中...',
clientValidation: true,
submitEmptyText:false,
url: __APP__+"/index.php/XlyOrders/consumeOrder", //提交后调整页面的路径也相当于地址
params:{
order_id:currentObjView.orderId
},
success: function(form, action){
o.up('window').close();
Ext.getStore('order.allOrderXly.allOrderListStore').loadPage(1);
Ext.toast({
html: action.result.msg,
title: '提示',
width: 400,
align: 't'
});
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('退款失败', '无效输入');
break;
case Ext.form.action.Action.CONNECT_FAILURE:
Ext.Msg.alert('退款失败', '联网失败');
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.Msg.alert('退款失败', action.result.msg);
}
}
});
}
}
});
}
});
小知识:
inline-
block 行内块元素
1.i标签加背景图片
<i class="result-icon result-fail"></i>
</div>
css 文件
//
.result-box .result-icon {
width: 100px;
height: 100px;
margin: 0 auto 25px; // //上 0px 左右自动 下 25px
background-repeat: no-repeat; //属性设置是否及如何重复背景图像
background-position: center; //背景位置居中
background-size: cover; /*background-size的cover特定值会保持图像本身的宽高比例,将图片缩放到正好完全覆盖定义背景的区域。*/
display: block; //变成块状,这个属性一定要加,要不然不显示。因为<i>标签不是块级元素
}
.result-box .result-fail{
background-image:url(../img/failure.png) ;
}
2.让一个按钮居中显示
<div class="box">
<input type="button" class="btn">
</div>
.box{width:800px;}
.btn{width:100px;margin:0 auto;display:block;}