开始ExtJS之旅:3.ExtJS中的基本概念

3  ExtJS中的基本概念

    在第1章中提到过，ExtJS和传统的Web 开发大不相同。特别是在界面开发上，不用再纠缠在Html和CSS中，而与Java Swing或者Delphi的开发方式非常相同。这样在ExtJS的开发中会有一些在传统 Web 开发中没有的概念，比如面板（Panel）、布局（Layout）、组件（Component）等等。本节对这些概念加以说明，为后续的学习打好概念上的基础。
    面板Panel：面板是一块区域，程序员可以在之上放置各种组件，从而形成用户界面。说得形象一点，面板就是空白的画板，程序员是画家，最终画板上会出现什么，决定于画家。当然作为面板来说，最终展现在面的不是水墨国画，而是各种ExtJS的组件。面板的出现解决了窗口（对于 Web 应用来说就是一个浏览器窗口）不方便直接分拆的问题。利用面板就能将窗口分割成多个部分，这样对窗口来说，它只需要管理好面板在窗口上的展现就可以了，不用再关心面板各种组件的展现了，因为这部分工作由面板自己来管理。很显然，面板的引入将复杂的问题进行了隔离，从而对软件开发的界面产生了深远的影响，特别是对软件界面能够跟随屏幕大小自适应调整提供了非常好的解决方案。
    布局 Layout：布局是指组件在一个容器中的摆放方式。在讲到布局时肯定有一个容器，这是用来摆放的空间；同时也有需要摆放的组件，它是用来操作的实体。当容器指定了特定布局时，往容器中放置的组件，就会按规定的布局自动调整，这个过程不需要程序员的参与，从而能得到更加规范的用户界面。在 ExtJS 的布局与JavaSwing的布局基本一致，为实现丰富的用户界面提供了保证。
    组件 Component：组件是指已经预先实现好特定功能，并能够被重用到编程中的代码段以及相关资源。在ExtJS中，组件可以简单到一个按钮，也可以复杂到数据表格。组件将强大的功能带给普通的软件开发者，大大的加快了软件的开发速度，同时也能保证更高的质量。除了开官方提供的精美好用的组件外，还有许多功能各异的第三方组件，并且还可以开发自己的特有组件。可以说ExtJS的编程就是组件编程，各种组件巧妙堆积在一起就成为了最后界面异常优美，功能强大的应用软件。
    渲染 Render：渲染是指含有 ExtJS 程序的页面下载完毕后在浏览器中完全展现出来的一个过程。作为普通的Html页面也有渲染的过程，即Html与CSS代码开始装载进浏览器到整个页面根据Html与CSS规则完全显示出来的过程。但是在ExtJS中有完全不同于Html与CSS渲染过程的地方，虽然ExtJS的界面最终也是以Html与CSS来展现，但是这些Html与CSS不是从服务器下载而来，而完全是由ExtJS的引擎动态生成而来。所以ExtJS的渲染实际上是一个动态生成的过程，而非静态载入的过程。理解这点在学习ExtJS编程的过程中将会有重大的指导意义。
    窗口Window：ExtJS中的窗口并不是一个真正的Windows窗口，在本质上只是一个层利用CSS进行格式化，在外观和行为上都比较像真正的Windows窗口的显示区域。说到显示区域就应该想到面板，实际上在ExtJS的继承层次上，窗口组件就是继承于面板组件。明白了ExtJS中窗口的本质就是一个层的话，那么就一定要知道它与真正 Windows 窗口的不一样，比如要将 ExtJS 窗口拖出到浏览器窗口之外等等想法显然就是不能实现的。只要知道到了这关键的一点，在做ExtJS中的窗口编程时将会带来莫大的帮助。
    对话框Dialog：对话框也是在程序开发中经常用到的功能。一般有普通对话框、选择对话框、输入对话框以及一些特别的自定义对话框。在ExtJS中也提供了非常漂亮并且能够自定义的对话框，像ExtJS中的窗口一样，这些对话框的本质也是利用CSS 进行格式化的结果。所以在使用这些对话框时，要注意这些对话框与真正Windows中对话框的异同，灵活加以运用。