ExtJs常用代码片段

ExtJs常用代码片段

一、Extjs 中调用Ajax

  •  
  • JScript 代码   复制
  • 
    Ext.Ajax.request({
        url:'xxx.action',
            method:'post',
            params:{equipmentId: equipmentId,agentIds: agentIds},
            success:function(response,config){
                var json = Ext.util.JSON.decode(response.responseText);  
                    Ext.Msg.alert("提示信息",json.msg);
                    store.reload();
            },
            failure:function(){
                    Ext.MessageBox.alert("提示信息", "关联失败");  
                    store.reload();
           }
    });
    
    		
  • 二、form中的下拉框

  •  
  • JScript 代码   复制
  • 
    var tankType = new Ext.form.ComboBox({
        typeAhead: true,
        triggerAction: 'all',
        lazyRender:true,
        mode: 'remote',
        applyTo :'tankType',
        id:'tankType',
        disabled:true,
        msgTarget : 'side',
        width:135,
        editable:false,
        store: new Ext.data.Store({  //下拉框的数据源      
               proxy: new Ext.data.HttpProxy({url:'${ctx}/tankfarm/getTankTypes.action'}),
               reader: new Ext.data.JsonReader({},[ 
                   {name:'type_code'},    
                   {name:'type_name'}                                 
               ])
               }),
        valueField: 'type_code',//值字段
        displayField: 'type_name'//显示的字段
    });
    
    		
  • 三、form中的单选框

  •  
  • JScript 代码   复制
  • 
    {
        xtype: 'radiogroup',
        layout: 'table',
        width: 100,
        id: 'is_main_line',
        fieldLabel: '主侧线',
        defaultType: 'radio',
        border: false,
        sFormField: true,
        items: [{
               name: 'is_main_line',
        //这里加入name表示两个radio属于同一个组,形成单选模式,如果不加name或者两个name不一样,则会发生两个都会选择的情况
               boxLabel: '',
               xtype: 'radio',
               inputValue: '1',//单选框的实际值
              checked: true
        }, {
             name: 'is_main_line',
             boxLabel: '',
             xtype: 'radio',
             inputValue: '2'
           }
              ]
    }
    
    		
  • 四、grid添加单元格悬浮显示内容

  •  
  • JScript 代码   复制
  • 
    {header:'名称',width:50,dataIndex:'name',menuDisabled:true,menuDisabled:true,renderer : function(value, metadata, record, rowIndex, columnIndex,store) {
         value = value.replace(/</g,'&lt');
         metadata.attr = 'ext:qtip="' + value + '<br/>"';
         return value;
        }
    }
    
    		
  • 五、树节点右键菜单

    1、建立菜单Menu

  •  
  • JScript 代码   复制
  • 
    var materialMenu = new Ext.menu.Menu({
         items : [
            {text : "增加",
                 id : 'add',
                handler : function() {}
            },
            { text : "修改",
                    id : 'update',
                   handler : function() {}
             },
             {text : "删除",
                 id : 'delete',
                handler : function() {}
          }]
    });
    
    		
  • 2、为树添加监听器

  •  
  • JScript 代码   复制
  • 
    listeners : {
       'contextmenu' : function(node, event) {
             materialMenu.showAt(event.getPoint());
        }
    }
    
    		
  • 六、grid隔行变色 

    
    1、自定义一个CSS
    
    <style type="text/css">
    .my_row_Red table{ background:Red}
    
    .my_row_Green table{ background:Green}
    </style>
    
    

    2、然后在GridPanel里这样写

  •  
  • JScript 代码   复制
  • 
    viewConfig : {
              getRowClass : function(record,rowIndex,rowParams,store){
                  if(rowIndex%2==0){
                      return 'my_row_Red';
                  }else{
                      return 'my_row_Blue';
                  }
            }
    }
    
    		
  • 七、extjs中grid显示Date类型数据

    在定义storerender里增加一行配置,除了设置name以外,还设置了typedataFormat两个属性。其中type属性会告诉reader在解析原始数据时把对应的列作为日期类型处理,dataFormat属性把得到的字符串转换成相对应的日期格式。按照EXT的约定,Y是年,m是月,d是日,H是小时,i是分钟,s是秒。

  •  
  • JScript 代码   复制
  • 
    var store = new Ext.data.Store({
            proxy: new Ext.data.MemoryProxy(data),
            reader: new Ext.data.ArrayReader({}, [
                {name: 'id'},
                {name: 'name'},
    标签: