首页 > 代码库 > Extjs 知识点概况

Extjs 知识点概况

1.获取id

  • Ext.get("elid") --每调用一次创建新的实例
  • Ext.fly("elid") --只创建一次实例
  • Ext.getDom("elid") --htmlElement
  • 获取dom ,Ext.fly().dom

2.css 样式操作

  • Ext.fly("elid").addClass("elcss") (对应的removeClass,hasClass,replaceClass)
  • Ext.fly("elid").toggleClass("elcss") ,样式开关
  • getStyle:Ext.fly("elid").getStyle("color")
  • setStyle:Ext.fly("elid").setStyle({color:"red","font-weight":"bold"}) 

3.DOM 查询与遍历

  • is(selector):Ext.get("elid").is("div.elclass") 
  • findParentNode(selector):从当前节点开始查找与选择器匹配的父节点,up(selector)是其缩写,不过返回的是Ext.element
  • select:查找当前节点的子节点 ,Ext.fly("elid").select("div"),可以使用each 访问
  • query(selector):a.query("input.ipt") // 返回数组
  • child:Ext.fly("elid").child("div") ,Ext.fly("elid").child("div",true) //返回原生的
  • ....down,parent,next,prev,first,last

4.Dom 操作

Ext.DomHelper 是一个用来生成HTML 片段的类,它主要通过定义一个JSON 格式的数据生成HTML片段

<ul id="itemList" ,class="list"><li>1</li><li>1</li><li>1</li></ul>var list={id: "itemList" ,
tag:"ul",
cls:"list",
children:[
{tag:‘li‘,html:‘1‘},
{tag:‘li‘,html:‘2‘},
{tag:‘li‘,html:‘2‘}
]
}

var list={id: "itemList" ,
tag:"ul",
cls:"list",
html:"
<li>1</li><li>1</li><li>1</li>"
}
var a={
id:"link"
tag:"a",
href:"url",
html:"链接"
}
  •  追加子项:appendChild
var el=Ext.get("elid1");Ext.fly("eld").appendChild("elid1") //通过id追加Ext.fly("eld").appendChild(el) //通过 Ext.Element 追加 Ext.fly("eld").appendChild(el.dom)  //通过 CompositeElement追加Ext.fly("eld").appendChild(Ext.select(“div”))  

 

其他

  • 返回类型: Ext.get().$classname, 如果没有此属性说明返回的是 js 原生对象
  • 返回类型:检查返回类型可以使用Ext.typeOf()--比原生的多几个

Extjs 知识点概况