我的漫漫程序之旅

专注于JavaWeb开发
随笔 - 37, 文章 - 309, 评论 - 411, 引用 - 0
数据加载中……

ExtJS & GTGrid 简单用户管理

前段学了小胖的GTGrid,很方便实用。最近在学习Extjs.
做了个CRUD的Demo,包括Extjs版和GTGrid版,做的比较
粗糙,希望对大家有一些帮助。

 




部分源码:
<%@ page language="java" pageEncoding="GBK"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
  
<head>
      
<title>用户管理首页</title>
<link rel="stylesheet" type="text/css" href="js/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-2.2/ext-all.js"></script>
<style type="text/css">
.x-panel-body p 
{
        margin
:5px;
    
}

    .x-column-layout-ct .x-panel 
{
        margin-bottom
:5px;
    
}

    .x-column-layout-ct .x-panel-dd-spacer 
{
        margin-bottom
:5px;
    
}

    .settings 
{
        background-image
:url(js/ext-2.2/shared/icons/fam/folder_wrench.png) !important;
    
}

    .nav 
{
        background-image
:url(js/ext-2.2/shared/icons/fam/folder_go.png) !important;
    
}


.icon-grid 
{
    background-image
: url(js/ext-2.2/shared/icons/fam/grid.png) !important;
}


#button-grid .x-panel-body 
{
    border
: 1px solid #99bbe8;
    border-top
: 0 none;
}


.add 
{
    background-image
: url(js/ext-2.2/shared/icons/fam/add.gif) !important;
}


.option 
{
    background-image
: url(js/ext-2.2/shared/icons/fam/plugin.gif) !important
        
;
}


.remove 
{
    background-image
: url(js/ext-2.2/shared/icons/fam/delete.gif) !important
        
;
}


.save 
{
    background-image
: url(js/ext-2.2/shared/icons/save.gif) !important;
}

</style>  
<script>
    
<!--
    Ext.onReady(
function()
    
{
        
/**Grid相关**/
        Ext.QuickTips.init();
        Ext.form.Field.prototype.msgTarget
='side';
        
var newFormWin; //form窗口容器
        var form1; //添加用户的form
        var form2;; //修改用户的form
        
        
//侧边栏状态的记录
        Ext.state.SessionProvider = Ext.extend(Ext.state.CookieProvider, {
        readCookies : 
function(){
                
if(this.state){
                    
for(var k in this.state){
                        
if(typeof this.state[k] == 'string'){
                            
this.state[k] = this.decodeValue(this.state[k]);
                        }

                    }

                }

                
return Ext.apply(this.state || {}, Ext.state.SessionProvider.superclass.readCookies.call(this));
            }

        }
);
        
        
var xg = Ext.grid;
        
        
var jsonReader = new Ext.data.JsonReader( {
            root : 'list',  
//返回的数据集合
            totalProperty : 'totalCount', //总记录数
            successProperty : '@success' //成功标记
        }
, [ {
            name : 'id', 
//grid中的dataIndex
            mapping : 'id', //返回的数据中的字段名
            type : 'int//类型,默认为string类型
        }
{
            name : 'username',
            mapping : 'username'
        }
{
            name : 'age',
            mapping : 'age',
            type : '
int'
        }
,
        
{
            name : 'ramark',
            mapping : 'remark'
        }
]);
        
        
// Store
        var ds = new Ext.data.Store( {
            proxy : 
new Ext.data.HttpProxy( {
                url : '$
{ctx}/UserServlet?method=getAll'
            }
),
            reader : jsonReader
        }
);
        ds.setDefaultSort('id', 'asc');
    
        
    
/**
    ***CRUD Grid
    ***
*/

    
    
//自定义的checkbox列选择
    var sm = new xg.CheckboxSelectionModel({
        listeners: 
//添加监听器 
        {
          
//行选择事件
          rowselect : function (sm, rowIndex, keep, rec) //行选中事件
          {
                
//得到ext组件用Ext.getCmp('id')
                var btn = Ext.getCmp('tbar1');
                
//选择数量大于2,禁用修改按钮
                if(sm.getCount() != 1)
                
{
                      btn.disable();
                }

                
else
                
{
                    btn.enable();
                }

          }
,
          
//取消选择事件
          rowdeselect : function (sm, rowIndex, keep, rec) //行选中事件
          {
                
//得到ext组件用Ext.getCmp('id')
                var btn = Ext.getCmp('tbar1');
                
//数量等于1启动修改按钮
                if(sm.getCount() == 1)
                
{
                      btn.enable();
                }

                
else
                
{
                      btn.disable();
                }

          }

        }


        
    }
); 

    
//初始化Grid
    var grid = new xg.GridPanel({
        id:'user
-grid',
        width:
780,
        height:
450,
        frame:
true,
        title:'简易用户管理',
        iconCls:'icon
-grid',
        hidden: 
true,
        store: ds, 
//数据仓库
        renderTo: document.body,
        
//
        cm: new xg.ColumnModel([
            sm,
            
{id:'id',header: "索引", width: 40, sortable: true, dataIndex: 'id'},
            
{header: "用户名", width: 20, sortable: true,  dataIndex: 'username'},
            
{header: "年龄", width: 20, sortable: true, dataIndex: 'age'},
            
{header: "备注", width: 20, sortable: true, dataIndex: 'remark'}
        ]),
        
        sm: sm,

        viewConfig: 
{
            forceFit:
true
        }
,
        
//分页工具栏
        bbar : new Ext.PagingToolbar({
                pageSize : 
10,
                store : ds,
                displayInfo : 
true,
                displayMsg : '显示 
{0}-{1}条 / 共 {2} 条',
                emptyMsg : 
"无数据。"
            }
),
            
        
//上置内嵌工具栏(按钮)
        tbar:[{
            text:'添加',
            tooltip:'添加一行新数据',
            iconCls:'add',
            handler : 
function()
            
{
                add();
            }

        }
, '-', {
            text:'修改',
            tooltip:'修改一条数据',
            iconCls:'option',
            id : 'tbar1',
            handler : 
function()
            
{
                modify();
            }

        }
,'-',{
            text:'删除',
            tooltip:'删除数据',
            iconCls:'remove',
            handler : 
function() 
            
{
                remove();
            }

        }
]
       
    }
);
    
    
//加载数据
    ds.load({params:{start:0, limit:10}});    
    
//渲染Grid
    grid.render();
    
        
//添加用户的函数
          var add = function()
          
{
                newFormWin 
= new Ext.Window({
                    layout : 'fit',
                    width : 
400,
                    height : 
300,
                    closeAction : 'hide',
                    plain : 
true,
                    title : '用户管理',
                    items : form1

                }
);
            newFormWin.show();
          }

          
        
//修改用户的函数
          var modify = function() 
          
{
            
var _record = grid.getSelectionModel().getSelected();
            
if (!_record)
            
{
                Ext.Msg.alert('请选择要修改的一项!');
            }

            
else
            
{
                myFormWin();
                form2.form.load
                (
{
                    url : '$
{ctx}/UserServlet?method=getById&id='+ _record.get('id'),
                    waitMsg : '正在载入数据',
                    
                    failure : 
function() {
                        Ext.Msg.alert('载入失败');
                    }
,
                    success : 
function() {
                        
//Ext.Msg.alert('载入成功!');
                    }

                }
);
            }

        }

        
//修改用户的窗体 
        var myFormWin = function() {
                newFormWin 
= new Ext.Window({
                    layout : 'fit',
                    width : 
400,
                    height : 
300,
                    closeAction : 'hide',
                    plain : 
true,
                    title : '修改用户',
                    items : form2
                }
);
            newFormWin.show('');
        }

        
        
/*注意JsonReader要放在Form上面,数据的加载顺序问题*/
        
var jsonFormReader = new Ext.data.JsonReader( {
            root : 'list',
            totalProperty : 'totalCount',
            successProperty : '@success'
        }
, [
        
{
            name : 'id',
            mapping : 'id',
            type : '
int',
        }
,
         
{
            name : 'username',
            mapping : 'username'
        }
{
            name : 'age',
            mapping : 'age',
            type : '
int'
        }
{
            name : 'remark',
            mapping : 'remark'
        }
]);
        
        
//添加用户的Form
          form1 = new Ext.FormPanel({
            labelWidth : 
75,
            frame : 
true,
            title : '添加用户',
            bodyStyle : 'padding:5px 5px 
0',
            width : 
350,
            waitMsgTarget : 
true,
            url : '$
{ctx}/UserServlet?method=save',
            defaults : 
            
{
                width : 
230
            }
,
            defaultType : 'textfield',
            items : [
            
{
                fieldLabel : '用户名',
                name : 'username', 
//后台得到数据用
                allowBlank : false,
                blankText : '用户名不能为空'
            }
{
                xtype : 'numberfield',
                maxValue : 
100,
                maxText : '年龄不能超过100岁',
                minValue : 
1,
                minText : '年龄不能小于1岁',
                fieldLabel : '年龄',
                name : 'age',
                allowBlank : 
false,
                blankText : '年龄不能为空'
            }
new Ext.form.TextArea( {
                fieldLabel : '备注',
                name : 'remark',
                growMin : 
234,
                maxLength : 
50,
                maxLengthText : '最大长度不能超过50个字符
!'
            }
)],

            buttons : [ 
{
                text : '保存',
                disabled : 
false,
                handler : 
function()
                
{
                    
                    
if(form1.form.isValid())
                    
{    
                        form1.form.submit(
                        
{
                            url : '$
{ctx}/UserServlet?method=save',
                            success : 
function(from, action) 
                            
{
                                Ext.Msg.alert('添加用户成功!');
                                ds.load(
{
                                    params : 
{
                                        start : 
0,
                                        limit : 
10
                                    }

                                }
);
                            }
,
                            failure : 
function(form, action) {
                                Ext.Msg.alert('添加用户失败!');
                            }
,
                            waitMsg : '正在保存数据,稍后'
                        }
);
                        newFormWin.hide();
                    }

                    
else
                    
{
                        Ext.Msg.alert('请确认您已经的信息是否已经填写成功
!');
                    }

                }

            }
{
                text : '取消',
                handler : 
function() 
                
{
                     form1.form.reset();
                }

            }
]
        }
);
        
        
//修改用户的Form
          form2 = new Ext.FormPanel({
            labelWidth : 
75,
            frame : 
true,
            title : '修改用户',
            bodyStyle : 'padding:5px 5px 
0',
            width : 
350,
            waitMsgTarget : 
true,
            url : '$
{ctx}/UserServlet?method=update',
            reader : jsonFormReader, 
//为Form指定reader,修改用
            defaults : 
            
{
                width : 
230
            }
,
            defaultType : 'textfield',
            items : [
            
{
                xtype: 'hidden',
                name : 'id'
            }
,
            
{
                fieldLabel : '用户名',
                name : 'username', 
//后台得到数据用
                allowBlank : false,
                blankText : '用户名不能为空'
            }
{
                xtype : 'numberfield',
                maxValue : 
100,
                maxText : '年龄不能超过100岁',
                minValue : 
1,
                minText : '年龄不能小于1岁',
                fieldLabel : '年龄',
                name : 'age',
                allowBlank : 
false,
                blankText : '年龄不能为空'
            }
new Ext.form.TextArea( {
                fieldLabel : '备注',
                name : 'remark',
                growMin : 
234,
                maxLength : 
50,
                maxLengthText : '最大长度不能超过50个字符
!'
            }
)],

            buttons : [ 
{
                text : '修改',
                disabled : 
false,
                handler : 
function()
                
{
                    
                    
if(form2.form.isValid())
                    
{    
                        form2.form.submit(
                        
{
                            success : 
function(from, action) 
                            
{
                                Ext.Msg.alert('修改用户成功!');
                                ds.load(
{
                                    params : 
{
                                        start : 
0,
                                        limit : 
10
                                    }

                                }
);
                            }
,
                            failure : 
function(form, action) {
                                Ext.Msg.alert('修改用户失败!');
                            }
,
                            waitMsg : '正在保存数据,稍后'
                        }
);
                        newFormWin.hide();
                    }

                    
else
                    
{
                        Ext.Msg.alert('请确认您已经的信息是否已经填写成功
!');
                    }

                }

            }
{
                text : '取消',
                handler : 
function() 
                
{
                     form2.form.reset();
                }

            }
]
        }
);
        
        
//删除事件
        var remove = function() 
        
{

            
var _record = grid.getSelectionModel().getSelected();
            
if (_record) 
            
{
                Ext.MessageBox.confirm('确认删除', '你确认要删除选择的数据吗?', 
function(btn) 
                
{
                    
if (btn == "yes"{
                        
var m = grid.getSelections();
                        
var jsonData = "";
                        
for (var i = 0, len = m.length;i < len; i++
                        
{
                            
var ss = m[i].get("id"); //用户id , "id" 字段名
                            if (i == 0{
                                jsonData 
= jsonData + ss;
                            }
 else {
                                jsonData 
= jsonData + "," + ss;
                            }

                            
//在数据源里删除
                            ds.remove(m[i]);
                            
//删除数据库相应记录
                            Ext.Ajax.request({
                               url: '$
{ctx}/UserServlet?method=remove&id='+ss
                            }
);
                        }

                        
                        ds.load(
{
                            params : 
{
                                start : 
0,
                                limit : 
10,
                                delData : jsonData
                            }

                        }
);
                        

                    }

                }
);
            }
 
            
else 
            
{
                Ext.Msg.alert('请选择要删除的数据项!');
            }

        }
;    
    
/***/
    Ext.state.Manager.setProvider
    ( 
new Ext.state.SessionProvider({state: Ext.appState}));
    
        
// tabs for the center
        var tabs = new Ext.TabPanel({
            region    : 'center',
            margins   : '
3 3 3 0', 
            activeTab : 
0,
            defaults  : 
{
                autoScroll : 
true
            }
,
            items     : [
{
                title    : 'ExtJS版',
                contentEl: 'user
-grid' //要填充的html id
             }
,{
                title    : 'GTGrid版',
                html     : 'GTGrid暂不支持与Extjs的整合(window),
<a href="${ctx}/gt.jsp">点此显示我做的例子</>'
             }
,
                title    : '更多关注',
                html     : '更多内容可关注
<a href="http://www.blogjava.net/supercrsky">我的博客</a>'
            }
]
        }
);

        
// Panel for the west
        var nav = new Ext.Panel({
            title       : '菜单目录',
            region      : 'west',
            split       : 
true,
            width       : 
200,
            collapsible : 
true,
            margins     : '
3 0 3 3',
            cmargins    : '
3 3 3 3',
            layout:        'accordion',
                layoutConfig:
{
                    animate:
true
                }
,
             items: [
{
                    html: Ext.example.shortBogusMarkup,
                    title:'用户管理',
                    autoScroll:
true,
                    border:
false,
                    iconCls:'nav'
                }
,{
                    title:'用户配置',
                    html: Ext.example.shortBogusConfig,
                    border:
false,
                    autoScroll:
true,
                    iconCls:'settings'
                }
]
        }
); 

        
var win = new Ext.Window({
            title    : '用户管理微型系统',
            closable : 
true,
            maximizable : 
true,
            minimizable : 
true,
            width    : '
100%',
            height   : '
100%',
            plain    : 
true,
            layout   : 'border',
            closable : 
false,
            items    : [nav, tabs]
        }
);
        
        win.show();
        win.maximize();
        
}
);
    
-->
</script>      
  
</head>
  
<body>&nbsp; 
  
<!-- 侧边栏使用的js -->
  
<script type="text/javascript" src="js/ext-2.2/shared/examples.js"></script>
  
</body>
</html>


完整的源码下载点此下载

posted on 2008-09-23 17:42 々上善若水々 阅读(4726) 评论(6)  编辑  收藏

评论

# re: ExtJS & GTGrid 简单用户管理  回复  更多评论   

lz,不行,报错了, 访问index.jsp时.
访问gt.jsp 时报500错误
2008-09-23 19:40 | Jie

# re: ExtJS & GTGrid 简单用户管理[未登录]  回复  更多评论   

玩具
2008-09-23 20:59 | kylin

# re: ExtJS & GTGrid 简单用户管理  回复  更多评论   

好啊,太漂亮了
2008-09-23 23:09 | R_XiaoGuang

# re: ExtJS & GTGrid 简单用户管理  回复  更多评论   

@Jie

确认你已经正确配置你的数据库的用户名和密码。
已经在IE6.0 ,FF下测试正常.
2008-09-24 08:43 | 々上善若水々

# re: ExtJS & GTGrid 简单用户管理[未登录]  回复  更多评论   

index.jsp在ff中运行正常,在ie6.0中显示脚本错误
2008-10-05 15:24 | jie

# re: ExtJS & GTGrid 简单用户管理  回复  更多评论   

請問下,為什么 我的資料可以顯示,但是在FX里運行的時候,頭沒有圖標顯示,但是在IE裡面雖然能顯示,但是顯示的圖標不正常...表頭那裡的圖標需要在CSS裡面定義樣式嗎?是表頭裡面的圖標》不是按鈕的圖標。高手幫下忙額。已經整1天了。
msn:fpc2046@hotmail.com
2008-10-27 16:36 | san

只有注册用户登录后才能发表评论。


网站导航: