学习一样新技能,方法很多每个人爱好不同,有的喜欢视频,有的喜欢文字,有的喜欢代码示例;能力强点直接看英文文档,底子薄点等人翻译。
这里说说如何利用官方API学习ExtJs4,顺便说一句官方example很多优秀例子值得学习。
举例地址:http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.Panel
简单吧!
去http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.Panel 试试吧!!!
这里说说如何利用官方API学习ExtJs4,顺便说一句官方example很多优秀例子值得学习。
举例地址:http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.Panel
这里TreePanel组件为例:
Code Edit Live Preview
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
细心的人可能发文档例子代码上方 Code Editor 和 Live Preview 按钮。Code Editor 按下时候,代码框中代码是可以编辑的,添加如下代码(listeners):
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
listeners:{
itemclick:function(view,record,item,index,e,eOpts){
alert(record.get("text"));
}
},
renderTo: Ext.getBody()
});
添加完成后,如果没有语法错误点击 Live Preview 能够立即预览效果。Code Edit状态下可以添加代码,也可以用“//”注释掉某行代码,可以很好帮助我们理解某个属性含义。
简单吧!
去http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.Panel 试试吧!!!