Extjs form 加载后台数据 注意事项

 

今天在使用Struts2的时候加载后台数JSOn格式的数据时候出现了老是加载不上的现象，代码如下：

userGroup.js

Ext.onReady(function(){

    var sm=new Ext.grid.CheckboxSelectionModel();
    var cm=new Ext.grid.ColumnModel([
    sm,
    {header:'用户组编号',dataIndex:"id"},
    {header:'用户组名称',dataIndex:'groupName'}
    ]) ;
    
    var record= new Ext.data.Record.create([
    {name:'id',mapping:'id'},
    {name:'groupName',mapping:'groupName'}
    ]);
    
    var proxy=new Ext.data.HttpProxy({url:'/MedicalGuidance/manager/getUserGroup_userAction.action'});
    var reader =new Ext.data.JsonReader({
        totalProperty:"totalProperty",
        root:"root"
    },record) ;
    var store=new Ext.data.Store({
        proxy:proxy,
        reader:reader 
    }) ;

    
    var grid =new Ext.grid.GridPanel({
        title:"用户组管理",
        autoHeight:true,
        cm:cm,
        sm:sm,
        store:store,
        renderTo:"render",
        bbar:new Ext.PagingToolbar({
            store:store,
            pageSize:6,
            displayInfo:true,
            displayMsg:"本页显示第{0}条数据导第{1}条的记录,一共{2}条",
            emptyMsg:"没有记录"
        }),
        tbar:[{
            id:'addUserGroupForm',
            text:'新建',
            iconCls:'add',
            handler:function(){
                add_btn();
            }
        },'-',{
            id:'editUserGroupForm',
            text:'修改',
            iconCls:'edit',
            handler:function(){
                edit_btn();
            }
        },'-',{
            id:'删除',
            iconCls:'remove',
            text:'删除',
            handler:function(){
                handlerDelete();
            }
        }]
    });
    store.load({params:{start:0,limit:6}});
    
    var userGroupForm=new Ext.form.FormPanel({
        labelWidth:75,
        frame:true,
        bodyStyle:'padding:5px 5px 0',
        waitMsgTarget:true,
        defaultType:'textfield',
        items:[{
            name:'id',
            hidden:true
        
        },{
            fieldLabel:'组名称',
            name:'userGroupName',
            emptyText:'组名称'
        }]
    });
    
    var add_btn = function() {
          addFormWin();
    };    
    var newFormWin ;
    var addFormWin =function(){
        newFormWin=new Ext.Window({
            layout:'fit',
            height:200,
            width:300,
            closeAction:'hide',
            plain:true,
            frame:true,
            title:'添加用户组',
            items:userGroupForm,
            buttons:[{
                text:'保存',
                disabled:false,
                handler:addBtnsHandler
            },{
                text:'取消',
                handler:function(){
                    userGroupForm.form.reset();
                    newFormWin.hide();
                }
            }]
        });
        newFormWin.show()
    }
    

    
    //添加按钮
    function addBtnsHandler() {
        if (userGroupForm.form.isValid()) {
            userGroupForm.form.submit( {
               url : '/MedicalGuidance/manager/addUserGroup_userAction.action', 
               waitMsg : '正在保存数据，稍后...',
               success : function(form, action) {
                        Ext.Msg.alert('保存成功', '添加用户信息成功！');
                        userGroupForm.form.reset();//清空表单
                        grid.getStore().reload();
                        newFormWin.hide();
                },
                failure : function(form, action) {
                          Ext.Msg.alert('保存失败', '添加人员信息失败！');
                 }
               });
            }else {
                Ext.Msg.alert('信息', '请填写完成再提交!');
            }                
    }
    
    
        function edit_btn(){　　 
            var selectedKeys = grid.selModel.selections.keys;//returns array of selected rows ids only　　　　　　
            //判断是否选中一行数据 没有选中提示没有选中，选中加载信息
            if(selectedKeys.length != 1){　　　　　　　　
                Ext.MessageBox.alert('提示','请选择一条记录！');　　　　　　
                }　//加载数据　
                else{
                    var EditUserWin = new Ext.Window({　　　　　　　　
                    title: '修改用户组',　//题头　　　　　　　
                    layout:'fit',//布局方式　　　　　　　　
                    width:400,//宽度　　　　　
                    height:200,//高度　　　　　　　　
                    plain: true,//渲染　　　　　　　　
                    items:userGroupForm,　　　　　　　
                    //按钮
                    buttons: [{　　　　　　　　　　
                        text:'保存',　　　　　　　　　
                        handler:function(){
                            updateHandler(EditUserWin); 　
                        }　　　　　　
                    },{　　　　　　　　　　
                        text: '取消',　　　　　　　　　　
                        handler: function(){　　　　　　　　　　　　
                            EditUserWin.hide();　　　　　　　　　　
                        }　
                    }]　　 
                });
                EditUserWin.show();
                loadUser();
                }
        }     
           //加载数据
           function loadUser(){
               var selectedKeys = grid.selModel.selections.keys;//returns array of selected rows ids only
               userGroupForm.getForm().load({                    
                    waitMsg : '正在加载数据请稍后',//提示信息                
                    waitTitle : '提示',//标题                
                    url : '/MedicalGuidance/manager/loadUserGroup_userAction.action',            
                    params:{id:selectedKeys},                
                    method:'POST',//请求方式             
                    success:function(form,action){
                        userGroupForm.getForm().setValues({
                            id:action.result.data.id,
                            userGroupName:action.result.data.groupName
                        })
                    },
                    failure:function(form,action){//加载失败的处理函数                
                        Ext.MessageBox.alert(Ext.encode(action));     
                        
                    }            
               });        
           }　
         //修改按钮操作
           function updateHandler(w){
            if (userGroupForm.form.isValid()) {
                userGroupForm.form.submit({                    
                    clientValidation:true,//进行客户端验证                
                    waitMsg : '正在提交数据请稍后...',//提示信息                    
                    waitTitle : '提示',//标题                
                    url : '/MedicalGuidance/manager/modifyUserGroup_userAction.action',//请求的url地址                    
                    method:'POST',//请求方式                    
                    success:function(form,action){//加载成功的处理函数    
                         w.hide();
                         userGroupForm.form.reset();//清空表单
                         grid.getStore().reload();                    
                         Ext.Msg.alert('提示','修改信息成功');                    
                    },
                    failure:function(form,action){//加载失败的处理函数                        
                         Ext.Msg.alert('提示','ID不能修改');
                         Ext.Msg.alert('提示','修改信息失败');                    
                    }                
                });    
            }else {
                Ext.Msg.alert('信息', '请填写完成再提交!');  
            }
           }　　　
     //修改操作结束==========================================================================================================================  
           
           
    //删除操作开始==========================================================================================================================
      function handlerDelete(){　　　
              var selectedKeys = grid.selModel.selections.keys; //returns array of selected rows ids only　　　　　　
               if(selectedKeys.length > 0)　　　　　　{　　　　　　　　
                Ext.MessageBox.confirm('提示','您确实要删除选定的记录吗？', deleteRecord);　　　　　　
            }else{　　　　　　　　
                Ext.MessageBox.alert('提示','请至少选择一条记录！');　　　　　　
               }//end　　
      }　
      //删除记录　　　
      function deleteRecord(btn){　　　　 
            if(btn=='yes'){　　　　　　　
                //var selectedRows = grid.selModel.selections.items;//returns record objects for selected rows (all info for row)　获得整行数据　　　　　　　
                    var selectedKeys = grid.selModel.selections.keys;//选中的行的值id
                Ext.MessageBox.show({　　　　　　　　　　　 
                    msg: '正在请求数据, 请稍侯',　　　　　　　　　　　 
                    progressText: '正在请求数据',　　　　　　　　　　　 
                    width:300,　　　　　　　　　　　 
                    wait:true,　　　　　　　　　　　 
                    waitConfig: {interval:200}　　　　　　　　 
                });　　　　　　　　
                Ext.Ajax.request({　　　　　　　　　　　　
                   url: '/MedicalGuidance/manager/deleteUserGroup_userAction.action', //url to server side script　　　　　　　　　　　　
                   method: 'POST',　　　　　　　　　　　　
                   params:{ids:selectedKeys},//the unique id(s)　　　　　　　　　　　　　　　　　　　　　　　
                   failure:function(){　　　　　　　　　　　　　　
                        Ext.MessageBox.hide();　　　　　　　　　　　　　　
                        Ext.MessageBox.alert("警告","出现异常错误！请联系管理员！");　　　　　　　　　　　　
                   },　　　　　　　　　　　　　
                   success:function(){　　　　　　　　　　　　
                        Ext.MessageBox.hide();
                        Ext.MessageBox.alert("成功","删除成功！");　　　
                        　　　　　　　    grid.getStore().removeAt(1);　　　　　　　　　　　
                   }　　　　　　　　　　　　　　　　　　　　　　　　　
                })// end Ajax request
            }
        }
      //删除操作结束        
})

userGroupAction

 

package com.medvision.action.manager;

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;
import org.springframework.stereotype.Component;

import com.medvision.bean.Usergroup;
import com.medvision.dao.base.QueryResult;
import com.medvision.po.UserGroupPo;
import com.medvision.service.manager.usergroup.UserGroupService;
import com.opensymphony.xwork2.ActionSupport;



@Component("userAction")
public class UserAction extends ActionSupport{

    
    private Integer[] ids ;
    private Integer start ;
    private Integer limit ;
    private String userGroupName ;
    private boolean success ;
    private Integer id ;
    private UserGroupPo  data ;
    
    public UserGroupPo getData() {
        return data;
    }

    public void setData(UserGroupPo data) {
        this.data = data;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public boolean isSuccess() {
        return success;
    }

    public void setSuccess(boolean success) {
        this.success = success;
    }

    public String getUserGroupName() {
        return userGroupName;
    }

    public void setUserGroupName(String userGroupName) {
        this.userGroupName = userGroupName;
    }

    private Integer totalProperty ;
    private List root =new ArrayList();
    
    @Resource
    private UserGroupService ugs ;
    


    public Integer getTotalProperty() {
        return totalProperty;
    }

    public void setTotalProperty(Integer totalProperty) {
        this.totalProperty = totalProperty;
    }

    public List getRoot() {
        return root;
    }

    public void setRoot(List root) {
        this.root = root;
    }

    public Integer[] getIds() {
        return ids;
    }

    public void setIds(Integer[] ids) {
        this.ids = ids;
    }

    public Integer getStart() {
        return start;
    }

    public void setStart(Integer start) {
        this.start = start;
    }

    public Integer getLimit() {
        return limit;
    }

    public void setLimit(Integer limit) {
        this.limit = limit;
    }

    /**
     * 获取用户组管理界面
     * @return
     * @throws Exception
     */    
    public String getUserGroupManagerUI() throws Exception {
        // TODO Auto-generated method stub
        return "userGroupUI";
    }

    public String getUserGroup()throws Exception{
        this.setSuccess(false);
        QueryResult<Usergroup> qr=ugs.getUserGroup(this.getStart(),this.getLimit());
        this.totalProperty=qr.getTotal();
        List<Usergroup> userGroup=qr.getItems();
        Iterator it=userGroup.iterator();
        while(it.hasNext()){
            Usergroup ug=(Usergroup)it.next();
            UserGroupPo ugp=new UserGroupPo();
            ugp.setGroupName(ug.getGroupname());
            ugp.setId(ug.getId());
            root.add(ugp);
        }
        this.setSuccess(true);
        return "userGroups";
    }
    
    public String addUserGroup() throws Exception{
        this.setSuccess(false);
        try{
            UserGroupPo ugp=new UserGroupPo();
            ugp.setGroupName(this.getUserGroupName());
            success=ugs.addUserGroup(ugp);
        }catch(Exception e){
            e.printStackTrace();
        }
        return "addGroupResult" ;
    }
    public String deleteUserGroup() throws Exception{
        success=ugs.deleteUserGroupByIds(this.getIds());
        return "delteResult" ;
    }
    
    public String modifyUserGroup() throws Exception{
        
        success=ugs.modifyUserGruop(this.getId(),this.getUserGroupName());
        System.out.println(this.getId());
        System.out.println(this.getUserGroupName());
        
        return "modifyUserGruopResult" ;
    }
    
    public String loadUserGroup() throws Exception{
        UserGroupPo ugp=ugs.getUserGroupById(this.getId());
        if(ugp ==null){
            this.success=false ;
        }else{
            this.setUserGroupName(ugp.getGroupName());
            this.setId(ugp.getId());
            data=ugp;
            System.out.println(data.getGroupName());
            this.setUserGroupName(ugp.getGroupName());
            this.setId(ugp.getId());
            this.success=true ;
        }
        return "loadUserGroup";
    }
    public String getUserManagerUI() throws Exception {
        // TODO Auto-generated method stub
        return "userManagerUI";
    }
}