role.js

anewssystem新闻发布系统集成使用了spring hibernate freemarker EXTJS等开源框架 可以作为学习参考

/*
 * Ext JS Library 1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * [e-mail]
 *
 * http://www.extjs.com/license
 *
 * @author Lingo
 * @since 2007-09-06
 * http://code.google.com/p/anewssystem/
 */
Ext.onReady(function(){
    // 新节点的后缀
    var cseed = 0, oseed = 0;
    var myPageSize = 20;
    // 打开提示功能
    Ext.QuickTips.init();
    // 为main-ct添加子无素
    var cview = Ext.DomHelper.append('main-ct',
        {cn:[{id:'main-tb'},{id:'cbody'}]}
    );
    var selectNode;
    var recordTypeRole = Ext.data.Record.create([
        {name: "id", mapping:"id", type: "int"},
        {name: "name", mapping:"name", type: "string"},
        {name: "descn", mapping:"descn", type: "string"}
    ]);
    // 建一个资源数据映射数组
    var recordTypeResc = Ext.data.Record.create([
        {name: "id", mapping:"id", type: "int"},
        {name: "resType", mapping:"resType", type: "string"},
        {name: "name", mapping:"name", type: "string"},
        {name: "resString", mapping:"resString", type: "string"},
        {name: "descn", mapping:"descn", type: "string"},
        {name: "authorized", mapping:"authorized", type: "boolean"}
    ]);
    //设置数据仓库，使用DWRProxy，ListRangeReader，recordType
    var dsRole = new Ext.data.Store({
        proxy: new Ext.data.DWRProxy(RoleHelper.getRoleForUserPage, true),
        reader: new Ext.data.ListRangeReader({
            totalProperty: 'totalCount',
            id: 'id'
        }, recordTypeRole),
        // 远端排序开关
        remoteSort: false
    });
    // 设置数据仓库，使用DWRProxy，ListRangeReader，recordType
    var dsResc = new Ext.data.Store({
        proxy: new Ext.data.DWRProxy(ResourceHelper.getResourceForRolePage, true),
        reader: new Ext.data.ListRangeReader({
            totalProperty: 'totalCount',
            id: 'id'
        }, recordTypeResc),
        // 远端排序开关
        remoteSort: false
    });
    //创建Role表格头格式
    var cmRole = new Ext.grid.ColumnModel([{
        // 设置了id值，我们就可以应用自定义样式 (比如 .x-grid-col-topic b { color:#333 })
        id: 'id',
        header: "编号",
        dataIndex: "id",
        width: 100,
        sortable: true,
        css: 'white-space:normal;'
    },{
        id: 'name',
        header: "角色名称",
        dataIndex: "name",
        sortable: true,
        width: 150 ,
        css: 'white-space:normal;'
    },{
        id: 'descn',
        header: "描述",
        dataIndex: "descn",
        sortable: true,
        width: 150 ,
        css: 'white-space:normal;'
    }]);

    var cmResc = new Ext.grid.ColumnModel([{
        // 设置了id值，我们就可以应用自定义样式 (比如 .x-grid-col-topic b { color:#333 })
        id: 'id',
        header: "编号",
        dataIndex: "id",
        width: 80,
        sortable: true,
        renderer: renderNamePlain,
        css: 'white-space:normal;'
    },{
        id: 'name',
        header: "资源名称",
        dataIndex: "name",
        sortable: true,
        width: 150 ,
        css: 'white-space:normal;'
    },{
        id: 'resType',
        header: "资源类型",
        dataIndex: "resType",
        sortable: true,
        width: 80
    },{
        id: 'resString',
        header: "资源地址",
        dataIndex: "resString",
        sortable: true,
        width: 150
    },{
        id: 'descn',
        header: "资源描述",
        dataIndex: "descn",
        sortable: true,
        width: 80
    },{
        id: 'authorized',
        header: "是否授权",
        dataIndex: "authorized",
        sortable: true,
        width: 80,
        renderer:renderOP
    }]);

    // 渲染表格的方法
    function renderOP(value, p, record){
        if(record.data['authorized']==true){
            return String.format("<b><font color=green>已分配</font></b>");
        }else{
            return String.format("<b><font color=red>未分配</font></b>");
        }
    }
    function renderName(value, p, record){
        return String.format('<b>{0}</b><br>{1}', value, record.data['descn']==null?"":record.data['descn']);
    }
    function renderNamePlain(value){
        return String.format('{0}', value);
    }
    function renderaddtime(value){
        return String.format('<b>{0}</b>',  typeof(value)=='string'?"":value.format('Y-m-d'));
    }
    // 创建一个表格实例
    var grid = new Ext.grid.EditorGrid('main-tb', {
        ds: dsRole,
        cm: cmRole,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
        enableColLock:false,
        loadMask: false
    });
    var gridResc = new Ext.grid.EditorGrid('roleAuthResc-grid', {
        ds: dsResc,
        cm: cmResc,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
        enableColLock:false,
        loadMask: false
    });
    // 实例化布局
    var layout = new Ext.BorderLayout(document.body, {
        center: {
            title:'角色列表',
            resizeTabs: true,
            margins:{left:5,right:0,bottom:5,top:5}
        }
    }, 'main-ct');
    layout.batchAdd({
       center : {
           el: cview,
           autoScroll:true,
           fitToFrame:true,
           resizeEl:'main-tb'
       }
    });
    // 渲染表格
    grid.render();
    gridResc.render();
    // 取得表格的表脚
    var gridFoot = grid.getView().getFooterPanel(true);
    var gridFootResc = gridResc.getView().getFooterPanel(true);
    // 分页工具条
    var paging = new Ext.PagingToolbar(gridFoot, dsRole, {
        pageSize: myPageSize,
        displayInfo: true,
        displayMsg: '数据: {0} - {1} 共 {2}',
        emptyMsg: "没有找到相关数据"
    });
    var pagingResc = new Ext.PagingToolbar(gridFootResc, dsResc, {
        pageSize: myPageSize,
        displayInfo: true,
        displayMsg: '数据: {0} - {1} 共 {2}',
        emptyMsg: "没有找到相关数据"
    });
    pagingResc.add('-', {
        pressed: true,
        enableToggle:true,
        text: '授权',
        cls: '',
        toggleHandler: function(){
            //授权事件
            var mRole = grid.getSelections();
            var mResc = gridResc.getSelections();
            if(mResc.length<=0){
                Ext.MessageBox.alert('提示', '请选择至少一行纪录进行操作！');
                return;
            }else if(mResc.length==1){
                roleid=mRole[0].get('id');
                rescid=mResc[0].get('id');
                RoleHelper.authResourceForRole(
                    roleid,
                    rescid,
                    false,
                    function(aa){
                        Ext.MessageBox.alert('提示', '授权成功！');
                    });
            }else{
                for(var i = 0, len = mResc.length; i < len; i++){
                    rescid=mResc[i].get('id');
                    roleid=mRole[0].get('id');
                    RoleHelper.authResourceForRole(
                        roleid,
                        rescid,
                        false,
                        function(aa){
                            Ext.MessageBox.alert('提示', len+'角色授权成功！');
                        });
                }
            }
            dsResc.load({params:{start:0, limit:myPageSize,id:mRole[0].get('id')}});
        }
    }, '-', {
        pressed: true,
        enableToggle:true,
        text: '取消',
        cls: '',
        toggleHandler: function(){
            //取消授权事件
            var mRole = grid.getSelections();
            var mResc = gridResc.getSelections();
            console.info(mRole + "," + mRole);
            if(mResc.length<=0){
                Ext.MessageBox.alert('提示', '请选择至少一行纪录进行操作！');
                return;
            }else if(mResc.length==1){
                roleid=mRole[0].get('id');
                rescid=mResc[0].get('id');
                RoleHelper.authResourceForRole(roleid,rescid,true,function(aa){Ext.MessageBox.alert('提示', '授权取消成功！');});
            }else{
                for(var i = 0, len = mResc.length; i < len; i++){
                    rescid=mResc[i].get('id');
                    roleid=mRole[0].get('id');
                    RoleHelper.authResourceForRole(roleid,rescid,true,function(aa){Ext.MessageBox.alert('提示', len+'角色授权取消成功！');});
                }
            }
            dsResc.load({params:{start:0, limit:myPageSize,id:mRole[0].get('id')}});
        }
    });
    // 向表脚加视图按键
    paging.add('-', {
        pressed: true,
        enableToggle:true,
        text: '详细信息',
        // cls: 'x-btn-text-icon details',
        toggleHandler: toggleDetails
    }, '-', {
        pressed: true,
        enableToggle:true,
        text: '新增',
        cls: '',
        toggleHandler: doAdd
    }, '-', {
        pressed: true,
        enableToggle:true,
        text: '修改',
        cls: '',