Extjs学习笔记--（二）

1.配置实用Extjs

    <link href="Extjs/resources/css/ext-all.css" rel="stylesheet" />
    <script src="Extjs/bootstrap.js"></script>

注：bootstrap.js的作用是用于 自动加载ext-all-debug.js或者ext-all.js 如果实用localhost或者ip的话，将启动ext-all-debug，否则启动ext-all.js


2,动态加载Extjs类库

        //开启自动加载
        Ext.Loader.setConfig({ enable: true });
        Ext.Loader.setPath("要加载的路径文件");
        Ext.required(['Ext.grid.*',
         //需要加载的类库
        ])
        Ext.onReady(function () {
            //code
        });

 

HelloWorld

  <script type="text/javascript">
        Ext.onReady(function () {
           new Ext.Viewport({
                layout: 'fit',
                items: [{
                    xtype: "panel",
                    title: "welcome to this website",
                    html:"<h1>hello world</h1>"
                     }]
            })
        })
    </script>

注：Ext.onReady方法是在Dom加载后才执行的，而onload则是在所有资源加载完才执行。如果存在多个 onReady可以保证同时执行

Ext.BLANK_IMAGE_URL 只是一个占位符，目的是显示背景图片
目的：
一：在更换主题时，如果图片是固定的，有两种方法更新图片：1，覆盖旧图片，2，重新定义图片路径
二：如果实用div或者span代替image标记，那么在这两个标记外增加链接的时候，因为标记内的内容为空，所以链接会出现问题

关于字体：
在标题中指定的字体 大小都是11px，如果要更改字体大小，那么在ext-all.css中将11px替换为12px就行了

Xtype
为了简化书写而存在的，省略了定义一个变量然后指向一个组件

new 和Ext.Create都可以用来创建组件
new classname([config])
Ext.Create(classname,[config])

Ext.widget的作用是使用别名来创建对象 和 Ext.Create一样只是classname使用的是对象的别名
Ext.createwidget是Ext.widget的别名  他使用的是ClassManager对象的instantiateByAlias方法创建对象



使用Ext.ns或者Ext.namespace
语法：Ext.namespace(namespace1,namespace2....)
Ext.ns是Ext.namespace的简写形式
javascript不建议使用全局变量，建议将该变量保存在局部变量中，使用局部变量来进行操作，以避免多次搜索以降低性能
建议在Ext对象下创建命名空间，如：Ext.ns（"Ext.app.data","Ext.app.ux"）


使用Ext.define定义新类
语法：Ext.define(classname,properties,callback)
classname:要创建的类名
properties：定义类的属性
callback：类创建完后要执行的方法

常用属性集对象
extend 　　　　　　　 　要继承的类
alternateClassName　　 类的备用名
alias　　　　　　　　　　类的别名
requires  　　　　　　 需要使用到的类名数组，在动态加载时会根据属性下载类       
constructor 　　　　　 构造方法，一般用来初始化类的配置项和调用父类的方法
mixins   　　　　　　 为类增加特殊的功能
config 　　　　　　　　定义类的配置项
statics　　　　　　　　定义静态方法，可以使用类名.方法名进行直接调用

            Ext.define("Bin",binary:function(v) {
                return v.toString(2);
            })

                    Ext.define("calculate", {
                            mixins: {
                                Hex:"Hex",
                                Bin:"Bin",
                                Oct:"Oct"
                            },
                            convert:function(v,t) {
                                switch (t) {
                                    case 2:
                                        return this.bin(2);
                                    case 8:
                                        return this.oct(8);
                                    case 16 :
                                        return this.hex(16);
                                default:
                                }
                            }
                        }                    
                    );
                    var cal = new calculate();
                    alert(cal.convert(16,2)) ;
                    alert(cal.convert(16,16)) ;
                    alert(cal.convert(16,8));

Demo