巧用好官方API学好EXTJS

学习一样新技能，方法很多每个人爱好不同，有的喜欢视频，有的喜欢文字，有的喜欢代码示例；能力强点直接看英文文档，底子薄点等人翻译。
这里说说如何利用官方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 试试吧！！！