ExtJS中RowEditing插件的一些使用问题及解决方法-创新互联
RowEditing为grid进行行级别编辑时使用的插件,与CellEditing插件不同,编辑完一行数据,即需要保存数据。
创新互联是专业的太和网站建设公司,太和接单;提供做网站、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行太和网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!对于RowEditing的使用官方文档中有详细的例子,本文主要解决该插件在使用中出现的一些问题及解决方式。
问题1:
新增数据或者编辑数据时,进入编辑状态后,如果编辑表单数据有效性为false时(isValid),保存(update)按钮为灰色不可用状态,即使改变数据使表单数据有效时,该按钮仍为不可用。
而官方实例中的代码中,为避免出现按钮不可用,采用新增数据直接赋值的方法:
// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: 'new@sencha-test.com',
start: Ext.Date.clearTime(new Date()),
salary: 50000,
active: true
});
该代码为新增一条数据,可见其将新增数据设为符合表单要求数据。
如果将其中一条数据置空,新增数据后如图1,保存按钮不可用
图片1
即使输入数据,按钮依然无法可用
图片2
问题原因:
RowEditing插件使数据进入编辑状态的方法为startEdit(record, columnHeader),该方法中其实是使用了Ext的一个内部工具类RowEditor中的startEdit(record, columnHeader)方法.
而该内部工具类的startEdit()方法使用loadRecord()将选中的数据放入form表单中进行编辑。loadRecord()方法中调用updateButton(isValid)对按钮状态进行了设置;
所以当进入编辑状态后,如果需要编辑的数据本身就存在不符合要求的字段,那么保存按钮被置为不可用状态。即使所有数据都符合要求,按钮也不可用。
问题解决:
因为只有在数据进入编辑时对按钮进行设置,后期的输入操作没有类似的操作。
内部工具类RowEditor中的方法onFieldChange()正是应对输入改变时处理错误信息显示及按钮设置的(源码不再罗列,可参考文档,注:文档中该方法没有显示在方法列表中,需要在js文件中查找)
工具类中的事件:‘fieldvaliditychange’‘validitychange’是对表单有效性改变时事件,区别为‘validitychange’针对整个表单而‘fieldvaliditychange’单个编辑框
代码:
var rowEditor = grid.plugins[0].getEditor();
rowEditor.on('fieldvaliditychange', rowEditor.onFieldChange, rowEditor);
该代码写在列表页创建之后(‘fieldvaliditychange’‘validitychange’均可)。
当编辑的数据有效性发生改变时,会自动设置保存按钮的可用状态
图片3
图片4
图片5
注:代码测试有效,需根据具体情况绑定该事件
附件:http://down.51cto.com/data/2367677另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前名称:ExtJS中RowEditing插件的一些使用问题及解决方法-创新互联
分享路径:http://hbruida.cn/article/cdhgeo.html