20140722

1、获取元素

var myDiv = Ext.get('myDiv');

2、选择器获取多个元素

var ps = Ext.select('p');

select()方法返回的是Ext.CompositeElement对象，需用each方法遍历，ps.each(function(el) {el.highlight();});

3、为按钮添加单击事件响应

t.get('MyButton').on('click',click)

function click{...}

4、布局

Fit:在Fit布局中，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件，grid组件的大小会随着父容器的大小改变而改变。

Border:边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。

 

Accordion:手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面板都支持展开和折叠。

 

card: 这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。

 

Anchor：将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。

Absolute

Column：一般被称为列布局，这种布局的目的是为了创建一个多列的格式。其中每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。

 

 

 

 

 

5、类的创建使用

在目录ExtJSTEST\My\sample下创建Person.js,文件内代码如下

·         Ext.define('My.sample.Person', {

        name: 'Unknown',     

        constructor: function(name) {

            if (name) {

                this.name = name;

            }     

            return this;

       }, 

       eat: function(foodType) {

           alert(this.name + " is eating: " + foodType);

           return this;

       }

   });    

然后在ExtJSTEST目录下新建first.js，内容为

 var aaron = Ext.create('My.sample.Person', 'Aaron');

       aaron.eat("Salad");

可以创建一个Person类的实例、

6、ExtJS4.0的配置属性apply:

每个配置的属性自动生成一个apply方法.自动生成的setter方法内部在设置值之前调用apply方法.如果你要在设置值之前自定义自己的逻辑,那就重载apply方法.如果apply没有返回值,则setter不会设置值.

·         Ext.define('Window', {

      /** @readonly */

       isWindow: true,    

       config: {

           title: 'Title Here',    

       },    

       constructor: function(config) {

           this.initConfig(config);    

           return this;

       },

       applyTitle: function(title) {

           if (!Ext.isString(title) || title.length === 0) {

               alert('Error: Title must be a valid non-empty string');

           }

           else {

               return title;

           }

       }

   });

7、Static属性的设置和使用:

Ext.define('Computer', {

statics: {

    //静态变量instanceCount，值为0

        instanceCount: 0,

        //静态方法factory，作用为设置config中的属性brand

        factory: function(brand) {

            return new this({brand: brand});

        }

    },

    config: {

        brand: null

    },

    //类的构造方法

    constructor: function(config) {

        this.initConfig(config);

        // the 'self' property of an instance refers to its class

        this.self.instanceCount ++;

        return this;

    }

});

var dellComputer = Computer.factory('Dell');

var appleComputer = Computer.factory('Mac');

alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"

alert(Computer.instanceCount); // Alerts "2"

8、ViewPort

VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例。Viewport不需要再指定renderTo，而我们也看到Viewport确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改改。Viewport主要用于应用程序的主界面，可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport上常用的布局有fit、border等，当然在需要的时候其它布局也会常用。

Ext.application({

    name: 'HelloExt',

    launch: function() {

        Ext.create('Ext.container.Viewport',{

            layout: 'fit',

            items: [

                {

                    title: 'Hello Ext',

                    html : 'Hello! Welcome to Ext JS.'

                }

            ]

        });

    }

});

9、Ext中get()方法的使用

get方法用来得到一个Ext元素，也就是类型为Ext.Element的对象，Ext.Element类是Ext对DOM的封装，代表DOM的元素，可以为每一个DOM创建一个对应的Element对象，可以通过Element对象上的方法来实现对DOM指定的操作，比如用hide方法可以隐藏元素、initDD方法可以让指定的DOM具有拖放特性等。get方法其实是Ext.Element.get的简写形式。

get方法中只有一个参数，这个参数是混合参数，可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。看下面的示例代码：

Ext.onReady(function(){ 

  vare=new Ext.Element("hello");

 alert(Ext.get("hello"));

 alert(Ext.get(document.getElementById("hello"))); 

 alert(Ext.get(e)); 

}); 

  //Html页面中包含一个id为hello的div，代码如下： 

 <div id="hello" >aaa</div>

10、<scripttype="text/javascript" src="ClockByZhi.js"  ></script>

放在body前和body后的区别，假设HTML中为<div id=”hello” ></div>  如果在前，直接用hello.innerHTML会出错，在后就不会了，这取决于页面加载机制，如果说HTML还没加载完毕就通过ID获取其中的元素，是不可行的，需要等HTML加载完毕才行。