EXT STRUTS2

2010_315

浏览: 11143 次
性别:
来自: 北京

最近访客更多访客>>

dawei7405

bigtallhcy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

EXT CSS JSP Ajax json

由于项目的原因最近在学习EXT 公司给买了本大BOOK 看了大半天

弄了个JSON+STRUTS2+EXT 动态GIRD的例子

<%@ page language="java" import="java.util.*,com.opensymphony.xwork2.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>struts2-ext</title>
<link href="<%=request.getContextPath()%>/Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script type='text/javascript' src='<%=request.getContextPath()%>/Ext/ext-base-debug.js'></script>
    <script type='text/javascript' src='<%=request.getContextPath()%>/Ext/ext-all-debug.js'></script>
</head>
<script type="text/javascript">
Ext.onReady(function(){

    var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id',editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: false
        }))},
        {header:'名称',dataIndex:'name',editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: false
        }))},
        {header:'描述',dataIndex:'descn',editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: false
        }))}
    ]);

    var data = [
        ['1','name1','descn1'],
        ['2','name2','descn2'],
        ['3','name3','descn3'],
        ['4','name4','descn4'],
        ['5','name5','descn5']
    ];

    var ds = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ]),
pruneModifiedRecords: true
    });

    var Record = Ext.data.Record.create([
        {name: 'id', type: 'string'},
        {name: 'name', type: 'string'},
        {name: 'descn', type: 'string'}
    ]);

    var grid = new Ext.grid.EditorGridPanel({
        el: 'grid',
        ds: ds,
        cm: cm,
        width: 400,
        height: 600,
        tbar: new Ext.Toolbar(['-', {
            text: '添加一行',
            handler: function(){

                var initValue = {id:'',name:'',descn:''};

                var p = new Record(initValue);

                grid.stopEditing();
                ds.insert(0, p);
                grid.startEditing(0, 0);

                p.dirty = true;
                p.modified = initValue;
                if(ds.modified.indexOf(p) == -1){
                    ds.modified.push(p);
                }
            }
        }, '-', {
            text: '删除一行',
            handler: function(){
                Ext.Msg.confirm('信息', '确定要删除？', function(btn){
                    if (btn == 'yes') {
                        var sm = grid.getSelectionModel();
                        var cell = sm.getSelectedCell();

                        var record = ds.getAt(cell[0]);
                        ds.remove(record);
                    }
                });
            }
        }, '-', {
            text: '保存',
            handler: function(){
                var m = ds.modified.slice(0);
                var jsonArray = [];
                Ext.each(m, function(item) {
                    jsonArray.push(item.data);
                });

                Ext.lib.Ajax.request(
                    'POST',
                    'grid2.jsp',
                    {success: function(response){
                        Ext.Msg.alert('信息', response.responseText, function(){
                            ds.reload();
                        });
                    },failure: function(){
                        Ext.Msg.alert("错误", "与后台联系的时候出现了问题");
                    }},
                    'data=' + encodeURIComponent(Ext.encode(jsonArray))
                );
            }
        }, '-'])
    });
    grid.render();

    ds.load();
});
</script>
<body>
<div id="grid" style="height:300px;"></div>
</body>
</html>

<%@ page contentType="text/html;charset=utf-8"%>
<%
    request.setCharacterEncoding("UTF-8");
    response.setCharacterEncoding("UTF-8");

    String data = request.getParameter("data");
    System.out.println(data);

    response.getWriter().print(data);
%>

分享到：

EXT 初学笔记 | Jquery Ajax Demo

2010-04-23 17:35
浏览 1528
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

EXT STRUTS2

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

EXT STRUTS2

评论

发表评论

相关推荐

EXT 初学笔记

Jquery Ajax Demo

Jquery.validate 例子

最近访客更多访客>>