ETX常用操作例子

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<%
String path = request.getContextPath();
response.setHeader("P3P", "CP=CAO PSA OUR");
%>
<head>
<title>权限管理页面</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css"
href="<%=path%>/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
href="<%=path%>/controlpanel/css/desktop.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript"
src="<%=path%>/ext/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="<%=path%>/ext/ext-all.js"></script>
<script type="text/javascript">

Ext.onReady(function() {

Ext.QuickTips.init();

var customservice_rn = null;//行序列
        var customservice_sm = null;//复选框
        var customservice_cm = null;//用户信息表格列模型
        var customservice_bbar = null;//用户信息分页条
        var customservice_ds = null;//用户信息数据源
        var customservice_grid = null;//用户信息Grid对象        
       
        var customservice_query_form = null;//搜索Form对象
         //窗口对象
        var roleuserinfo_add_form = null;//管理用户权限表单     
        var roleuserinfo_add_window = null;//管理用户角色详情窗口  
        var roleuserinfo_window = null; 
       
        var crm_roleuserinfo_detail_form = null;//CRM权限列表表单
        var crm_roleuserinfo_detail_window = null;//CRM权限列表表单
       
        var roleinfo_cmb = null;//角色下拉框
        var roleinfo_ds = null;//角色数据源
       
        var dictionary_cmb = null;//营业部下拉框
        var dictionary_ds = null;//营业部数据源
       
       
        var roleuserinfo_loadmask = new Ext.LoadMask(Ext.getBody(), {  
            msg : "正在处理,请稍候..." 
            });
       
        //设置用户信息行序列
        customservice_rn = new Ext.grid.RowNumberer();       
       
        //设置复选框
        customservice_sm = new Ext.grid.CheckboxSelectionModel({
singleSelect:false //设置复选
});
       
        //初始化列标题
        customservice_cm = new Ext.grid.ColumnModel([
        customservice_rn,
        //customservice_sm,
        {
        header: "用户名",
        width: 100,
        sortable: false,
        dataIndex: 'name',
        menuDisabled  : true        
        },
        {
        header: "真实姓名",
        width: 100,
        sortable: false,
        dataIndex: 'realName',
        menuDisabled  : true
        },
        {
        header: "营部门名称",
        width: 100,
        sortable: false,
        dataIndex: 'branchName',
        menuDisabled  : true
        },        
        {
        header: "电子邮件",
        width: 100,
        sortable: false,
        dataIndex: 'email',
        menuDisabled  : true
        },
        {
        header: "手机号码",
        width: 100,
        sortable: false,
        dataIndex: 'mobile',
        menuDisabled  : true
        },      
        {
        header: "操作",
        width: 100,
        align: 'center',
        dataIndex: 'id',
        renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
          return "<a href='#' title='管理权限' onclick='roleuserinfo_add_function(\"" + record.data['id'] + "\")'><img src='<%=path%>/shared/icons/fam/plugin.gif'></a>";
        },
        menuDisabled  : true
        }
]);   
       
        //数据源绑定
    customservice_ds = new Ext.data.Store({
    proxy:  new Ext.data.HttpProxy({url:"<%=path%>/customServiceAction.do?method=getAllCustomService"}),                      
        reader: new Ext.data.JsonReader({
        root:'customServiceList',
       totalProperty : 'customServiceTotal'        
        },
        [
           {name: 'id',mapping: 'id',type: 'int'},
           {name: 'name',mapping: 'name',type: 'string'},
           {name: 'realName',mapping: 'realName',type: 'string'},
           {name: 'employeeId',mapping: 'employeeId',type: 'string'},
           {name: 'provinceId',mapping: 'provinceId',type: 'string'},
           {name: 'refId',mapping: 'refId',type: 'string'},
           {name: 'email',mapping: 'email',type: 'string'},
           {name: 'mobile',mapping: 'mobile',type: 'string'},
           {name: 'branchName',mapping: 'branchName',type: 'string'}
       ])
    });            
       
        //分页导航
        customservice_bbar = new Ext.PagingToolbar({
    pageSize: 15,
store: customservice_ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "没有记录",
afterPageText: '/ {0}',
     beforePageText: '页',
firstText: '首页',
    prevText: '上一页',
     nextText: '下一页',
     lastText: '尾页',
    refreshText: '刷新'
    });
   
    //数据表格对象
    customservice_grid = new Ext.grid.GridPanel({
    renderTo:'authority_grid_context',
            border:false,
            ds: customservice_ds,                     
            cm: customservice_cm,
            //width:730,
            //height:440, 
            width:Ext.getBody().getWidth(),
            height:Ext.getBody().getHeight()-45,
            region:'center',
            frame:false,
            resizable:false,
        collapsible: false,
            viewConfig: {
                forceFit:true
            },                              
            bbar: customservice_bbar           
        });
       
        roleinfo_ds = new Ext.data.Store({
        //autoLoad : true,
        //baseParams : {
// start:0,
// limit:1000
//},
    proxy:  new Ext.data.HttpProxy({url:"<%=path%>/roleInfoAction.do?method=getAllRoleInfo"}),                      
        reader: new Ext.data.JsonReader({
        root:'roleInfoList',
       totalProperty : 'roleInfoTotal'        
        },
        [
           {name: 'id',mapping: 'id',type: 'int'},
           {name: 'roleCode',mapping: 'roleCode',type: 'string'},
           {name: 'name',mapping: 'name',type: 'string'}
       ])
    });
   
    roleinfo_ds.load({params:{start:0, limit:1000}});
   
    dictionary_ds = new Ext.data.Store({
        //autoLoad : true,
        //baseParams : {
// start:0,
// limit:1000
//},
    proxy:  new Ext.data.HttpProxy({url:"<%=path%>/dictionaryAction.do?method=getAllDictionary"}),                      
        reader: new Ext.data.JsonReader({
        root:'dictionaryList'        
        },
        [
           {name: 'id',mapping: 'id',type: 'int'},
           {name: 'keyCode',mapping: 'keyCode',type: 'string'},
           {name: 'keyName',mapping: 'keyName',type: 'string'}
       ])
    });
   
    dictionary_ds.load();
   
        roleinfo_cmb = new Ext.form.ComboBox({
        id:'customservice_query_roleCode',
name:'customservice_query_roleCode',
fieldLabel: '角色名称',
width:80,
xtype:'combo',
typeAhead: true,
//readOnly:true,
store:roleinfo_ds,
loadingText: '',
valueField: 'id',
displayField:'name',
mode: 'remote',
triggerAction: 'all',
editable:false,
emptyText: '所有',
selectOnFocus:true,
forceSelection: true,
value: '',
resizable:true
});

dictionary_cmb = new Ext.form.ComboBox({
        id:'customservice_query_branchId',
name:'customservice_query_branchId',
fieldLabel: '营业部',
width:80,
xtype:'combo',
typeAhead: true,
//readOnly:true,
store:dictionary_ds,
loadingText: '',
valueField: 'keyCode',
displayField:'keyName',
mode: 'remote',
triggerAction: 'all',
editable:false,
emptyText: '所有',
selectOnFocus:true,
forceSelection: true,
value: '',
resizable:true
});
       
       
        customservice_query_form = new Ext.FormPanel({
        renderTo:'authority_query_context',
        //width: 730,
        width:Ext.getBody().getWidth(),
    height:45,
        border:false,
//bodyStyle:'padding:8px 8px;',
        frame:true,
        region:'north',
layout:'column',
items:[{
layout:'form',
border:false,
width:150,
labelWidth:50,
items:[{
xtype:'textfield',
             id: 'customservice_query_name',
                name: 'customservice_query_name',
fieldLabel: '用户名',
width:80
}]
        },{
layout:'form',
border:false,
width:160,
labelWidth:60,
items:[{
xtype:'textfield',
             id: 'customservice_query_realName',
                name: 'customservice_query_realName',
fieldLabel: '真实姓名',
width:80
}]
        },{
layout:'form',
border:false,
width:150,
labelWidth:50,
items:dictionary_cmb
        },{
layout:'form',
border:false,
width:160,
labelWidth:60,
items:roleinfo_cmb
        },{
layout:'form',
border:false,
labelWidth:10,
width:40,
items:[{
xtype:'button',
text:'查询',
labelWidth:10,
handler:function(){
var _customservice_query_name = Ext.get('customservice_query_name').getValue();
var _customservice_query_realName = Ext.get('customservice_query_realName').getValue();
var _customservice_query_branchId = Ext.getCmp('customservice_query_branchId').getValue();
var _customservice_query_roleCode = Ext.getCmp('customservice_query_roleCode').getValue();
customservice_ds.baseParams["query_name"] = _customservice_query_name;
        customservice_ds.baseParams["query_realName"] = _customservice_query_realName;
        customservice_ds.baseParams["query_branchId"] = _customservice_query_branchId;
        customservice_ds.baseParams["query_roleCode"] = _customservice_query_roleCode;
customservice_ds.load({params:{start:0, limit:15}}); 
}
}]
        },{
layout:'form',
border:false,
labelWidth:10,
width:40,
items:[{
xtype:'button',
text:'清空',
labelWidth:10,
handler:function(){
//customservice_query_form.getForm().reset();
Ext.getCmp('customservice_query_name').setValue(null);
Ext.getCmp('customservice_query_realName').setValue(null);
Ext.getCmp('customservice_query_branchId').setValue(null); 
Ext.getCmp('customservice_query_roleCode').setValue(null);
customservice_ds.baseParams["query_name"] = "";
        customservice_ds.baseParams["query_realName"] = "";
        customservice_ds.baseParams["query_branchId"] = "";
        customservice_ds.baseParams["query_roleCode"] = "";
        customservice_ds.load({params:{start:0, limit:15}}); 
}
}]
        }]
        });       
   
        //创建管理用户权限表单
        roleuserinfo_add_form = new Ext.FormPanel({       
        labelWidth: 200,
        frame:true,           
    bodyStyle:'padding:5px 5px 0',
    width: 600,
    height:400,
    autoScroll:true,
    defaults: {width: 200},   
        defaultType: 'textfield',
        modal:true,
        layout: 'column'            
        });            

//设置查看用户权限详情窗口
roleuserinfo_add_window = new Ext.Window({
id: 'roleuserinfo_add_window_id',
    title: '权限列表',
        width: 650,
        height:300,
        minWidth: 450,
        minHeight: 300,
        layout: 'fit',
        plain:true,
        bodyStyle:'padding:0px',
        buttonAlign:'center',
        closeAction: 'hide',
        items: roleuserinfo_add_form,
        buttons: [{
            id:'roleuserinfo_add_form_btn_modify',
            text: '修改',
            handler: function(){
            roleuserinfo_loadmask.show();
            roleuserinfo_modify_function(roleuserinfo_add_form.id);
            Ext.getCmp('roleuserinfo_add_form_btn_modify').disable();
            }     
        },{
            text: '取消',
            handler:function(){
            roleuserinfo_add_window.hide();
            }
        }]        
});

//创建管理用户权限表单
        crm_roleuserinfo_detail_form = new Ext.FormPanel({       
        labelWidth: 200,
        frame:true,           
    bodyStyle:'padding:5px 5px 0',
    width: 600,
    height:400,
    autoScroll:true,
    defaults: {width: 200},   
        defaultType: 'textfield',
        modal:true,
        layout: 'column'            
        });
       
        //设置查看用户CRM权限详情窗口
crm_roleuserinfo_detail_window = new Ext.Window({
id: 'crm_roleuserinfo_detail_window_id',
    title: 'CRM权限列表',
        width: 450,
        height:300,
        minWidth: 450,
        minHeight: 300,
        layout: 'fit',
        plain:true,
        bodyStyle:'padding:0px',
        buttonAlign:'center',
        closeAction: 'hide',
        items: crm_roleuserinfo_detail_form,
        buttons: [{
            text: '关闭',
            handler:function(){
            crm_roleuserinfo_detail_window.hide();
            }
        }]        
});


crm_roleuserinfo_detail_function = function(refId){

// 先删除原来的,防止重复
for(var i= crm_roleuserinfo_detail_form.items.length-1;i>=0; i--){                                                            
                crm_roleuserinfo_detail_form.remove(crm_roleuserinfo_detail_form.items.get(i));
}

Ext.Ajax.request({
url:'<%=path%>/crmRoleUserInfoAction.do?method=displayCRMRoleUserInfo',
method:'post',
params:{userId: refId},
success:function(form,action){  
        var obj = Ext.util.JSON.decode(form.responseText);        
        var jsonObj = obj.crmRoleUserInfoList;        
for(var i= 0; i< jsonObj.length; i++){                                                            
                        var stritem = new Ext.form.Label({'text':jsonObj[i].roleName});
crm_roleuserinfo_detail_form.add(stritem).show();
}
crm_roleuserinfo_detail_form.doLayout();
crm_roleuserinfo_detail_form.id = refId;
crm_roleuserinfo_detail_window.show();  
},   
    failure:function(form,action){   
    crm_roleuserinfo_detail_window.close();
        Ext.MessageBox.show({
                title: '警告',
                msg: '获取CRM权限列表出现异常,未能完成,请重试!',
                buttons:{"ok":"确定"},
                icon: Ext.MessageBox.ERROR
            });   
    }
});
}

//点击查看用户权限管理按钮事件
roleuserinfo_add_function = function(refId){
            // 先删除原来的,防止重复
for(var i= roleuserinfo_add_form.items.length-1;i>=0; i--){                                                            
                roleuserinfo_add_form.remove(roleuserinfo_add_form.items.get(i));
}

Ext.Ajax.request({
url:'<%=path%>/roleUserInfoAction.do?method=displayRoleUserInfo',
method:'post',
params:{userId: refId},
success:function(form,action){  
        var obj = Ext.util.JSON.decode(form.responseText);        
        var jsonObj = obj.roleInfoList;        
for(var i= 0; i< jsonObj.length; i++){                                                            
                        var stritem = new Ext.form.Checkbox({'name':'roleIdArray','boxLabel':jsonObj[i].name,'inputValue':jsonObj[i].id, 'checked':jsonObj[i].flag});
roleuserinfo_add_form.add(stritem).show();
}
roleuserinfo_add_form.doLayout();
roleuserinfo_add_form.id = refId;
roleuserinfo_add_window.show();
Ext.getCmp('roleuserinfo_add_form_btn_modify').enable();
},   
    failure:function(form,action){   
    roleuserinfo_add_window.close();
        Ext.MessageBox.show({
                title: '警告',
                msg: '获取权限列表出现异常,未能完成,请重试!',
                buttons:{"ok":"确定"},
                icon: Ext.MessageBox.ERROR
            });   
    }
});         
        }
       
        //点击查看用户角色详情按钮事件
roleuserinfo_modify_function = function(refId){
var roleIds = '';

for(var i= 0;i< roleuserinfo_add_form.items.length;i++){                                                            
                var rs = roleuserinfo_add_form.items.get(i);
                if(rs.checked == true){
                roleIds = roleIds + "," + rs.inputValue;
                }
}

Ext.Ajax.request({
url:'<%=path%>/roleUserInfoAction.do?method=modifyRoleUserInfo',
method:'post',
params:{
userId: refId,
roleIds:roleIds
},
success:function(form,action){   
        var obj = Ext.util.JSON.decode(form.responseText);
        if(obj.result==true){ 
        roleuserinfo_loadmask.hide();  
            roleuserinfo_add_window.hide();
            Ext.MessageBox.show({
                    title: '成功',
                    msg:'修改权限成功!',
                    buttons:{"ok":"确定"},                        
width:250,                        
                    icon: Ext.MessageBox.INFO
            });
            //customservice_ds.reload({params:{start:0, limit:15}});    
        }else  
        {  
        roleuserinfo_loadmask.hide();
        roleuserinfo_add_window.hide(); 
            Ext.MessageBox.show({
                    title: '失败',
                    msg: '修改权限失败!',
                    buttons:{"ok":"确定"},
                    width:250,
                    icon: Ext.MessageBox.INFO
                });   
        }         
},   
    failure:function(form,action){   
    roleuserinfo_loadmask.hide();
    roleuserinfo_add_window.hide();
        Ext.MessageBox.show({
                title: '警告',
                msg: '修改权限出现异常,未能完成,请重试!',
                buttons:{"ok":"确定"},
                icon: Ext.MessageBox.ERROR
            });   
    }
});         
        }
       
        window.onresize = function() {
        customservice_query_form.setHeight(45);   
    customservice_query_form.setWidth(Ext.getBody().getWidth()); 
    customservice_grid.setHeight(Ext.getBody().getHeight()-45);   
    customservice_grid.setWidth(Ext.getBody().getWidth());  
};
 
        //渲染数据表格对象
        customservice_grid.render();
        //加载数据源对象,传递分页参数
        //var _customservice_query_realName = Ext.get('customservice_query_realName').getValue();
//customservice_ds.baseParams["query_realName"] = _customservice_query_realName;
customservice_ds.load({params:{start:0, limit:15}});               
          
        });
</script>
</head>
<body>
<div id="authority_grid_context" style="width:100%;"  />
<div id="authority_query_context" style="width:100%;"  />
</body>
</html>

你可能感兴趣的:(Ajax,json,css,ext,mobile)