`
cpu
  • 浏览: 165736 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJs 3.0 + Struts 2.1 + JsonPlugin 0.33

StrutsEXTjsonApacheGoogle 
阅读更多
我的学习成果和大家分享一下。我的学习资料来源于网络，感谢前辈们。
我作了一些改动，没有连接数据库，节省时间。因为我们的目的是让代码跑通。
欢迎大家提出意见


struts2的json plugin的位置在：http://code.google.com/p/jsonplugin/
下载json plugin的jar包，放到/WEB-INF/lib/目录下就可以了

1. Model  PO JavaBean 

public class Person {
    private Long id;
    private String name;
    private String sex;
    private String descn;

    public Long getId() {
        return id;
    }

	//......
}



2. Service 用于造数据的 
public class PersonService {
    public static List getPage() {
        List list = new ArrayList();

         for (int i = start + 1; i <= start + limit; i++) {
               Person p = new Person();
                p.setId(new Long(i));
                p.setName("Zhangsan");
                p.setSex("F");
                p.setDescn("I am NO." + i );

                list.add(p);
        }

        return list;
    }
}


3. Struts 2 的 action 
public class PersonPageAction extends ActionSupport{
    private int limit = 10;
    private int start = 0;
    private int total = 0;
    private List persons = new ArrayList();
    private boolean success = true;

    public int getLimit() {
        return limit;
    }

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

    public int getStart() {
        return start;
    }

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

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public List getPersons() {
        return persons;
    }

    public void setPersons(List persons) {
        this.persons = persons;
    }

    public boolean isSuccess() {
        return success;
    }

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

    @Override
    public String execute() throws Exception {
        total = 100;
        persons = PersonService.getPage(start, limit);
        return SUCCESS;    
    }
}


4. Struts的配置文件，放到src下 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
    
	<constant name="struts.i18n.encoding" value="UTF-8"/>
    <package name="person" extends="json-default">
        <action name="list" class="com.extjs.action.PersonPageAction">
            <result type="json"/>
        </action>
    </package>
</struts>


5. 前台页面 
<html>
<head>
    <title>Struts Test</title>

    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">

    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all-debug.js"></script>

    <script type="text/javascript" src="struts.js"></script>

</head>
<body>
<div id="struts"></div>
</body>



6. Ext 的 js 文件 
Ext.onReady(function() {
    Ext.QuickTips.init();

    var sm = new Ext.grid.CheckboxSelectionModel(); // CheckBox
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(), //
        sm,
        {header: "编号", dataIndex: 'id'},
        {header: "性别", dataIndex: 'sex'},
        {header: "名称", dataIndex: 'name'},
        {header: "描述", dataIndex: 'descn'}
    ]);

    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url: '/list.action'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'total',
            root: 'persons',
            successProperty: 'success'
        }, [
            {name: 'id', mapping: 'id', type: 'int'},
            {name: 'sex', mapping: 'sex', type: 'string'},
            {name: 'name', mapping: 'name', type: 'string'},
            {name: 'descn', mapping: 'descn', type: 'string'}
        ])
    });

    var grid = new Ext.grid.GridPanel({
        el: 'struts',
        ds: ds,
        sm: sm,
        cm: cm,
        width: 700,
        height: 280,

        bbar: new Ext.PagingToolbar({
            pageSize:10,
            store: ds,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录, 共 {2} 条',
            emptyMsg: '没有记录'
        })
    });

    grid.render();
    ds.load({params: {start: 0, limit:10}});
});


[img][/img]
分享到：
| 应该记录什么样的日志
评论
1 楼 excite 2009-11-22  
呵呵，不错
根据你的步骤，我也成功了，多谢
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics