开发EXTMVC框架前需要了解的基础知识整理

浏览数：45 / 时间：2015年06月09日

1.组件选择器

目的：了解如何选择Extjs中的组件，就跟学习jquery时一定会先要学习：$()选择器一样。

常用场景：

1.在controller中的control事件中用到

2.在普通的事件处理中也要用到

参考文章：

http://www.cnblogs.com/daxin/archive/2013/06/01/3112530.html

http://www.cnblogs.com/weilao/archive/2011/11/26/2264310.html

2.语句Ext.QuickTips.init();

说明：你在看代码时会看到很多代码中都会有一句：Ext.QuickTips.init();到底是什么作用呢？

参考文章：

http://www.cnblogs.com/jianglan/archive/2011/08/26/2154120.html

http://blog.csdn.net/itlwc/article/details/7886927

注意事项：

1.文档中描述的在html代码中使用ext:qtip，但是实际开发中，按照约定不应该出现html代码，所以在使用时注意。

2.真正使用的一般是给component设置属性tooltip,但是注意不是所有的组件都有tooltip。

3.如果给textfield增加tooltip事件，参考：ExtJS登陆页面涉及到的几个问题

3.EXT中require的理解说明：

实现了Extjs中js的动态加载，按需加载，保证界面的执行效率和运行效率

参考文章：http://blog.csdn.net/jenny_2011/article/details/7395233

注意：

虽然说这个特性是用来动态加载js类，但是一般来说我们还是要记在Extjs-all.js，那什么时候会用到这个东西呢？

在系统中加载自定义类，或者外部类的时候，一定要注意通过requires来加载：（mvc中可以通过views,controllers等属性来加载）。

4.EXt中 renderto，applyto，render的理解

1.renderto:是组件的config配置项。
将一个组件渲染到某个Dom对象中，常见的有： renderTo: Ext.getBody()。
在官方的API中提出，不要将此属性应用于container，因此container中子项的渲染是由容器布局管理器来控制的。另外注意：它会将组建渲染到dom中，比如渲染到一个div的内部。

2.applyto:某些文档中说是会将组建渲染到div下面，但是查官方文档没有查到此属性，demo例子也展示不出来不知道是不是已经删除了。

3.render方法:是组建的方法，使用方法和注意事项跟renderto的配置项相同。

5.EXTJS中alias,xtype,widge的理解

具体的可以参考：

http://www.cnblogs.com/sdjnzqr/p/3919087.html中的类系统介绍

http://www.cnblogs.com/sitemanager/archive/2012/11/28/2792225.html

http://www.cnblogs.com/timy/archive/2010/08/13/1799111.html

注意事项：

1.alias中的别名在命名时不能再有"."，也就是说最好是：widge.xxxxx;否则会造成在xtype可以引用的，但是在create的时候不起作用。

2.如果alias非常多的时候，可以使用package_package_viewname的方式来进行命名

6.callParent()方法

在任何继承父类方法的时候，都需要调用，典型的比如：initComponent

7.view的创建规范

视图中子组件（比如：items，buttons等）的定义都尽量放在initComponent中，注意最后要调用一下callParent();

参考：http://blog.csdn.net/oscar999/article/details/33743171

Ext.define(‘Telchina.view.user.List‘ ,{
    extend: ‘Ext.grid.Panel‘,
    alias: ‘widget.userlist‘,

    title: ‘All Users‘,
    store: ‘Users‘,
    
    initComponent: function() {
        this.columns = [
            {header: ‘Name‘,  dataIndex: ‘name‘,  flex: 1},
            {header: ‘Email‘, dataIndex: ‘email‘, flex: 1}
        ];

        this.callParent(arguments);
    }
});