0

var myDiv1 = Ext.get( 'div1' ); //根据ID获取DOM元素
myDiv1.createChild( 'Child from a string' ); //创建要给子节点
myDiv1.createChild( '<div>Element from a string</div>' ); //创建一个子元素
myDiv1.createChild( { //使用对象配置方式添加子元素
    tag : 'div',
    html : 'Child from a config object'
} );
//添加多个子代元素
myDiv1.createChild( {
    tag : 'div',
    id : 'nestedDiv',
    style : 'border: 1px dashed; padding: 5px;',
    children : {
        tag : 'div',
        html : '...a nested div',
        style : 'color: #EE0000; border: 1px solid'
    }
} );
//在最前面插入子元素
myDiv1.insertFirst( {
    tag : 'div',
    html : 'Child inserted as node 0 of myDiv1'
} );
//在某个子元素之前插入
myDiv1.createChild( {
    tag : 'div',
    id : 'removeMeLater',
    html : 'Child inserted as node 2 of myDiv1'
}, myDiv1.dom.childNodes[3] );
//删除一个元素
var myDiv1 = Ext.get( 'div1' );
myDiv1.remove();

var me = currentBorderContainer;
//根据Region在border布局中导航
var northChild = me.down( '*[region=north]' );
//遍历所有子组件
Ext.each( me.items.items, function( cmp ) {}); 

使用模板可以很方便的创建复杂的DOM结构。模板中的占位符使用花括号{}包围，可以应用一个上下文对象以替换模板生成最终结果。

XTemplate支持循环、选择等基础程序结构，支持任意表达式的计算。可用于表达式的内置变量包括：

1. out：模板结果添加到的输出数组对象
2. values：当前上下文对象
3. parent：使用子模板时，代表父模板的上下文对象
4. xindex：在使用循环结构时，代表以1为基准的索引
5. xcount：在使用循环结构时，代表被迭代数组的元素个数
6. this：当前模板对象

位于{[...]}中的代码以当前模板为this执行，其结果插入到模板填充结果中。

位于{%...%}中的代码以当前模板为this执行，其结果不插入到模板填充结果中。

下面是模板用法示例：

//简单的模板用法
var myTpl = Ext.create('Ext.Template' , "<div>Hello {0}.</div>");
myTpl.append(document.body, ['Marjan']);  //替换模板并作为body的子元素
myTpl.append(document.body, ['Michael']);
myTpl.append(document.body, ['Sebastian']);

var myTpl = Ext.create('Ext.Template', [
'<div style="background-color: {color}; margin: 10px;">',
'<b> Name :</b> {name}<br />',
'<b> Age :</b> {age}<br />',
'<b> DOB :</b> {dob}<br />',
'</div>'
]);
myTpl.compile(); //编译模板可以获取更快的速度
//使用多个变量替换占位符，并作为body的子元素
myTpl.append( document.body, {
    color : "#E9E9FF",
    name : 'John Smith',
    age : 20,
    dob : '10/20/89'
} );
myTpl.append( document.body, {
    color : "#FFE9E9",
    name : 'Naomi White',
    age : 25,
    dob : '03/17/84'
} );

var tplData = [
    {
        color : "#FFE9E9",
        name : 'Naomi White',
        age : 25,
        dob : '03/17/84',
        cars : [
            'Jetta', 'Camry', 'S2000'
        ]
    }, {
        color : "#E9E9FF",
        name : 'John Smith',
        age : 20,
        dob : '10/20/89',
        cars : [
            'Civic', 'Accord', 'Camry'
        ]
    }
];
//XTemplate使用在循环场景使用：
var myTpl = Ext.create( 'Ext.XTemplate', [
    //数组形式的多个字符串
    '<tpl for=".">', //点号表示遍历的变量是上下文本身
    '<div style="background-color: {color}; margin: 10px;">',
    '<b> Name :</b> {name}<br />',
    '<b> Age :</b> {age}<br />',
    '<b> DOB :</b> {dob}<br />',
    '</div>',
    '</tpl>'
] );
myTpl.compile();
myTpl.append( document.body, tplData ); //添加多个DIV
//复杂的例子：
var myTpl = Ext.create( 'Ext.XTemplate', [
    '<tpl for=".">',      //对数据中每个元素进行遍历
    '<div style="background-color: {color}; margin: 10px;">',
    '<b> Name :</b> {name}<br />',
    '<b> Age :</b> {age}<br />',
    '<b> DOB :</b> {dob}<br />',
    '<b> Cars : </b>',
    '<tpl for="cars">',   //对每个元素的cars属性进行遍历         
    '{.}',
    '<tpl if="this.isCamry(values)">',  //条件语句：表达式不要花括号
    '<b> (same car)</b>',
    '</tpl>',
    '{[ (xindex < xcount) ? ", " : "" ]}',  //需要花括号：xindex为从1开始的当前循环索引，xcount为总数
    '</tpl>',
    '<br />',
    '</div>',
    '</tpl>',
    {
        //模板配置项
        disableFormats: true,
        //模板成员函数定义
        isCamry : function( car )
        {
            return car === 'Camry';
        }
    }
] );
myTpl.compile();
myTpl.append( document.body, tplData );

ExtJS支持针对任何元素的键盘导航：

me.keyNav = new Ext.util.KeyNav( {
    target: me.getEl(),  // 目标元素
    up: function ( e ) {
        me.doSomething();
    },
    down: function ( e ) {
        me..doSomething();
    },
    enter: me..doSomething,
    esc: {
        fn: me..doSomething,
        defaultEventAction: false
    },
    scope: me
} );

注意：

1. 键盘导航对象需要随着组件一起销毁：me.keyNav.destroy() 
2. 对于div之类的元素，默认是不支持键盘导航的，除非添加tabindex属性：

   me.getEl().set( { 'tabindex': 1 } )

   这个特性在Chrome测试过

3.  要激活键盘导航时，目标元素必须获得焦点：this.getEl().focus() 

Ext.addBehaviors( {
    //为id=foo的元素内部的所有a元素添加click事件监听
    '#foo a@click' : function( e, t )
    {},

    //为多个CSS选择器添加mouseover事件
    '#foo a, #bar span.some-class@mouseover' : function()
    {}
} );

function multiply( num1, num2 )
{
    console.log( num1 * num2 );
}
/**
 * Function fn 被绑定的函数
 * [Object scope]  this的指向
 * [Array args] 覆写、插入调用原始函数的参数数组
 * [Boolean/Number appendArgs] 
 *     如果为true，则是在尾部附加而非覆写参数；数字表示插入的索引
 */
var multiply100 = Ext.bind( multiply, this, [
    100
], 0 );
multiply100( 8 );

var multiply100_8 = Ext.bind( multiply, this, [
    100, 8
] );
multiply100_8();

this.initialBox = Ext.copyTo({}, this.initialConfig, 'x,y,width,height');

var countries = [
    'Vietnam', 'Singapore', 'United States', 'Russia'
];
Ext.Array.each( countries, function( name, index, countriesItSelf )
{
    console.log( name );
} );

var panel = new Ext.Panel( {} );
Ext.override( panel, {
    initComponent : function()
    {
        this.callParent();
    }
} );

var originalFunction = function()
{
    alert( Ext.Array.from( arguments ).join( ' ' ) );
};

var callback = Ext.Function.pass( originalFunction, [
    'Hello', 'World'
] );

callback(); //显示：Hello World
callback( 'by Me' ); //显示：Hello World by Me

Ext.Class类似于Java的java.lang.Class类，但是其只专注于如何生成类对象，关注于类的结构性特征。

Ext.define( 'Logger', {
    singleton : true,
    log : function( msg )
    {
        console.log( msg );
    }
} );
Logger.log( 'Hello' );

Ext.Base相当于Java的java.lang.Object，是所有类型的基类；其提供的静态方法则类似java.lang.Class的功能

constructor: function(config) {
    this.initConfig(config);
}

Ext.define( 'Ext.ux.Container', {
    extend : 'Ext.container.Container',
    alias : 'widget.uxcontainer',
    hideBar : true,
    items : {},//不要在这里配置items的内容
    initComponent : function(){
        var me = this;
        me.callParent(arguments);
        //如果items的内容由当前容器类决定，则可以在调用ExtJS默认initComp方法后，初始化items
        var items = {
            xtype : 'container',
            hidden : me.hideBar
        };
        me.add(items);
    }
});