ext知识总结

1.ext之Controller

Ext.define('Lube.controller.customer.CustomerPurifyController', { 
    extend: 'Ext.app.Controller',
    views: ['customer.CustomerPurifyView'],
    refs:[ 
         {ref : 'customerpurifyview', selector: 'customerpurifyview' },
         {ref : 'framecenterview',selector:'framecenterview'}
 ],
 init:function(){
      this.control({
       'customerpurifyview button[action=searchForm]':{
        click:this.searchForm//净化案例搜索查询
    },
    'customerpurifyview button[action=resetSearchForm]':{
     click:this.resetSearchForm//清空净化案例搜索
    },
    'customerpurifyview button[action=delete]':{
     click:this.delete//删除
    }
         });
 },
 searchForm:function(button, e, eOpts){
     var customerpurifyview = this.getCustomerpurifyview();
  var from = customerpurifyview.registerItems.searchConditionForm.form;
  var paramJson = {
    'code':from.findField('code').value,
    'disposer':from.findField('disposer').value,
    'status':from.findField('status').value,
    'creator':from.findField('creator').value,
    'priority':from.findField('priority').value
  };
  var paramJsonArray  = [];
  paramJsonArray.push(paramJson);
  paramJsonArray = Ext.encode(paramJsonArray);
  var reloadParameters = {
    'array':paramJsonArray,
  };
  var searchviewStore = customerpurifyview.registerItems.resultListGrid.getStore();
  Ext.apply(searchviewStore.proxy.extraParams, reloadParameters);
  searchviewStore.load();
    },
    resetSearchForm:function(button, e, eOpts){
     this.getCustomerpurifyview().registerItems.searchConditionForm.reset();
    },
    delete:function(button, e, eOpts){
     var rows = Ext.getCmp("customerPurifyGridId").getSelectionModel().getSelection();
  if(rows.length == 0) {  
      Ext.Msg.alert("系统提示", "至少选中一个净化案例!"); 
  }else{
   var itcIds = [];
   for(var i=0;i<rows.length;i++){
     itcIds.push(rows[i].data.code);
   }
   Ext.Ajax.request({
    url:'customer/deletePurifyCase.do?id='+itcIds,
    method:'post',
    timeout:180000,
    scope:this,
    success:function(response,aab){
     Ext.Msg.alert('系统提示','净化案例删除成功!');
    },
    failure : function(data) {
     Ext.Msg.alert("系统提示",'净化案例删除失败!');
    }
   });
  }
    }
});

2.ext之treepanel

Ext.define('Lube.view.customer.CustomerHomeView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.customerhomeview',
    id : 'customerhomeviewId',
    layout: {
        type: 'hbox',
        pack: 'start',
        //align: 'stretch'
    },
    items:[
           {    
             xtype:'treepanel',
       title:'<h2 style="height:8px">搜索</h2>',
       margin: 10,
       width: '48%',
       split: true,
       border:true,
       name:"customerhomepanel",
       enableDD : false,   
    useArrows: false,   
    rootVisible: false,    
    autoScroll : true, 
    lines:false,
    iconCls:'no-icon',
       layoutConfig: {
           titleCollapse: true,
           animate: true
       }, 
       store: Ext.create('Ext.data.TreeStore', {
           root: {
               expanded: true,
               children: [
                   { text: "搜索重复客户（手机 电话）",iconCls:'no-icon', leaf: true,id:'duplicatequeryviewId'},
                   { text: "搜索:客户档案", iconCls:'no-icon', leaf: true,id:'customerviewId'},
                   { text: "净化案例", iconCls:'no-icon', leaf: true,id:'customerpurifyviewId'},
                   { text: "档案合并:检查事件迁移", iconCls:'no-icon', leaf: true }
               ]
           }
       }),
       rootVisible: false,
       renderTo: Ext.getBody()
               }
           ,{
             xtype : 'treepanel',
          title: '<h2 style="height:8px;">客户档案管理</h2>',
          margin: 10,
          width: '48%',
          split: true,
          border:true,
       enableDD : false,   
       useArrows: false,   
       rootVisible: false,    
       autoScroll : true, 
       lines:false,
          layoutConfig: {
              titleCollapse: true,
              animate: true
          }, 
          store: Ext.create('Ext.data.TreeStore', {
              root: {
                  expanded: true,
                  children: [
                      { text: "批量上载客户数据",iconCls:'no-icon', leaf: true },
                         { text: "批量更新客户标识号",iconCls:'no-icon', leaf: true },
                      { text: "审批客户数据（分子公司递报）",iconCls:'no-icon', leaf: true },
                         { text: "",iconCls:'no-icon', leaf: true }
                      ]
              }
          }),
          rootVisible: false,
          renderTo: Ext.getBody()
           }
    ]
});

3.ext之view

Ext.Msg.buttonText={yes:'确定',no:'取消',ok:'确定',cancel:'取消'};
Ext.define('Lube.view.customer.CustomerPurifyView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.customerpurifyview',
    id : 'customerpurifyviewId',
    title:'净化案例',
    width:'100%',
    height:'100%',
    layout: 'border',
    registerItems:{
     searchConditionForm : null,
     resultListGrid : null
    },
    initComponent:function(){
      this.items = this.createItems();
      this.callParent(arguments);
    },
    createItems:function(){
     var me = this;
     var searchConditionForm = Ext.create('Ext.form.Panel',{
      name:'searchConditionForm',
      title:'搜索条件',
         //defaultType: 'textfield',
         autoHeight : true,
         frame : true,
            defaults: {
             anchor: '80%',
         },
         fieldDefaults: {
             labelWidth: 80,
             labelAlign: "right",
             flex: 1,
             margin:5
         },
      items:[{
          style:'margin-left:80px',
             xtype: "container",
             layout: "hbox",
             items: [
                 { xtype: "textfield", name: "code",fieldLabel: "净化案例编号"},
                 { xtype: "combo", name: "disposer",fieldLabel: "处理者(用户)",
         editable:false,
         displayField : 'name',
         store : Ext.create('Ext.data.Store',{
          fields : ['id','name'],
          data : [
                  {"id":"1","name":"系统用户"}
          ]
         })
        },
                 { xtype: "combo", name: "status",fieldLabel: "状态",value:'全部',
         editable:false,
         displayField : 'name',
         store : Ext.create('Ext.data.Store',{
          fields : ['id','name'],
          data : [
                  {"id":"1","name":"新建"},
                  {"id":"2","name":"在处理中"},
                  {"id":"3","name":"已拒绝"},
                  {"id":"4","name":"合并成功"},
                  {"id":"5","name":"合并失败"}
          ]
         })
        },
             ]
         },{
          style:'margin-left:80px',
             xtype: "container",
             layout: "hbox",
             items: [
                 { xtype: "textfield", name: "account",fieldLabel: "账户"},
                 { xtype: "combo", name: "creator",fieldLabel: "创建者",editable:false},
                 { xtype: "combo", name: "priority",fieldLabel: "优先级",value:'全部',
         editable:false,
         displayField : 'name',
         store : Ext.create('Ext.data.Store',{
          fields : ['id','name'],
          data : [
                  {"id":"1","name":"普通重要"},
                  {"id":"2","name":"非常重要"}
          ]
         })
        }
             ]
         },{
          style:'margin-left:80px',
             xtype: "container",
             layout: "hbox",
             items: [
                 { xtype: "datefield", name: "createTime",fieldLabel: "创建时间", format:DATEFORMAT},
                 { xtype: "datefield", name: "returnTime",fieldLabel: "至",format:DATEFORMAT,labelWidth:8}
             ]
         }],
            buttonAlign:'center',
         buttons: [
                  { xtype : 'button',text:'搜索',action:'searchForm'},
                  { xtype : 'button',text:'清除',action:'resetSearchForm'}
              ]
     });
     //搜索功能
     me.registerItems.searchConditionForm = searchConditionForm;
     var customerPurifyStore = Ext.create('Lube.store.customer.CustomerPurifyStore');
     //列表展示
     me.registerItems.resultListGrid = Ext.create('Ext.grid.Panel',{
      id:'customerPurifyGridId',
      name:'resultListGrid',
      layout:'fit',
      border : true,
      title:'结果列表',
      autoScroll:true,
      columnLines:true,
      frame:true,  //面板渲染
      store:customerPurifyStore,
      selType:"checkboxmodel",  //设置选择模式，设置成多选框的模式
            multiSelect:true,   //设置成多选
   columns: [
       //{dataIndex:'customerId',hidden:true},
          { text: '净化案例编号',  dataIndex: 'code',sortable:true,align:'center',width:80},
          { text: '客户', dataIndex: 'name', sortable:true,align:'center', width:100},
          { text: '状态', dataIndex: 'status',sortable:true,align:'center', width:100},
          { text: '优先级', dataIndex: 'priority',sortable:true,align:'center', width:100},
          { text: '处理者', dataIndex: 'disposer',sortable:true,align:'center', width:200},
          { text: '创建日期', dataIndex: 'createTime',sortable:true,align:'center', width:80}
      ],
      tbar:[{
       xtype:'button',
    html:'删除',
    //iconCls: 'ok-icon',  
       action:'delete'
   },"->"],
      bbar : new Ext.PagingToolbar({
    store : customerPurifyStore,
    displayInfo : true,
    displayMsg : '显示第<font color=red>{0}</font>条到<font color=red>{1}</font>条记录，一共<font color=red>{2}</font>条',
    emptyMsg : '<font color=red>没有记录</font>'
    
   }),
      stripeRows : true,//各行变色
   forceFit: true, //列表宽度自适应 
   loadMask : {
    msg : '正在加载<font color=red>客户</font>列表信息，请稍后……'
   }
     });
     //显示视图
        var centerView = Ext.create('Ext.panel.Panel',{
            region:'center',
            layout: 'anchor',
         autoScroll: true,   //自动创建滚动条
            items:[me.registerItems.searchConditionForm, me.registerItems.resultListGrid]
        });
        return [centerView];
    }
});

 

转载于:https://my.oschina.net/yunsy/blog/605661