• 全部
...

关于Ext中重复加载的问题!

清晨v 2010-06-18 11:18:20
先上两张图片,看一下问题的情况!
http://photo.renren.com/photo/sp/henB19UUhsM

http://photo.renren.com/photo/sp/henB19UKMGM

写了Ext的demo,增加用户和修改用户用的是同一个FormPanel,
但是当我先点一下新增用户并关闭后,再打开修改用户的界面时,修改用户里面的Formpanel就会出现两边,反之也一样!下面是js代码,不知道是FormPanel继承的问题,还是Window定义的问题,求高手帮看看!谢谢!
我是看的陈治文的视频教程学的Ext,有个地方还不是很了解就是 类名.superclass.constructor.call(this,{}),这一句是什么意思呢,麻烦也帮忙解释一下,谢谢!



  1. var STUDENT=Ext.data.Record.create([
  2. {name:"sid",type:"string"},
  3. {name:"sname"},
  4. {name:"birthday",type:"string"},//type:"date",dataFormat:"Y-m-d"},
  5. {name:"city",type:"string"},
  6. {name:"stature",type:"int"}
  7. ]);
  8. Ext.apply(Ext.form.VTypes, {
  9. LengthLimit: function(v) {
  10. return v.length<=10
  11. },
  12. LengthLimitText: "字符串长度不能大于10",
  13. IntLimit:function(v){
  14. return v<300;
  15. },
  16. IntLimitText:"身高不能大于300"
  17. });

  18. /********************
  19. *表格,显示人员信息,继承自Ext.grid.GridPanel
  20. *
  21. ********************/
  22. StudentListGrid=Ext.extend(Ext.grid.GridPanel,{
  23. _store:null,
  24. _tbar:null,
  25. _addWin:null,
  26. _updateWin:null,
  27. constructor:function(){
  28. this._store=new Ext.data.JsonStore({
  29. autoLoad:true,
  30. url : "grid_service.jsp?action=getAllStudents",
  31. root:"rows",
  32. id:"id",
  33. fields:STUDENT,
  34. sortInfo:{field: "sid", direction: "DESC"}

  35. });
  36. this._tbar=new Ext.Toolbar({
  37. id:"mainMenu",
  38. items:["-",
  39. {
  40. text:"增加用户",
  41. id:"addBtn",
  42. iconCls:"adduser",
  43. handler:function(){

  44. this._addWin.show();
  45. this._addWin._form.getForm().reset();
  46. },
  47. scope:this
  48. },"-",
  49. {
  50. text:"修改用户",
  51. id:"updateBtn",
  52. iconCls:"modifyuser",
  53. handler:this.updateFn,
  54. scope:this
  55. },"-",
  56. {
  57. text:"删除用户",
  58. id:"delBtn",
  59. iconCls:"deleteuser",
  60. handler:this.deleteFn,
  61. scope:this
  62. },"-","->",
  63. {
  64. xtype:"textfield",
  65. fieldLabel:"请输入姓名",
  66. id:"searchName",
  67. width:100,
  68. emptyText:"-请输入姓名"
  69. },"-",{
  70. text:"搜索",
  71. width:50,
  72. iconCls:"search",
  73. handler:this.searchFn,
  74. scope:this
  75. },"-"
  76. ]

  77. });
  78. this._addWin=new AddNewStudentWindow();
  79. this._updateWin=new UpdateStudentWindow();
  80. StudentListGrid.superclass.constructor.call(this,{
  81. title:"学生列表",
  82. renderTo:Ext.getBody(),
  83. id:"main_grid",
  84. frame:true,
  85. height:300,
  86. width:500,
  87. tbar:this._tbar,
  88. store:this._store,
  89. sm: new Ext.grid.RowSelectionModel({
  90. singleSelect:true
  91. }),
  92. columns:[
  93. {header:"SID",dataIndex:"sid",hidden:true},
  94. {header:"姓名",dataIndex:"sname"},
  95. {header:"生日",dataIndex:"birthday",renderer:this.birthdayFn},
  96. {header:"所在城市",dataIndex:"city"},
  97. {header:"身高",dataIndex:"stature"}
  98. ]

  99. });



  100. },
  101. birthdayFn:function(value){

  102. if(typeof(value)=="string")
  103. return value.substring(0,10);
  104. else
  105. return Ext.util.Format.date(value,"Y-m-d");
  106. },
  107. updateFn:function(){
  108. var sm=this.getSelectionModel();
  109. if(sm.getCount() == 0) {
  110. Ext.Msg.show({
  111. title : '注意!',
  112. msg : '请选择需要修改的学生!',
  113. icon : Ext.MessageBox.WARNING,
  114. buttons : Ext.MessageBox.OK
  115. });
  116. return;
  117. }
  118. var _record=sm.getSelected();
  119. if(_record.data.birthday.length>=10)
  120. _record.data.birthday=_record.data.birthday.substring(0,10);

  121. this._updateWin._form.getForm().loadRecord(_record);

  122. this._updateWin.show();
  123. },
  124. deleteFn:function(){

  125. },
  126. searchFn:function(){

  127. }

  128. });

  129. /*******************************************
  130. *增加人员和修改人员时所用到的Form,继承自Ext.form.FormPanel
  131. *
  132. *
  133. ****************************************/
  134. StudentFormPanel=Ext.extend(Ext.form.FormPanel,{
  135. constructor:function(){

  136. StudentFormPanel.superclass.constructor.call(this,{
  137. width:340,
  138. frame:true,
  139. plain:true,
  140. layout:"form",

  141. labelWidth:60,
  142. labelAlign:'right',
  143. items:[
  144. { xtype:"hidden",
  145. fieldLabel:"id",
  146. id:"sid",
  147. value:"",
  148. width:200},
  149. {
  150. xtype:"textfield",
  151. fieldLabel:"姓 名",
  152. vtype:"LengthLimit",
  153. id:"sname",
  154. value:"",
  155. width:200
  156. },
  157. {
  158. xtype:"datefield",
  159. fieldLabel:"生 日",
  160. id:"birthday",
  161. width:200,
  162. format:"Y-m-d",
  163. editable:false,
  164. value:new Date()
  165. },
  166. {
  167. xtype:"textfield",
  168. fieldLabel:"所在城市",
  169. id:"city",
  170. width:200,
  171. value:""
  172. },
  173. {
  174. xtype:"textfield",
  175. fieldLabel:"身 高",
  176. id:"stature",
  177. width:200,
  178. vtype:"IntLimit",
  179. value:""
  180. }
  181. ]


  182. });
  183. }

  184. });


  185. /*************************************
  186. *增加用户是的弹出窗口,继承自Ext.Window
  187. *
  188. **************************************/
  189. AddNewStudentWindow=Ext.extend(Ext.Window,{
  190. _form:null,
  191. constructor:function(){

  192. this._form=new StudentFormPanel();//这里新建了FormPanel
  193. AddNewStudentWindow.superclass.constructor.call(this,{

  194. title:"增加用户",
  195. width:350,
  196. frame:true,
  197. plain:true,
  198. closeAction:"hide",
  199. autoDestroy:true,

  200. items:[this._form],
  201. modal:true,
  202. buttons:[
  203. {text:"保存",
  204. iconCls:"sure",
  205. handler:this.sureFn,
  206. scope:this},
  207. {text:"重置",
  208. iconCls:"reset",
  209. handler:this.resetFn,
  210. scope:this},
  211. {text:"关闭",
  212. iconCls:"close",
  213. handler:this.closeFn,
  214. scope:this}
  215. ]
  216. });

  217. },
  218. sureFn:function(){

  219. },
  220. resetFn:function(){


  221. },
  222. closeFn:function(){
  223. this.hide();
  224. }



  225. });

  226. /*****************************
  227. *更新用户时调用的窗口
  228. *
  229. ******************************/



  230. UpdateStudentWindow=Ext.extend(Ext.Window,{
  231. _form:null,
  232. constructor:function(){

  233. this._form=new StudentFormPanel();//新建FormPanel
  234. UpdateStudentWindow.superclass.constructor.call(this,{

  235. title:"修改用户",
  236. width:350,
  237. frame:true,
  238. plain:true,
  239. closeAction:"hide",
  240. autoDestroy:true,

  241. items:[this._form],
  242. modal:true,
  243. buttons:[
  244. {text:"保存",
  245. iconCls:"sure",
  246. handler:this.sureFn,
  247. scope:this},
  248. {text:"重置",
  249. iconCls:"reset",
  250. handler:this.resetFn,
  251. scope:this},
  252. {text:"关闭",
  253. iconCls:"close",
  254. handler:this.closeFn,
  255. scope:this}
  256. ]
  257. });

  258. },
  259. sureFn:function(){
  260. },
  261. resetFn:function(){

  262. },
  263. closeFn:function(){
  264. this.hide();
  265. }



  266. });


...全文
给本帖投票
1261 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
撼地神牛 2013-03-13
  • 打赏
  • 举报
回复
但是我见过有用id的,但是它就 不出楼主的情况。不知道为什么纠结中
mingchong 2010-08-27
  • 打赏
  • 举报
回复
解决了,用name就不会出现问题了。哈哈
mingchong 2010-08-27
  • 打赏
  • 举报
回复
我也遇上了这样的问题,可是我的问题用NAME也解决不了,为什么呢
看看我写的东西,帮助解决下,谢谢
http://mingchong2882.javaeye.com/blog/749278
superpt 2010-07-21
  • 打赏
  • 举报
回复
我也遇到了这个问题,看一下7楼的回复,谢谢了
清晨v 2010-06-21
  • 打赏
  • 举报
回复
确实是7L所说的问题,我把id改成name就没问题了,谢谢,呵呵!
zoujp_xyz 2010-06-19
  • 打赏
  • 举报
回复
我看了一下你的图片和代码。
出现的原因基本是这样(呵呵。我以前也遇到过)
首先添加和编辑共用一个窗体,而且是模式窗体,close时触发的hide时间,
你的textfield或其他的组建都用了id属性,当渲染html代码时。id属性是唯一的。因为你事hide窗体。html本来有了id为"name"的标签,当你在单击时就会重复id。
所有会出现2图中的情况
所有楼主可以把所有的form中id属性去掉。用name属性就可以了。
虽然Ext.getCmp("")简单,方便但要是有它的弊端的。
如果要获取form中的组件可以form.from.findField("name");
zoujp_xyz 2010-06-18
  • 打赏
  • 举报
回复
extend 是ext中模拟继承关系的。
看api中大部分都是这样写的。在实际运用中其实可以不要求自己这样这样写。
var win=new Ext。Window({
title:"",
items:[

]
});
这样也是一样的。而且易懂
hoojo 2010-06-18
  • 打赏
  • 举报
回复

Test.superclass.constructor.call(this,{name: 'king'})
这样Test中就有了一个name的属性了,值是king;其实你没有必要一定要搞懂具体的含义。目前你只需要
它是这样用的,当成语法来用就可以了。等你的知识累计到一定程度自然就知道了。
你的问题描述得不够清晰
hoojo 2010-06-18
  • 打赏
  • 举报
回复
类名.superclass.constructor.call(this,{}),这个是相当于java中的构造方法,this当前对象
tzb08 2010-06-18
  • 打赏
  • 举报
回复
如果还没解决 你站内短信联系我 我来帮你调调看
hoojo 2010-06-18
  • 打赏
  • 举报
回复
图片被过滤了看不了
清晨v 2010-06-18
  • 打赏
  • 举报
回复
就是上面的代码,有两个按钮,先按第一个”新增按钮“,在按修改按钮,或者先按修改按钮,再按新增按钮,得到的效果却是像第二张图片展示的那样!有人知道怎么回事吗?看看代码就知道怎么回事了啊!

52,795

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧

手机看
关注公众号

关注公众号

客服 返回
顶部