ExtJs 常用代码

//ExtJs 表单提交   
form.getForm().submit({   
    success:function(){   
    },   
    failure:function(){   
    }   
});   
  
//ExtJs Ajax表单提交   
form.form.doAction('submit', {       
    url : 'user.do?method=login',         
    method : 'post',       
    // 如果有表单以外的其它参数，可以加在这里。我这里暂时为空，也可以将下面这句省略           
    params : '',        
    // 第一个参数是传入该表单，第二个是Ext.form.Action对象用来取得服务器端传过来的json数据           
    success : function(form, action) {        
        Ext.Msg.alert('操作', action.result.data);   //result为json对象        
        this.disabled = false;         
    },           
    failure : function(form, action) {        
        Ext.Msg.alert('警告', '用户名或密码错误！');           
        // 登录失败，将提交按钮重新设为可操作           
        this.disabled = false;         
    }           
});           
  
  
//ExtJs Ajax普通提交   
Ext.Ajax.request({                
     url: 'login.do',    //请求地址        
     //提交参数组           
     params: form.getForm().getValues(),   //取出表单所有值                    
     //成功时回调           
     success: function(response, options) {           
        //获取响应的json字符串           
       var responseArray = Ext.util.JSON.decode(response.responseText);                                                        
        if(responseArray.success==true){           
            Ext.Msg.alert('恭喜','您已成功登录！');               
        } else{           
            Ext.Msg.alert('失败','登录失败，请重新登录');               
        }           
    }           
});      
  
//grid   
var myData = ${jobs}; //二维数组   
var store = new Ext.data.ArrayStore({   
    fields: [   
       {name: 'group'},   
       {name: 'name'},   
       {name: 'description'},   
       {name: 'jobClass'},   
       {name: 'namegroup'}   
    ]   
});   
store.loadData(myData);   
var grid = new Ext.grid.GridPanel({   
    title:"<fmt:message key='title.listAllJobs'/>",   
    store: store,   
    width:all_width,   
    autoHeight : true,   
    autoExpandColumn : 'namegroup',    
    viewConfig : {   
       forceFit : true    
    },   
    stripeRows: true,   
    columns: [   
        {header: "<fmt:message key='label.job.group'/>", width: 140, sortable: true, dataIndex: 'group'},   
        {header: "<fmt:message key='label.job.name'/>", width: 140, sortable: true, dataIndex: 'name'},   
        {header: "<fmt:message key='label.job.description'/>", width: 180, sortable: true, dataIndex: 'description'},   
        {header: "<fmt:message key='label.job.jobClass'/>", width: 200, sortable: true, dataIndex: 'jobClass'},   
        {id : 'namegroup',header: "<fmt:message key='label.global.actions'/>", dataIndex: 'namegroup', renderer: change}   
    ],   
    bbar: new Ext.PagingToolbar({ afterPageText: '/ {0}',beforePageText: '页',firstText: '第一页'  
        ,prevText: '前一页',nextText: '后一页',lastText: '最后一页',refreshText: '刷新',store: store   
        , pageSize: 20,displayInfo: true, displayMsg: '显示 {0} - {1} 条记录，共 {2} 条', emptyMsg: "没有数据"})   
});   
           
//下拉列表   
//静态   
var fields=["name","valtext"];   
var data_combo=[['01','1月'],['02','2月']];   
var store_combo = new Ext.data.SimpleStore({    
    fields:fields,   
    data:data_combo   
});   
//动态   
var dsUrl_combo ="${pageContext.request.contextPath}/adapter2Table.table?key=combo&dropdownlist=true";    
var store_combo = new Ext.data.Store({    
    url:dsUrl_combo,   
    autoLoad: true,   
    reader: new Ext.data.JsonReader({},[//设置如何解析   
    {name:'name'},{name:'valtext'}   
    ])   
    ,listeners:{   
        "load":function(){}   
    }   
});   
var comboBox_combo = new Ext.form.ComboBox({   
    id:'comboBox_comboId',   
    hiddenName:'',   
    width: 75,    
    selectOnFocus : true,       
    allowBlank:false,   
    readOnly:true,   
    emptyText: '',    
    fieldLabel:'',     
    store:store_combo,   
    triggerAction: "all",  //不加该语句选中某项后   
    mode: "local",   //动态需要    
    displayField: "name",   
    valueField: "valtext",   
    listeners: {   
        "select": function (combo,record,index){    
            //record.get("name");   
         }   
    }              
});        
//下拉框传参   
Ext.getCmp("combo").store.baseParams.bz=bz ;   
Ext.getCmp("combo").store.load() ;   
  
//表单   
var form = new Ext.FormPanel({   
    id:'form',   
    width: '',   
    height:'',   
    labelWidth: '',             //标签宽度   
    layout:'column',            //分列   
    style:'padding:4 4 2 4',   
    //fileUpload:true,文件上传   
    defaults:{layout:'form'},   //子项默认使用form样式   
    colspan:2,   
    frame:true,   
    submit: function(){   
       this.getEl().dom.action = '${pageContext.request.contextPath}/layout.table?method=addData'; //连接到服务器的url地址   
       this.getEl().dom.method = 'post';   
       this.getEl().dom.submit();   
    },   
    items:[   
    {      
        columnWidth:.17,   
        items: [{   
            xtype:'label',   
            text:'',   
            emptyText:'',   
            allowBlank:false,   
            blankText:'',   
            regex:/^[A-Za-z0-9]+$/,   
            regexText:'',   
            maxLength:20,    
            maxLengthText:''  
        },{   
            xtype:"textfield",   
            id:"type",   
            name:"TYPE_",   
            hidden:true,   
            hideMode:"display",   
            hideLabel:true,   
            value:'1'  
        }]   
    },{   
        columnWidth:.04,   
        items: [comboBox_combo]   
    }],   
    buttons:[{   
        text:'上传',   
        xtype:'button',   
        handler:function(){   
        }   
    }]   
});    
//form.getForm().isValid()      //验证   
  
//按钮   
var button = new Ext.Button({   
    text:'查询',   
    listeners:{click:function(){   
    }}   
})   
  
//窗口   
var win = new Ext.Window({//添加/修改菜单弹出窗口   
    id:'winId',   
    title:'',   
    width: '',   
    height:'',   
    layout: 'fit',   
    modal:true,   
    closeAction:'hide',   
    buttonAlign:'center',   
    resizable:false,   
    items: [grid]   
});    
Ext.getCmp('winId').show();   
  
//监听事件   
listeners:{   
    render:function(){}   
    click:function(){}   
    hide:function(){}   
    select:function(){}   
    change:function(){}   
    load:function(){}   
}      
type.on("select",function(combo,record,index){   
    //record.get('valtext')   
});   
  
//表格   
var table = new Ext.Panel({   
    renderTo:'content',   
    layout:'table',   
    width:'',   
    border:false,   
    layoutConfig: {columns:2},      //划分两列   
    bodyStyle:'background:#dfe8f6;border: 1px solid #dfe8f6',   
    defaults: {frame:true},         //填充文本背景颜色   
    items:[form,chart,grid]   
})   
  
//标签页   
var tabs = new Ext.TabPanel({   
    resizeTabs:true, // tab宽度自动调整   
    minTabWidth: 115,   //tab最小宽度值   
    tabWidth:135,       //tab初始宽度   
    enableTabScroll:true,//tab超出范围出现横向滚动条   
    frame:true,   
    activeTab:0,   
    defaults: {bodyStyle:'background:#dfe8f6;border: 1px solid #dfe8f6'},    
    listeners:{   
        activate:function(e){   
            tabs.hideTabStripItem(0),//隐藏   
            tabs.unhideTabStripItem(0),//显示   
            tabs.setActiveTab(1)//选中   
        }   
    }      
    items:[{   
        id:'tab1_1',   
        title:'',   
        items:[chart1]  //添加table   
    },{   
        id:'tab1_2',   
        title:'',   
        items:[chart2]   
    }]   
});   
  
var tools = [{   
    id:'gear',   
    qtip :'为表单分配权限',   
    handler: function(e, target, panel){   
        //获得grid中所选的表单编号（即id值）   
        sRows = grid.getSelections('id_');   
        if(sRows==null) {   
            Ext.Msg.show({title:'提示',msg: '<b>请选择表单后再分配权限!</b>',   
                buttons: {ok:'确定'},icon: Ext.MessageBox.INFO,maxWidth :300,minWidth :300,   
                closable:false,defaultTextHeight :100   
            });   
            return;   
        }   
    }   
}]   
  
//动态树   
var tree = new Ext.tree.TreePanel({   
    id:'tree',   
    border: false,   
    containerScroll: true,   
    enableDD:false,//设置是否允许拖拽   
    useArrows: false,//是否使用箭头记号,默认为false   
    rootVisible :true,//设置是否显示根节点   
    autoScroll:true,   
    //enableDD: true,//可拖拽   
    //tools:tools, //标题图标按钮   
    loader: new Ext.tree.TreeLoader({    
        dataUrl: '${pageContext.request.contextPath}/treeQuery.tree?method=queryNode&key=product_order',   
        listeners:{beforeload:function(treeLoader, node) {   
                    this.baseParams.id = node.id;   
        }}   
    }),   
    root: {   
        nodeType: 'async',   
        text: '',   
        draggable: false,   
        id: '-1'  
    },   
    listeners:{   
        click:function(node,ev){   
            id=node.id;   
        }   
    },   
    'contextmenu':function(node,e)   
    {   
        e.preventDefault();   
        if(Ext.getCmp('treeMenu') != undefined){   
            Ext.getCmp('treeMenu').destroy();   
        }   
        var treeMenu = new Ext.menu.Menu( {   
            id : 'treeMenu',   
            items : [{   
                        id      : 'add',   
                        text    : '添加',   
                        icon    : "${pageContext.request.contextPath}/images/icon/add_tree_node.png",   
                        handler : function(){addOrUpdatekHandler(node,e);}   
                      },{   
                        id      : 'del',   
                        text    : '删除',   
                        icon    : "${pageContext.request.contextPath}/images/icon/delete_1.gif",   
                        handler : function(){delHandler(node,e);}   
                   }]   
        });   
        if(node.id == rootId){   
            treeMenu.items.get("del").hidden = true;   
        }   
        coords = e.getXY();   
        treeMenu.showAt(coords);   
    }   
});   
  
//静态树   
var Docs = {};       
Docs.classData={       
    "id":"root",       
    "text":"宾栏",       
    "singleClickExpand":true,       
    "expanded":true,       
    "leaf":false,   
    "children": [{       
        "id":"id1",       
        "iconCls":"icon-pkg",       
        "text":"子节点一",       
        "singleClickExpand":true,//单击节点是否展开   
        "qtip":"asdk",//需要使用 Ext.QuickTips.init();//开启提示功能       
        "singleClickExpand":true,       
        "expanded":true,       
        "leaf":true      
    }]   
};      
var tree = new Ext.tree.TreePanel({   
    id:'tree',   
    height:608,   
    autoScroll: true,   
    collapsible: true,   
    enableDrag:true,   
    ddGroup: 'customDDGroup',   
    split: true,   
    margins: '2 2 2 2',   
    useArrows:true,   
    rootVisible : false,   
    loader: new Ext.tree.TreeLoader({       
        preloadChildren: true,//若为true，则loader在节点第一次访问时加载"children"的属性       
        clearOnLoad: false//（可选）默认为true。在读取数据前移除已存在的节点       
    }),       
    root: Docs.classData,   
    listeners:{   
        click:function(node){   
        }   
    }   
});   
  
//展开树响应每个节点   
tree.on("append",function(tree,parentNode,node,index){   
    node.attributes.checked=true;   
});   
/*  
tree.root.reload();  
tree.expandAll();   
tree.getLoader().load(tree.getRootNode());  
tree.getRootNode().expand()  
tree.getNodeById(obj.id)  
tree.root.appendChild(new Ext.tree.TreeNode({}));  
tree.root.remove();  
tree.getSelectionModel().getSelectedNode()  
tree.getLoader().load(oParentNode,function(){  
     oParentNode.expand();  
     oParentNode.eachChild(function(n){n.expand();});  
},this);  
*/  
  
var DropTarget_H = new Ext.dd.DropTarget(Ext.getDom(''), {)//拖拽目标对象   
    ddGroup: 'DDGroup',//然后将Tree定义的时候的ddGroup设置成一样，就可以将Grid中的数据拖向Tree了，   
    notifyDrop: function(ddSource, e, data){   
        var node = ddSource.dragData.node;   
    }   
});   
  
//框架面板   
var border = new Ext.Panel({   
    layout:'border',   
    renderTo:'content',   
    width:'',   
    height:'',   
    items:[{   
        region:'north',   
        xtype:'panel',   
        margins: '4 4 2 4',   
        height:42,   
        bodyStyle:'background:#dfe8f6;border: 1px solid #dfe8f6',   
        items:[form]   
    },{   
        region:'west',   
        id:'west-panel',   
        width: '',   
        style:'padding:2 2 4 4',   
        collapsible: true,   
        layout:'accordion',//滑动菜单   
        defaults:{border:false},   
        layoutConfig:{   
            animate:true  
        },   
        items: [{   
            title:'菜单1',   
            items:[tree]   
        },{   
            title:'菜单2',   
            contentEl:'hw'  
        }]   
    },{   
        region:'center',   
        style:'padding:2 4 4 2',   
        border:false,   
        items:[tabs]   
    }]   
});   
  
//日期控件   
var dateSign_start = new Ext.form.DateField({   
    value:startTime,   
    format:"Y-m",   
    fieldLabel:'开始时间',   
    listeners:{   
        change:function(){   
        }   
    }    
});   
  
//Ext dom操作   
Ext.getDom('')//返回Js对象   
Ext.getCmp('').getValue();   
Ext.getCmp("org-tree-panel").getChecked("id");//获得树节点   
Ext.getCmp('form').form.findField("name").setValue('1',true);   
Ext.getCmp('form').form.findField('name').getValue().inputValue;//radio选中值   
Ext.getCmp("comboId").hide();   
Ext.getCmp("comboId").getEl().up('.x-form-item').setDisplayed(false);//全部隐藏   
//checkbox选中值   
var checkbox = Ext.getCmp('form').form.findField('name');   
if(checkbox.items.get(i).checked){   
    checkbox.items.get(i).inputValue;   
}   
  
//表单中控件   
{   
    fieldLabel: '性别',   
    xtype:'radiogroup',   
    items:[{   
            boxLabel:'男',   
            name: 'SEX_',   
            value:"${SEX_}",   
            checked:true,   
            inputValue: 1   
        },{   
            boxLabel:'女',   
            name: 'SEX_',   
            inputValue: 2   
        }]   
},{   
    fieldLabel: 'SHOURU',   
    xtype:'checkboxgroup',   
    items:[{   
            boxLabel:'SHOURU1',   
            name: 'SHOURU',   
            checked:true,   
            inputValue: 1   
        },{   
            boxLabel:'SHOURU2',   
            name: 'SHOURU',   
            inputValue: 2   
        },{   
            boxLabel:'SHOURU3',   
            name: 'SHOURU',   
            inputValue: 3   
        }]   
},{   
    xtype:'field',   
    inputType:'file',   
    name:'SHUISHOU',   
    fieldLabel:'上传'  
},{   
    xtype:'textfield',   
    name:"",   
    hidden:true,   
    hideMode:"display",   
    hideLabel:true,   
    value:""  
},{   
    frame:false,border:false,baseCls:'x-plain',items:[{   
    xtype:'htmleditor',   
    id:'id_htmleditor',   
    width:500,   
    height:350,   
    name:'rulecontent_',   
    fieldLabel:'规则信息'  
}]}