Ext 基本的增删改查代码

JSP

<!-- 引入Ext -->
    <link rel="stylesheet" type="text/css" href="./extsrc/resources/css/ext-all.css" /> 
    <link rel="stylesheet" type="text/css" href="./extsrc/resources/css/ext-extend.css" />
    <script type="text/javascript" src="./extsrc/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="./extsrc/ext-all.js"></script>
    <script type="text/javascript" src="./js/manager/role.js"></script>
     <!-- 引入图片和样式 -->
    <style type="text/css">    
        #member_grid{position:absolute; left:20px; top:20px;}
        .icon-grid {background-image:url(images/grid.png) !important;}
        .user_add {background-image:url(./images/icon/insert.gif) !important;}
        .user_delete {background-image:url(./images/icon/delete.gif) !important;}
        .user_deleteall {background-image:url(./images/icon/user_delete.gif) !important;}
        .save {background-image:url(./images/icon/Accept.gif) !important;}
        .search {background-image:url(./images/search.png) !important;}
    </style>

JS

Ext.onReady(function(){  
    //使Ext:tip提示框可用
    Ext.QuickTips.init();
    //定义全局参数
    var gridheight = Ext.getBody().getComputedHeight();
    var gridwidth = Ext.getBody().getComputedWidth();
    var globalURL = 'role.do?act=roleList';
 
    //定义上部工具条
    var word=new Ext.form.TextField();    
    var tbar = [
        {text:'新增',width:100,iconCls:'user_add',handler:doAdd},'&nbsp','-',
        {text:'删除',width:100,iconCls:'user_delete',handler:doDelete},'&nbsp','-',
        {text:'保存',width:100,iconCls:'save',handler:doSave},'&nbsp','-',
        '名称描述',word,
        {text:'查询',width:100,iconCls:'search',handler:doSearch}
    ];
    
    //定义数据源
    var store = new Ext.data.Store({
        proxy :new Ext.data.HttpProxy({
            url:globalURL
        }),
        reader:new Ext.data.JsonReader({}, [
                {name:'id'},{name:'name'},{name:'purviewId'}                                    
        ])
    }); 
    store.load();
    //name编辑框  文本编辑框
    var nameText=new Ext.form.TextField({
               allowBlank: false,
               maxLength : 20,
               blankText:'不能为空！'
           });
    //id编辑框    数字编辑框
    var idText=new Ext.form.NumberField({
               allowBlank: false,
               maxLength : 20,
               blankText:'不能为空！'
           });
    //权限下拉框    
    var purviewStore = new Ext.data.Store({
        proxy:new Ext.data.HttpProxy({
            url:'purview.do?act=getPurviewId'
        }),
        reader:new Ext.data.JsonReader({},[{name:'id'},{name:'name'}])
    });
//    purviewStore.load();
    var purviewBox = new Ext.form.ComboBox({
        id:'purviewBox',
        name:'purviewBox',
        mode:'remote',            //相反local
        store:purviewStore,
        displayField:'name',    //下拉框展示的内容
        valueField:'id',        //下拉框值
        triggerAction :'all'    //下拉框值全部显示
    });       
     
               
    //定义行模式  
    var sm = new Ext.grid.CheckboxSelectionModel({
        singleSelect:true  //属性单选
    });
    //定义列模式
    var cm = new Ext.grid.ColumnModel([
        {header:'角色ID',dataIndex:'id'},
        {header:'角色名',dataIndex:'name',editor:nameText},
        {header:'权限编号',dataIndex:'purviewId',editor:purviewBox},sm
    ]);
    //定义grid表格
    var grid = new Ext.grid.EditorGridPanel({
                id : 'grid',
                title : '',
                store : store,
                cm : cm,
                sm:sm,
                stripeRows:true,  //斑马纹
                height : gridheight-20,
                width : gridwidth,
            //    renderTo : Ext.getBody(),
                frame : true,    
                loadMask : true,
                tbar : tbar
            });
    grid.render('editor-grid');
    
    //定义新增窗口
    //定义窗口form主体
    var panel = new Ext.form.FormPanel ({
        frame: true,  
        items:[{
                  xtype:'fieldset',
                title: '新增角色信息',
                collapsible: true,
                autoHeight:true,
                width:330,
                defaults: {width: 150},    
                items :[{                            //定义包涵的组件
                        fieldLabel: '角色名',
                        name: 'name',
                        value: '',
                        xtype:"textfield"
                    },{
                        xtype:"combo",
                        mode:'remote',
                        name:'purviewId',
                        store:purviewStore,
                        displayField:'name',
                        valueField:'id',
                        triggerAction :'all',
                        fieldLabel:"权限编号",
                        emptyText:'请选择编号.'
                    }],
                 buttons:[{                        //定义按钮及提交规则
                    text:'保存',
                    handler:function(){
                        //获取panel属性值
                        var name = panel.getForm().findField('name').getValue();
                        var purviewId = panel.getForm().findField('purviewId').getValue();
                        if(name==''||purviewId==''){
                            Ext.Msg.alert('信息提示','不能为空'); 
                            return false;
                        }
                        var str = name+'*'+purviewId;
                        str = encodeURIComponent(str);            //前台一次编码 后台一次解码
                        Ext.Ajax.request({
                            url:'role.do?act=save',
                            method:'POST',
                            params:{str:str},
                            success:function(request){
                                var resp = Ext.util.JSON.decode(request.responseText);    //文本解析成json格式
                                if(resp.success=='fail'){
                                    Ext.Msg.alert('信息','<center>保存项保存失败!<p>'+ resp.Info+'</center>');
                                }
                                else{
                                    Ext.Msg.alert('信息','保存项保存成功！');
                                    store.load();
                                }
                            },
                            fail:function(result,request){
                                Ext.Msg.alert('信息','保存项保存失败！');
                            }
                        });
                        }
                    },{
                    text:'取消',
                    handler:function(){
                        win.hide();
                    }
                    }]   
            }]
    })
    
    var win = new Ext.Window({
        title:'新增',
        closeAction:'hide',            //点击叉叉隐藏窗口
        width:360,
        height:200,
        layout:'fit',
        frame : true,
        plain : true,
        items : [panel]
    });
    
    //定义事件
    //store的beforeload事件
    store.on('beforeload',function(){
    //    var serarchWord = word.getValue();
    //    store.proxy.url=globalURL+'&name='+serarchWord;
    });
    
    //定义函数
    //定义查询函数
    function doSearch(){
        var serarchWord = word.getValue();
        serarchWord = encodeURIComponent(serarchWord);
        store.load({params:{name:serarchWord}});    //带参数的数据加载
    //    grid.reconfigure(store, cm);
    }
    
    //定义新增函数
    function doAdd(){
        //插入一条新纪录
    /*    var newrecord = new Ext.data.Record({        //插入一条新纪录
            data:[{
                id:'',
                name:'',
                purview:''
            }]
        })
        grid.stopEditing();
        store.insert(0,newrecord);
        */
        win.show();
    }
    
    //定义保存函数
    function doSave(){
        var m = grid.getStore().getModifiedRecords();        //获取编辑后的记录组
        var jsonData = '[';
        for(var i=0;i<m.length;i++){
            //非空判断
            if(m[i].get('id')==''){
                Ext.Msg.alert('信息提示','角色id不能为空'); 
                return false;
            }
            if(m[i].get('name')==''){
                Ext.Msg.alert('信息提示','角色名不能为空'); 
                return false;
            }
            if(m[i].get('purviewId')==''){
                Ext.Msg.alert('信息提示','权限编号不能为空'); 
                return false;
            }
            //重复行判断
            var n = store.getCount();            //获取所有记录个数
        /*    for(var j=0;j<n;j++){
                if(i==j)continue;
                if(m[i].get('id')==store.getAt(j).get('id')){
                    Ext.Msg.alert('信息提示','角色id不能重复'); 
                    return false;
                }                
            }           */
            jsonData = jsonData+Ext.util.JSON.encode(m[i].data)+',';
        }
        //去掉句尾','
        if(jsonData.length>3)
            jsonData = jsonData.substring(0,jsonData.lastIndexOf(','));
        jsonData += ']';
        if (jsonData == '[]') {
            Ext.Msg.alert('信息提示', '没有发现保存项，请确认有保存项！');
            return false;
        }
        Ext.Msg.confirm('信息', '确定要保存所选项吗?', function(btn) {
            if (btn == 'yes') {
                Ext.MessageBox.wait("正在保存", "请稍候...");
                Ext.Ajax.request({
                    url:'role.do?act=update',
                    params:{jsonData:jsonData},
                    method:'POST',
                    success:function(request){
                        var resp = Ext.util.JSON.decode(request.responseText);
                        if(resp.success=='fail'){
                            Ext.Msg.alert('信息','<center>保存项保存失败!<p>'+ resp.Info+'</center>');
                        }
                        else{
                            Ext.Msg.alert('信息','保存项保存成功！');
                            store.load();
                        }
                    },
                    fail:function(result,request){
                        Ext.Msg.alert('错误','保存时出现未知错误.'); 
                    }
                });
            }
            });
    }
    
    //定义删除函数
    function doDelete(){
        if(sm.getCount()==0){
            Ext.Msg.alert('信息提示','请选择记录'); 
            return;
        }
        Ext.MessageBox.confirm('确认删除','你真的要删除所选行记录吗?',function(btn){
            if(btn=='yes'){
                Ext.MessageBox.wait("正在删除", "请稍候...");
                var m = sm.getSelections();
                var id;
                for(var i=0;i<m.length;i++){
                    id = m[i].get('id');
                }
                Ext.Ajax.request({
                    url:'role.do?act=delete',
                    params:{id:id},
                    method:'POST',
                    success:function(request){
                        var resp=Ext.util.JSON.decode(request.responseText);
                        if(resp.success == 'fail'){
                            Ext.Msg.alert('信息','<center>记录删除失败!<p>'+ resp.Info+'</center>');
                        }
                        else{
                            Ext.Msg.alert('提示', '记录删除成功！');
                            store.reload();
                        //    grid.getView().refresh();
                        //    store.commitChanges();
                        }
                    },
                    failure:function(result,request){
                        Ext.Msg.alert('错误','删除时出现未知错误.'); 
                    }
                });
            }
        })
    }
});