组件动态化生成

0 0

组件动态化生成5

先说明以下我的思想，首先大家做项目的时候肯定会遇到很多重复的页面，例如有4个模块，分别都有“增删查改”四个功能，一般这样会弄4*4=16个页面分别对应4个模块的增删查改页面，还有4个人页面是对应4个模块的，这样一共就20个页面了，用html肯定需要弄成这么多个页面，但用了EXT后，肯定希望页面越少越好，所以在4个模块的页面就写一个页面，让控制层去生成这4个模块的页面，再写一个页面是增删查改的tempalte，那我再让控制层通过我在动态生成出来的gird组件上的按钮再生成出增删查改的页面，这样就简单很多，而且不需要写那么多重复的代码，但我在用这过程中就出现以下问题，下面是具体分析：

我想用controller去创建view，就是用事件去创建组件，之后用那组件上的按钮再去触发事件再创建新的组件，在第一次触发创建是可以的，但在第二次触创建就没相应了，又不报错。

原本我的第一次触发创建是完全靠事件去创建view的，简略代码如下：

首先我创建一个view叫E的类，E中都是配置一些selType，tbar之类的配置

Ext。defined（‘E’）之后我在控制层在我点解树叶的时候就Ext.create（“E”,{

alias：‘widget。’+childView，

store：childView，

columns：childView，

id：childView

}）

childView是我要创建的页面，分别有A，B，C，D四个页面，这样是可以用controller生成出我要的页面，这四个页面都是grid，并且上面是由按钮的，按钮暂时写在E中。在生成childView后，我是想通过childView上的按钮（即是E上写出的按钮tbar）来生成crate，update，load三个页面，但是我这样做我点击childView上的任意一个按钮都没反应，开始怀疑的id问题，我就把原本添加用的id从add改成create，不行，我再怀疑是找不到alias，我就再创建好childView之后alert一下别名，alert出来是widget.childView，后来我又怀疑是我自己弄出来的BUG就把原controller文件删了，再建，还是不行（因为我之前有留言过tabpanel下grid就有一个重复列的bug，后来重新搭建代码基本一样，只是我更优化了代码，就将两个bug消灭了），直到我如下方式才又反应。

我将原本不想自己写得childView都写出来放在view文件夹下

childView都继承E，上面定义的创建E的属性基本不变，变的是将alias和columns写在childView中，这样我通过继承E得到的按钮又有响应了。代码大致如下：

创建子tab的controller

Ext.create（childView,{

store：childView，

id：childView

}）

view文件夹下的文件：

Ext.defined（‘A/B/C/D’,{

alias：‘widget。A/B/C/D‘，

columns：//略写，

}）
标点符号是不会错得，因为我是方便您看，所有才这样写得，以上的方法我的grid上的按钮是有反应了，但我动态生成的添加，修改页面上的提交按钮没反应了，我想它没反应的原因应该和上面的原因是一样的，但这是什么原因呢，请高手搭救一下我啦

假如看不懂我写什么，我的想法其实就是很简单我的目的就是希望一处代码能多处重用，但对于EXT4.0的MVC真不知怎么下手，求赐教啊

JS ExtJS Extjs4

2012年3月27日 14:13

moment52
5
0 0 1

1个答案按时间排序按投票排序

0 0

你要弄清楚Ext的继承机制，并且要注意父类上不要放非只读的对象(Object)属性，因为它们可能会被某个实例给修改，导致影响所有的实例。

不正确的方法：

var Child = Ext.extend(Base, {
   hidden : true,
   items : [new A(), new B()]
});

正确的方法：

var Child = Ext.extend(Base, {
   hidden : true,
   initComponent : function(){
      this.items = [new A(), new B()];
      Child.superclass.initComponent.apply(this, arguments);
   }
});

设计方面，你需要换位思考，以复用组件的角度来分析，它需要什么，应该提供什么接口或事件，知道得越少（低耦合），活得越久。

比如你说的一个Grid，上面有修改按钮，以我的想法：
它的列是固定的，这个是份内的事，所以要内部定好columns；
标题可能有变化，这个需要外界传入；
数据URL不确认，需要外界传入；
它有个修改按钮，但它不知道如何处理，所以应该提供一个事件，告诉别人这个按钮被点了，后面要干什么事情让上层去操心；

再对于Controller：
它应该创建一个Grid，并监听它的修改按钮点击事件；
当按钮点击时，它去创建一个Form去修改传出的记录；
……

MVC就是非常经典的低耦合设计，Model什么都不知道，View只盯着Model，Controller只盯着Model和View，只管修改Model。（就像Store、GridView、GridPanel）
在这种设计下，就算要替换一个View，也只用实现这些东西：
盯着Model，把它的数据正确显示出来；（监听Model事件，响应更新）
有操作时知会外面一声；（操作时发出事件）

2012年3月28日 15:59