Ext小总结

titleCollapse:true,//高级搜索点击搜索显示，隐藏

页面调试样式

style:'margin-left:24px', //页面向右边移动24px
 labelWidth:90 //页面字体的长度

添加按钮 》弹出页面

1.添加按钮

//核销  在控制层页面添加页面路径》添加操作按钮》
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时注意

 Ext.define(consumeXLYView_order,{ //这个页面路径是defind.js
   extend:'Ext.window.Window',
   initComponent:function(){
        Ext.apply(this,{
              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',150,labelWidth:80
                  },{
                      xtype:'fieldcontainer',
                      '100%',name:'refundNumContainer',
                      //hidden:true,
                      items:[{
                          xtype:'displayfield',fieldLabel:'电子码',name:'codeField',150,labelWidth:60
                      },{
                          xtype:'fieldcontainer',layout:{type:'hbox',align:'middle'},'100%',
                          items:[
                    
                          {
                              xtype:'numberfield',fieldLabel:'退款数量',minValue:'1',name:'count',150,labelWidth:60,value:'1',
                              allowBlank:false,blankText:'退款数量不能为空'
                          },{
                              xtype:'tbtext',text:'',name:'refundAbleTbtext'
                          },
                            
                          ]
                      }]
                  },
                  {
                    xtype:'displayfield',fieldLabel:'产品名称',name:'printName',150,labelWidth:60
                    },
                  
                  {
                      xtype:'displayfield',fieldLabel:'已消费数量',name:'consumeNum',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: '提示',
                                   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 {
    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{800px;}
.btn{100px;margin:0 auto;display:block;}