Extjs分页问题，独自研究了四五天，实在没办法了

Question

在学习Extjs时，深深为它的界面所吸引，于是就找了些资料学习一下，前面一直很顺利，可学到GridPlane分页时，遇到了问题。由于在以前的项目中我们一直采用DWR调用后台JavaBean的方法。所以也想在Extjs中用DWR调用JavaBean分页。一开始的想法是想通过DWR从后台调数据到前台数据成为本地数据后，再分页，结果失败，上网一查原来不支持本地数据分页,后来在网上找了好几个DWRProxy，确实能调用后台数据，可分页时无法将Stroe的params:{start:'start',limit:'limit'}顺利的提交到后台，从网上也找了几个示例，说是源码，下来一看，不是少这个bean就是少那个东西，按照人家给的例子进行摸索，郁闷，结果可想而知，失败。后来我看好多Extjs的使用者都是在页面或action中直接输出数据，利用httpProxy中的Url就可以了，原来换个方法却如此简单，马上动手，怕自已理解错误，特意从网上找了一个运行成功的例子，没成想运行成功后，页面显示无效的调用过程或参数，特将代码粘贴出来，各位大虾帮忙给分析一下。xt.onReady(function() {
var record = new Ext.data.Record.create([{
name : "id"
}, {
name : "name"
}, {
name : "age"
}, {
name : "unitName" }, {
name : "address"
}, {
name : "gender"
}]);
var read = new Ext.data.JsonReader({
totalProperty : "totalSize",
root : "data"
}, record); var store = new Ext.data.JsonStore({
proxy : new Ext.data.HttpProxy({
 method: 'GET',   
        url: 'http://localhost:8088/page/person.do'  //应该是这一行报错,无法调用，这个person.do在浏览器直接运行一切正常
}),
reader : read
});

store.load({
params : {
start : 0,
limit : 6
}
});
var cm = new Ext.grid.ColumnModel([new Ext.grid.CheckboxSelectionModel(), {
header : "编号",
dataIndex : "id"
}, {
header : "姓名",
dataIndex : "name",
editor : new Ext.form.TextField({
allowBlank : false
})
}, {
header : "年龄",
dataIndex : "age" }, {
header : "部门",
dataIndex : "unitName"
}, {
header : "地址",
dataIndex : "address"
}, {
header : "性别",
dataIndex : "gender"
}]); var grid = new Ext.grid.EditorGridPanel({
renderTo:"div1",
loadMask : true,

clickToEdit : 2,
selModel : new Ext.grid.RowSelectionModel({
singleSelect : false
}),
autoExpandColumn : 5,
tbar : new Ext.Toolbar({}),
bbar : new Ext.PagingToolbar({
store : store,
pageSize : 3, displayInfo : true, displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条', emptyMsg : "没有记录" }),
store : store,
cm : cm
});
var rq = new Ext.form.DateField({
format : 'Y-m-d'
});
var search = new Ext.Button({
text : "查询"
});
var add = new Ext.Button({
text : "新增"
});
var del = new Ext.Button({
text : "删除"
});
search.on('click', function() {
var value = rq.getValue();
if (value != '')
Ext.Msg.alert("信息", "查询日期为" + value.format("Y-m-d") + "的相关数据")
else
Ext.Msg.alert("消息", "请选择日期后再点击查询按钮");
});
grid.getTopToolbar().addText("日期：");
grid.getTopToolbar().add(rq);
grid.getTopToolbar().add(search);
grid.getTopToolbar().addFill();
grid.getTopToolbar().add(add);
grid.getTopToolbar().addSeparator();
grid.getTopToolbar().add(del);
grid.render();
});
Struts1.2配置<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://struts.apache.org/dtds/struts-config_1_2.dtd"><struts-config>
  <data-sources />
  <form-beans />
  <global-exceptions />
  <global-forwards />
  <action-mappings >
    <action      
      path="/person"
      type="com.yourcompany.struts.action.PersonAction"
      validate="false" />  </action-mappings>  <message-resources parameter="com.config.struts.ApplicationResources" />
</struts-config>
Action代码:public class PersonAction extends DispatchAction {

public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {

System.out.println("aaa");

/*以下为分页代码,为了测试此action是否调用，所以所屏蔽掉了
response.setCharacterEncoding("utf-8");        //分页实现        String start = request.getParameter("start");        String limit = request.getParameter("limit");        int index = Integer.parseInt(start);        int pageSize = Integer.parseInt(limit);        List list = new ArrayList();
        for(int i=0;i<10;i++){
         Person p=new Person();
         p.setAge(i);
         p.setName("person"+i);
         p.setAge(10+i);
         p.setAddress("china");
         p.setGender("男");
         p.setUnitName("学校");
         list.add(p);
        }        JSONObject json = new JSONObject();        json.put("totalProperty", Integer.valueOf(list.size()));        JSONArray arr = JSONArray.fromObject(list);        json.put("root", arr);        System.out.println(json);        try {
response.getWriter().print(json);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}*/        return null;

}
}

Answer 1

还真帮不了你，我用asp.net确实实现过这个功能。

Answer 2

在网上确实看到过很多成功的例子，不过都是PHP或.net的成功示例，郁闷

Answer 3

我们现在的项目就是使用Extjs，刚开始学习的时候确实会遇到很多困难的，希望我能帮到lz。
后台的设置断点能捕获到吗？还是在前台的时候就已经报错了（错误提示发生在哪行代码）？

Answer 4

我没用status实现过Ext分页

Answer 5

/**
 * 后台java*/
 public String getTarget(String sys,String type,String start,String limit,String key) {
JSONArray json = new JSONArray();
int index=Integer.parseInt(start);
int max=Integer.parseInt(limit)+index;
String returnStr="";
String name_zhi ="";
try {
if(key!=null){
name_zhi=new String (key.getBytes("ISO8859-1"),"gb2312");}
ArrayList TargetList = new ArrayList();
StringBuffer sql = new StringBuffer();
sql.append("SELECT distinct T.ID,GROUPID,NAME,DESC,TYPE,UNIT,T.STATUS,VALUETYPE,H.TYPENAME " +
" ,d.CUBEBUSINAME,d.CUBEID,e.BUSINAME ,e.MEASUREID,c.MEASURENAME  " +
"  FROM DH_TARGET T  left join (select TYPECODE ,TYPENAME  " +
"from  COMMON_PROPLIST a where CATALOGUEID=3)H on T.GROUPID=H.TYPECODE " +
"left join DH_TG_CUBE C on C.TARGETID=T.ID and ((t.TYPE=2 and c.CUBEID=-1 and MEASUREID=-1) or (t.TYPE<>2) ) " +
"left join MD_CUBE D on d.CUBEID=c.CUBEID " +
"left join MD_MEASURE E on c.MEASUREID=e.MEASUREID " +
" left join (select name tarFrom ,TARGERFROM from DH_TARGET t1,DH_TG_CUBE c1 where t1.ID=c1.TARGERFROM ) M on M.TARGERFROM=c.TARGERFROM "+
" where  1=1 ");
if(sys!=null&&!sys.equals("")){
if(!sys.equals("0")){
sql.append(" and GROUPID='"+sys+"'");
}
}
if(key!=null&&!name_zhi.equals("")){
sql.append(" and NAME like '%"+name_zhi+"%'");
}
sql.append(" order by type, GROUPID ");
DAO dao = new DAO();
Vector vctResults = new Vector();
vctResults = dao.getDataSet("Jarp", sql.toString());// 取得查询结果
if(max==0)
max=vctResults.size();
if (vctResults != null) {
for (int i = index; i<max&&i < vctResults.size(); i++) {
Hashtable hashRows = (Hashtable) vctResults.get(i);
TargetVo tfVO = new TargetVo();
tfVO.setId((String) hashRows.get("ID")); //
tfVO.setGroupid((String) hashRows.get("GROUPID")); //
tfVO.setName((String) hashRows.get("NAME")); //
tfVO.setDesc((String) hashRows.get("DESC")); //
tfVO.setType((String) hashRows.get("TYPE")); //
tfVO.setUnit((String) hashRows.get("UNIT")); //计量单位
tfVO.setStatus((String) hashRows.get("STATUS")); //是否可用
tfVO.setMeasurename((String) hashRows.get("MEASURENAME")); //别名
tfVO.setExpresion((String) hashRows.get("EXPRESION")); //
tfVO.setValuetype((String) hashRows.get("VALUETYPE")); //值类型 tfVO.setTypename((String) hashRows.get("TYPENAME")); //分类名称
// tfVO.setTargerfrom((String) hashRows.get("TARGERFROM")); //来源指标
// tfVO.setTarfromname((String) hashRows.get("TARFROM"));
tfVO.setCubebusiname((String) hashRows.get("CUBEBUSINAME")); 
tfVO.setCubeid((String) hashRows.get("CUBEID")); 
tfVO.setBusiname((String) hashRows.get("BUSINAME")); 
tfVO.setMeasureid((String) hashRows.get("MEASUREID"));
// 项目编码(项目基本信息管理)
    TargetList.add(tfVO);
}
json = JSONArray.fromObject(TargetList);
 returnStr = "{\"totalCount\":\"" + vctResults.size() + "\",\"results\":"
+ json.toString() + "}"; }else returnStr= "{\"totalCount\":\"0 \",\"results\":[]}"; } catch (Exception e) {
e.printStackTrace();
}
return returnStr; }

/**前台js*/var reader_t1 = new Ext.data.JsonReader({
totalProperty : 'totalCount',
root:'results',
fields:[{name:'id'},{name:'groupid'},{name:'name'}
,{name:'desc'},{name:'type'},{name:'typename'}
,{name:'unit'}, {name:'status'},{name:'valuetype'},{name:'targerfrom'}
,{name:'cubebusiname'},{name:'cubeid'},{name:'businame'},{name:'measureid'},{name:'measurename'},{name :'expresion'},{name:'tarfromname'}]
});
var key_ss=getElValue("seach", "");var store_proxy=new Ext.data.HttpProxy({//
url:basePath + 'JarpListener' + openUrl_target+'&param_0='+fl+'&param_4=' + key_ss 
});var targetStore=new Ext.data.GroupingStore({
proxy:store_proxy,
reader:reader_t1,
sortInfo:{field: 'id', direction: "ASC"},
groupField:'type'
});targetStore.load({
params : {
param_2 : 0,//开始
param_3 : 11//每页11行
}
});var g_grid = new Ext.grid.GridPanel({
        store: targetStore,
        title: '业务数据项管理',
       border : true,
        region:'center',
        width: '85%',
//        trackMouseOver:true,
//        iconCls : 'icon-grid',
frame : false,
collapsible : false,
autoScroll : true,
        animCollapse: false,
        trackMouseOver: false,
        enableColumnMove: false,
enableHdMenu  :false,
        cm : new Ext.grid.ColumnModel([ 
            {id:'id',header: "编号", width: 20, dataIndex: 'id',hidden:true, sortable: false}
            ,{header: "业务数据项名称", width: 20, dataIndex: 'name'}
            ,{header: "描述", width: 20, dataIndex: 'desc', sortable: false,hidden:true}
            ,{header: "业务数据项分类", width: 20, dataIndex: 'typename', sortable: false}
            ,{header: "业务数据项类别", width: 20, dataIndex: 'type',renderer : fsort, sortable: false}
            ,{header: "状态", width: 20, sortable: false, dataIndex: 'status', renderer : fstate}
            ,{header: "业务数据项展现", width: 20, sortable: false, dataIndex: 'id',hidden:true}
            ,{header: "分类编号", width: 20, sortable: false, dataIndex: 'groupid',hidden:true}
            ,{header: "来源业务数据项", width: 20, sortable: false, dataIndex: 'targerfrom',hidden:true}
        ]),
        view: new Ext.grid.GroupingView({
            forceFit:true,//自适应宽度
            showGroupName: false,
            enableNoGroups:false, // REQUIRED!
            hideGroupedColumn: true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})'
        }),
  bbar:thisbar=new Ext.PagingToolbar({
pageSize : 11,
store : targetStore,
// hidden :true,
// cursor
beforePageText:"第"
,afterPageText:"页 共{0}页",
paramNames : {
start : 'param_2',
limit : 'param_3'
},
displayInfo : true,
displayMsg : '当前显示第{0}-{1}条/共{2}条记录'
}),

tbar : ['关键字查询：', mySrch
,  '-',
{text: '添加',iconCls:'add',
                menu: [action1,action2,action3]          // <-- Add the action directly to a menu
            },'-',{
text : '修改',iconCls:'modify'
,handler : function (){modTarget()}},'-',{
text : '删除',iconCls:'delete'
,handler : detTarget},'-',{
text : '详细信息',iconCls:'show'
,handler : function (){modTarget(true)}},'-',{
text : '查看',iconCls:'section'
,handler : fexhibit},'-']
    });
    

Answer 6

var store_proxy=new Ext.data.HttpProxy({// 
url:basePath + 'JarpListener' + openUrl_target+'&param_0='+fl+'&param_4=' + key_ss 
}); basePath 定义的什么？
'JarpListener'代表什么？
openUrl_target定义的什么
后台的java方法是存在于普通的Bean中还是Action中??

Answer 7

var store = new Ext.data.Store({   
    proxy: new Ext.data.HttpProxy({url: 'page/person.do'}), 
        reader: new Ext.data.JsonReader({ 
                                totalProperty : "totalSize",
id: 'id',
root: 'data' 
        },[ 
{name:'name', mapping:'name'}, 
'id'
])   
}); 
store.on("load", function(store, records, o){
     alert(store.getCount());
});
store.load({params : {start : 0,limit : 6}});lz先用我的这个方法调试一下吧。。url改成相对路径看看

Answer 8

你这里的page/person.do是什么呀，一般来讲action不都是真接person.do的吗？为什么加page，page代表什么？？

Answer 9

ie8 可以调试看看哪里出错了.DWR,好多年没用了.
EXT也有其它的AJAX方法,读不读得到和STRUTS应该没有问题吧.DWR似乎不是通过ACTION的.直接调用业务BEAN.以前貌似成功分页.现在都不知道在哪了.

Answer 10

已经解决了
var store = new Ext.data.JsonStore({
        proxy : new Ext.data.HttpProxy({
             method: 'GET',   
        url: 'http://localhost:8088/page/person.do'  //应该是这一行报错,无法调用，这个person.do在浏览器直接运行一切正常
        }),
        reader : read
    });  url: 属性根据项目情况进行修改，.do你可以假想它存在于项目的根路径下，如果当前页面文件为项目根目录下main文件夹里的文件，那么url修改为../xx.do就行了

Answer 11

大哥，你的url中用了完整的HTTP路径，js如果不做特殊处理的话，是不可以跨域访问的
如果要跨域访问，Extjs提供的一个Script什么的东西。可以看下。