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

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);
    }
});

8.vtype自定义语法注意事项

参考:

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.VTypes

http://www.cnblogs.com/buzz/archive/2009/03/31/1425794.html

原文地址:https://www.cnblogs.com/sdjnzqr/p/3937707.html