ext editorGrid 问题

Question

我从网上看到editorGrid的一个实例，就下了下来，想学习一下，结果出现以下问题

添加用户时，id先是和最后一个id一样后来又成了始终为1了
显示数据时，总有和数据条数相同书目的空白条

[img]http://dl.iteye.com/upload/attachment/175952/13b30933-c726-36ee-b3c4-57016d5dde4b.jpg[/img]

[code="java"]/**

• 在线通讯录制作: 刘长炯 [e-mail] http://beansoft.blogjava.net/ 2008年5月 */

// 定义一个用户对象,这样便于我们动态的添加记录,虽然也可以设置成匿名内置对象
var User = Ext.data.Record.create([
// 下面的 "username" 匹配读到的标签名称
{
name : 'id',
type : 'int'
}, {
name : 'user'
}, {
name : 'password'
}
]);

/**

• 创建文本列模型.
• @param {ID}
• _id
• @param {列名显示文本}
• _header
• @param {数据ID}
• _dataIndex
• @param {宽度}
• _width 可选
• @param {是否为空}
• notBlank 可选
• @param {渲染器}
• _renderer 可选
• @param {自定义修改器}

•        _editor 可选
  

  */
  function createTextColumn(_id, _header, _dataIndex, _width, notBlank,
  _renderer, _editor) {
  var object = {
  id : _id,
  header : _header,
  dataIndex : _dataIndex,
  width : _width
  };

  if (_editor) {
  object.editor = _editor;
  } else if (notBlank == true) {
  object.editor = new Ext.form.TextField({
  allowBlank : false
  // 不能为空
  });
  } else {
  object.editor = new Ext.form.TextField();
  }

  if (_renderer) {
  object.renderer = _renderer;
  }

  return object;
  }

/**

• 快速创建文本列
• @param {数据ID}
• _dataIndex
• @param {列名显示文本}
• _header
• @param {宽度}
• _width 可选
• @return {列对象} */ function qCreateColumn(_dataIndex, _header, _width) { return createTextColumn(_dataIndex, _header, _dataIndex, _width); }

Ext.onReady(function() {
Ext.QuickTips.init();

// 格式化日期显示
function formatDate(value) {
    return value ? value.dateFormat('Y, M d') : '';
}

// 格式化性别显示,这是个 renderer, 渲染器
function formatSex(value) {
    return value ? "男" : "女";
}

// 弄个缩写的别名
var fm = Ext.form;

// 列模型定义了表格所有列的信息,
// dataIndex 将特定的列映射到数据源(Data Store)中的数据列(在后面创建)
var cm = new Ext.grid.ColumnModel([
        {
            id : 'id',
            header : "编号",
            dataIndex : 'id',
            width : 50
        },

        /*
         * { id : 'username', header : "姓名", dataIndex : 'username', width :
         * 250, editor : new fm.TextField({ allowBlank : false // 不能为空 }) }
         */

        createTextColumn('username', '姓名', 'user', 50, true),
        createTextColumn('password', '密码', 'password', 50, true)
]);

// 默认情况下列是可排序的
cm.defaultSortable = true;

// 创建 Data Store
var store = new Ext.data.Store({
    // 使用 HTTP 加载
    url : 'nb_xml.jsp',

    // 因为返回值是 XML, 所以我们创建一个解析器
    reader : new Ext.data.XmlReader({
        // 记录必须包含 "user" 标签
        record : 'user'
    }, User),

    sortInfo : {
        field : 'username',
        direction : 'ASC'
    }// 排序信息
});

// 创建编辑器表格
var grid = new Ext.grid.EditorGridPanel({
    store : store,
    cm : cm,
    renderTo : 'editor-grid',
    width : 500,
    height : 300,
    autoExpandColumn : 'username',
    title : '通讯录',// 标题
    frame : true,
    clicksToEdit : 2,// 设置点击几次才可编辑
    selModel : new Ext.grid.RowSelectionModel({
        singleSelect : false
    }),// 设置单行选中模式, 否则将无法删除数据

    // 顶部工具栏按钮
    tbar : [

    {
        text : '添加用户',
        iconCls : 'add',// 按钮图标的CSS名称

        handler : function() {// 点击按钮执行的操作
            var n = grid.getStore().getCount();// 获得总行数

            // 显示等待对话框
            Ext.Msg.wait("请等候", "添加用户", "操作进行中...");

            // 调用 DWR 进行添加操作, 操作完成后调用方法来更新界面
            JUserManagerNB.addUser('user' + n  , function(data) {
                if (data) {
                    Ext.Msg.hide();// 隐藏对话框

                    var p = new User({
                        id : data,
                        username : 'user'+n ,
                        password:'user'
                    });

                    grid.stopEditing();// 停止编辑

                    store.insert(n, p);// 插入到最后一行
                    grid.startEditing(n, 1);// 开始编辑1单元格
                }
            });
        }
    },

    {
        text : '导出为Excel格式',
        iconCls : 'details',
        handler : function() {
            document.location = "nb_excel.jsp";
        }
    },

    {
        text : '删除所选',
        iconCls : 'remove',
        handler : function() {
            var record = grid.getSelectionModel().getSelected();// 返回值为
            // Record 类型

            if (!record) {
                Ext.Msg.alert("提示", "请先选择要删除的行!");
                return;
            }

            // 弹出对话框警告
            if (record) {
                Ext.MessageBox.confirm('确认删除', '你真的要删除所选用户吗?',
                        function(btn) {
                            if (btn == 'yes') {// 选中了是按钮
                                // 调用 DWR, 执行结果成功时方删除所有数据
                                // 显示等待对话框
                                Ext.Msg.wait("请等候", "删除用户", "操作进行中...");

                                JUserManagerNB.removeUser(record.get("id"),
                                        function(data) {
                                            if (data) {
                                                // 更新界面, 来真正删除数据
                                                store.remove(record);
                                                Ext.Msg.hide();// 隐藏对话框
                                            } else {
                                                Ext.Msg.alert("出错了!",
                                                        "单个用户数据删除失败!");
                                            }
                                        });

                            }
                        });
            }

        }
    }

    ]
});

// 单元格编辑后事件处理
grid.on("afteredit", afterEdit, grid);

// 事件处理函数
function afterEdit(e) {
    var record = e.record;// 被编辑的记录

    // 显示等待对话框
    Ext.Msg.wait("请等候", "修改中", "操作进行中...");

    // 调用 DWR, 执行结果成功时方删除所有数据
    JUserManagerNB.editUser(record.get("id"), e.field, e.value,
            function(data) {
                if (data) {
                    // 更新界面, 来真正删除数据
                    // Ext.Msg.alert('您成功修改了用户信息', "被修改的用户是:"
                    // + e.record.get("username") + "\n 修改的字段是:"
                    // + e.field);// 取得用户名
                    Ext.Msg.hide();// 隐藏对话框

// // 更改最后更新的时间,同步到后台
// JUserManagerNB.editUser(record.get("id"), 'modified',
// (new Date()).clearTime());
// 更新界面
record.set('modified', (new Date()).clearTime());
} else {
Ext.Msg.alert("出错了!", "修改数据失败,将重置为修改前的值!", function() {
record.set(e.field, e.originalValue);
});
}
});

};

// 触发数据加载
store.load();

});
[/code]

Answer 1

一般添加记录的实现都是本地把要添加信息提交到服务器,服务器插入数据库返回插入后的就结果,比如id,然后把id通过josn返回给extjs,extjs再结合本地数据加上id插入到store中,最后就显示在grid中,这样的效率是最高的,不推荐每次插入数据库,又查询刷新一下grid.至于为什么你grid中显示的是空白行,应该和你的列模型定义有关.dataIndex没有对应到store中的field