EXT AJAX XML 实践

    最近用EXT的AJAX实现页面的增删改，感觉还不错，速度还是可以的。
     关于AJAX的提交参数 params个人感觉不必参照例子组成xml或json，直接组成字符串传给后台即可  

/*
 * Ext JS Library 2.0 RC 1
 * [e-mail]
 * 
 */

Ext.onReady(function(){
    Ext.QuickTips.init();

    function formatDate(value){
        return value ? value.dateFormat('M d, Y') : '';
    };
    var fm = Ext.form;

    var checkColumn = new Ext.grid.CheckColumn({
       header: "有效",
       dataIndex: 'indoor',
       width: 55
    });

    var cm = new Ext.grid.ColumnModel([{
           id:'doc_code',
           header: "文档编号",
           dataIndex: 'doc_code',
           width: 220,
           hidden: true, //    隐藏列    
           editor: new fm.TextField({
               allowBlank: false
           })
        },{
           id:'name',
           header: "名称",
           dataIndex: 'name',
           width: 200,
           editor: new fm.TextField({
               allowBlank: false
           })
        },{
           header: "说明",
           dataIndex: 'label',
           width: 150,
           editor: new fm.TextField({
               allowBlank: false
           })
        },{
           header: "菜单",
           dataIndex: 'price',
           width: 120,
           editor: new fm.TextField({
               allowBlank: false
           })
        },{
           header: "有效",
           dataIndex: 'youx',
           width: 120,
           editor: new fm.TextField({
               allowBlank: false
           })
        }
    ]);

    // sortable
    cm.defaultSortable = true;

    var Plant = Ext.data.Record.create([
           {name: 'doc_code', type: 'string'},
           {name: 'name', type: 'string'},
           {name: 'botanical', type: 'string'},
           {name: 'label'},
           {name: 'price', type: 'string'},             
           {name: 'youx', type: 'string'}
      ]);

    // create the Data Store
    var store = new Ext.data.Store({
        // 载入自动生成的XML文件   xml文件格式 uft-8
        url: 'moudlexml.jsp',

        reader: new Ext.data.XmlReader({
               record: 'plant'
           }, Plant),

        sortInfo:{field:'name', direction:'ASC'}
    });

    // create the editor grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'editor-grid',
        width:600,
        height:300,
        autoExpandColumn:'name',
        title:'模块管理',
        frame:true,
        plugins:checkColumn,
       //clicksToEdit:10,//设置点击几次才可编辑
        selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//设置单行选中模式, 否则将无法删除数据
        tbar: [{
            tooltip:'Add Plant',
            iconCls:'add',
            text: '添加行',
            handler : function(){
                var p = new Plant({
                    doc_code: '0',
                    name: '',
                    label:'',
                    price:'',
                    youx:'',
                    indoor: false
                });
                var n = grid.getStore().getCount();// 获得总行数 
                grid.stopEditing();
                store.insert(n, p);
                grid.startEditing(n, 0);
            }
        }, '-', {
            text:'删除行',
            tooltip:'remove ',
            iconCls:'remove',
            handler : function(){
              
                var rs1 = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
                grid.stopEditing();
                if(rs1==undefined)
                {
                  return;//判断记录集是否为空，为空返回
                }
                
              Ext.MessageBox.confirm('确认删除', '你真的要删除所有用户信息吗?', 
                        function(btn) {
                            if(btn == 'yes') 
                            { 
                              // var rs1 = store.getAt(1);
                              store.remove(rs1);
                              
                            
                              grid.startEditing(0, 0); 
                              Ext.Msg.alert('友情提示','删除成功,很好很强大');
                            }
                            else
                            {
                              //Ext.Msg.alert('您成功修改了用户信息', "被修改 "+rs1.get("name") );// 取得用户名
                              Ext.Msg.alert('友情提示','很天真，怎么不删');
                            }
                        });
                        
             }
            
        },'-',{
            text:'保存',
            tooltip:'Save item',
            iconCls:'option'
        }]
    });

          // 单元格编辑后事件处理，暂不用
          grid.on("afteredit", afterEdit, grid);
        
          function afterEdit(e) {// 事件处理函数
              var record = e.record;// 被编辑的记录     
              Ext.Msg.wait("请等候", "修改中", "操作进行中..."); // 显示等待对话框
              // 更新界面, 来真正删除数据
              Ext.Msg.alert('您成功修改了用户信息', "被修改的用户是:" + e.record.get(e.field) + "\n 修改的字段是:" + e.field);
          };    
          

//*****************************编辑窗口*****************************************************************
    var simple = new Ext.FormPanel({
        renderTo:'form-grid',//inner到哪个容器中
        labelWidth: 75, // label settings here cascade unless overridden
        url:'baododododododododo',
        frame:true,
        title: '编辑器',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',

        items: [{
                fieldLabel: '名称',
                name: 'name_e',
                allowBlank:false
            },{
                fieldLabel: '菜单',
                name: 'label_e',
                allowBlank:false
            },{
                fieldLabel: '说明',
                name: 'price_e',
                allowBlank:false

            }, {
                fieldLabel: '是否有效',
                name: 'youx_e'
            }
        ],
              
        buttons: [{
            text: '保存',
            handler : function(){
            
                    
            
        Ext.Ajax.request({
            url : 'addrow.jsp' , 
            params :'action=edit&name='+Ext.getDom('name_e').value,
            method: 'GET',
            text: "Updating...",
            success: function ( result, request ) 
            { 
                    var rs1 = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
                    var p = new Plant({
                        doc_code: '0',
                        name: Ext.getDom('name_e').value,
                        label:Ext.getDom('label_e').value,
                        price:Ext.getDom('price_e').value,
                        youx:Ext.getDom('youx_e').value ,
                        indoor: false
                    });
                    var n = store.indexOf(rs1);// 获得点击行的index 
                         
                    //本来想用替换方法 试了几次不爽 还是自己的增删吧              
                    store.insert( n  , p);
                    store.remove(rs1);
                    Ext.MessageBox.alert('访问成功', '数据返回的数据 '+ result.responseText); 
                  
                  
                  
            },
            failure: function ( result, request) 
            { 
                Ext.MessageBox.alert('访问失败', '失败了就没好说的了  (*^__^*) 嘻嘻……: '); 
            } 
        });
                      
                                       
            
            }
        },{
            text: '取消'
        }]
    });

    // 载入数据
    store.load();
    
        
            // 单元格单击后事件处理
        grid.on("click", clickedit, grid);
      
        function clickedit(e) {
          
          var rs1 = grid.getSelectionModel().getSelected();// 返回当前行的记录集
              //getDom 获取Dom元素的方法          
              Ext.getDom('name_e').value=rs1.get('name');  // 
              Ext.getDom('label_e').value=rs1.get('label');   // 
              Ext.getDom('price_e').value=rs1.get('price');  //说 
              Ext.getDom('youx_e').value=rs1.get('youx');    //是否有效
         
        };
    
});
 
   

评论

2 楼 山有峰则灵 2009-09-10  

selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//设置单行选中模式, 否则将无法删除数据  

谢谢~ 呵呵，一下就解决了我的问题

1 楼 mewleo 2008-03-30  

支持，多发点技术实践～


看贴不回，罪过。