刚接触web前端的编程,由于对js编程不太熟悉,在使用过程中遇到一些问题,在此记录下来。
问题简述:由于在项目中需要多次用到一个EXT的查询控件,所以自然而然的想到将这部分代码封装起来,单独保存在一个js文件中,其它需要用到该控件的js文件再调用此控件。于是我将该控件定义如下:
var dateForm= new Ext.FormPanel({ collapsible:true, collapsed:false, frame : true, width : '100%', labelAlign : 'right', labelWidth : 40, layout : 'form', items : [ { layout : 'column', items : [ { columnWidth : 0.3, layout : 'form', items : [ new Ext.form.DateField({ fieldLabel : '开始', format : 'Y-m', emptyText : '请选日期', name : 'startDate ' }) ] }, { columnWidth : 0.3, layout : 'form', items : [new Ext.form.DateField({ fieldLabel : '结束', format : 'Y-m', // maxValue:new Date(), emptyText : '请选日期', name : 'endDate' })] }, { columnWidth : 0.3, layout : 'form', items : [ new Ext.Button({ text : '查询', id : 'query', handler : function() { } }) ] } ] } ] });
然后在两个tab页面中分别调用dateForm在tabPanel中加载该控件,只调用一次的时候,控件显示正常,但是调用两次之后,原本预期在两个tabPanel出现的dateForm,只出现一次。而且FF没有报任何错误。
解决方法:在网上找了一阵子原因,发觉两个tabPanel由同一个html调用之后,两个写tabPanel的js页面被编译在一个html页面中,dateForm控件只被渲染了一次。将代码改成如下形式:
function createDateForm(){ startDate = new Ext.form.DateField({ fieldLabel : '开始', format : 'Y-m', emptyText : '请选日期', name : 'startDate ' }); endDate = new Ext.form.DateField({ fieldLabel : '结束', format : 'Y-m', // maxValue:new Date(), emptyText : '请选日期', name : 'endDate' }) ; return dateQueryForm= new Ext.FormPanel({ collapsible:true, collapsed:false, frame : true, width : '100%', labelAlign : 'right', labelWidth : 40, layout : 'form', items : [ { layout : 'column', items : [ { columnWidth : 0.2, layout : 'form', items : [ startDate ] }, { columnWidth : 0.2, layout : 'form', items : [endDate] }, { columnWidth : 0.2, layout : 'form', items : [ new Ext.Button({ text : '查询', id : 'query', handler : function() { } }) ] } ] } ] }); }
这样在原本需要调用dateForm的地方调用createDateForm方法,就可以多次使用该控件了