Extjs核心操作方法详解

/**  (一)  element操作
 *  1.通过Ext.get()获取hmtl element 节点的Ext.Element实例会创建一个实例
 *  语法：var el=Ext.get(el); el 可以使节点id、dom节点或已经存在的Element;
 *   2.Ext.fly()不创建实例，只是对html element执行一次性操作，只是利用全局共享的实例进行操作
 *   语法： Ext.fly(el).getHeight(); el可以为节点、dom节点
 *  注意：如果要将实例赋值给一个变量，然后在后续中引用，一定要用Ext.get()
 * 3.Ext.getDom(el) 返回htmlelement对象 el可以为节点id、dom节点或已经存在的element
 *   eg: var el=Ext.get('h1');
 *        el.dom.innerHTML='test';
 *       
 *  （二）css 样式操作
 *   addClass:为元素增加样式类
 *   1.只增加一个样式类 Ext.fly('elId').addClass("elCss");
 *   2.增加多个样式类 Ext.fly('elId').addClass(['elcss1','elcss2',.,. 'elcssN']);
 *   3.removeClass:移除一个或多个样式类
 *   4.toggleClass:样式类开关（存在该样式类则移除，不存在则增加）
 *   eg:Ext.fly('elId').toggleClass('elCss');
 *   5.hasClass:检查element是否已经应用指定的样式类
 *   eg: if(Ext.fly('elId').hasClass('elCss')){
 *   已经应用类elCss时执行
 *   }
 *   6.replaceClss :替换一个样式类，
 *    eg:Ext.fly('elId').replaceClss('elCss1','elCss2');//使用样式elCss2替换elCss1
 *   7.getStyle:返回木个样式属性
 *   eg: var color=Ext.fly('elId').getStyle('color');
 *   8.setStyle:设置木个样式属性
 *    设置一个属性
 *    Ext.fly('elId').setStyle('color','#FFFFFF');
 *    设置多个属性
 *    Ext.fly('elId').setStyle({
 *    color:'red',
 *    background:'yellow',
 *    font-weight:'bold'
 *    });
 *   
 *    (三)dom操作
 *    Ext.DomHelper:用于生成HTML片段的类，主要通过定义一JSON格式的数据生成HTML片段
 *    数据结构主要包括：
 *              tag:元素标签 eg:div、span
 *              children:由元素的子元素组成的数组，可通过该属性不断的增加子元素;
 *              cls:元素的css类名
 *              html:元素的innerHTML属性
 *    eg:生成一下html片段：
 *    <ul id='itemList' clss='list'>
 *    <li>1</li>
 *    <li>2</li>
 *    <li>3</li>
 *    </ul>
 *    其数据定义如下：
 *    var list={
 *    id:'itemList',
 *    tag:'ul',
 *    cls:'list',
 *    children:[
 *    {tag:'li',html:'1'},
 *    {tag:'li',html:'2'},
 *    {tag:'li',html:'3'}
 *    ]
 *    }
 *   
 *    1.appendChild:在当前节点里追加子节点
 *    eg: Ext.fly('elId').appendChild('elId1');//通过id追加
 *   
 *    var el=Ext.get('elId1');
 *    Ext.fly('elId').appendChild(el);//通过元素追加
 *    Ext.fly('elId').appendChild(['elId1','elId2'])//通过数组追加
 *    Ext.fly('elId').appendChild(el.dom);//通过html 元素追加
 *   
 *    Ext.fly('elId').appendChild(Ext.select('div'));//通过compositeElement追加
 *   
 *   
 *   Ext.util.JSON.decode(response.responseText);//返回json格式的数据使用decode方法
 *   
 */
Ext.onReady(function(){
 //element操作
 var el=Ext.get('h1');         
 el.dom.innerHTML="DOM正确使用";
 //var e2=Ext.fly('h1').getHeight();
  //css 样式操作
 /*var color=Ext.fly('h1').getStyle('color');
 document.write(color);*/
 //Ext.fly('h1').setStyle('color','#FFFFFF')
 
})