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

EXT STRUTS2

    博客分类：
  • AJAX
EXTCSSJSPAjaxjson 
阅读更多
由于项目的原因 最近在学习EXT 公司给买了本大BOOK 看了大半天

弄了个JSON+STRUTS2+EXT 动态GIRD的例子
<!--JSP-->
<%@ 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>
<!--接受数据的时候可以是JSP也可以是STRUTS2的ACTION累-->
<%@ 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);
%>
分享到：
| Jquery Ajax Demo
评论
发表评论

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

相关推荐

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