日期:2014-05-16  浏览次数:20315 次

extJs 2.0学习笔记(Ext.Panel篇一)

?老实不客气的说:没有Panel,就没有extjs的盛名。那些最常见的UI组件都是继承自它。暴爽的东西啊。我就在想,这么好的东西怎么会出现得这么晚呢?
  在这一篇中,将详细讲一讲Ext.Panel的方方面面。

  现在遇到了一些问题:

  一、显示的问题

  事实上,这个问题是所有组件的问题,凡是从Ext.Component继承的类都面临这个问题。

  例如,我写了一行这样的代码,但是没有任何结果:

  var panel=new Ext.Panel({width:300,height:300,title:'标题栏'});

  这是什么原因呢?

  if(this.applyTo){
    this.applyToMarkup(this.applyTo);
    delete this.applyTo;
  }else if(this.renderTo){
    this.render(this.renderTo);
    delete this.renderTo;
  }

  这几行代码是写在Ext.Component的构造函数中的。它标示如果applyTo、renderTo有值,就会在对象创建的时候直接呈现,如果这两值都没有,那就只能手工调用render函数了。

  然而这有一个问题,applyTo与renderTo倒底有什么区别,它们取值类型可以是哪些呢?看代码。

  applyTo的情况依赖于this.applyToMarkup来实现呈现。找到它的代码:

  applyToMarkup : function(el){
   this.allowDomMove = false;
   this.el = Ext.get(el);
   this.render(this.el.dom.parentNode);
  }

  而renderTo的情况是直接依赖于this.render(this.renderTo)的。这两者的差别很明显了,但是,这个问题到目前还不能说清楚,我发现,Ext.Panel最后生成的代码如下:

  <div id="panel2" class="x-panel" style="width: 300px;">
    <div id="ext-gen14" class="x-panel-header x-unselectable" style="-moz-user-select: none; cursor: move;">
      <span id="ext-gen18" class="x-panel-header-text">这是标题栏</span>
    </div>
    <div id="ext-gen15" class="x-panel-bwrap">
      <div id="ext-gen16" class="x-panel-body" style="width: 298px; height: 273px;">这是面板的内容!!!</div>
    </div>
  </div>

  由上代码可知,panel的代码总是外面一个容器:x-panel,然后里面几个,这儿是:x-panel-header、x-panel-bwrap。现在可以说一说renderTo与appplyTo的区别了。

  renderTo与applyTo的传入参数的数据类型与Ext.get的参数类型一样,可是dom、string、Element。它们最大的不同在于容器,这个容器不是指x-panel所对应的元素,而是指x-panel所对应元素的父元素。由源代码可知:

  当为applyTo时,它调用render(this.el.dom.parentNode);可见,x-panel的容器为applyTo对应元素的父元素。也即是applyTo事实上就是x-panel。而renderTo时,renderTo所对应元素是x-panel的容器。如何验证这个问题呢?请到FireBug中看一看就晓得了。

  上面说了一大通,我再总结一下:

  renderTo:对应x-panel所在div的父元素;

  applyTo:对应x-panel所在div本身。

  二、Ext.Component的几个极其重要的成员

  component.el:在panel中相当于x-panel所对应的div。它表示Component所对应的最外层html元素。

  component.id:在panel中相当于x-panel所对应的div的id,如果x-panel所在div没有id,那么就自己分配一个。

  component.container:它在panel中相当于x-panel所在div的父元素。即x-panel的容器。也即是:component的容器。

  如果没有分清楚这个问题,那么下面代码会产生问题:

  var p=new Ext.Panel({title:&apos;my title&apos;,width:300,height:300,renderTo:&apos;panel1&apos;});

  console.info(Ext.getCmp(&apos;panel1&apos;));

  结果如何呢?undefined!!

  为什么是这样呢,因为,getCmp用的id即是component.id。而这个id对应的是x-panel所在元素的id或者自由分配的。而renderTo对应的元素不是x-panel。而是x-panel的父亲。这个问题极容易搞错。

  这儿的两个问题其实都是Ext.Component那里的。下一篇正式研究一下Ext.Panel的API了。


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/huoyanxueren/archive/2008/07/16/2662824.aspx