ext4 examples learning——Loading Nested Data(ext 案例学习1)

今天学习了下ext4的案例

一. ext4与css selector的结合

1.组件有个属性cls. 其功能在于在ext生成html对应的div class name里面添加一个别名。css里面.(class name)可以找寻相应DIV。

2.view 里面有个tpl, 比如： tpl: [
                '<div class="sidebar-title">Books</div>',
                '<tpl for=".">',
                    '<div class="product">{name}</div>',
                '</tpl>'
            ]

二. ext4 mvc

1. ext可以自己打包部署，只需要在html里面添加 <script type="text/javascript" src="all-classes.js"></script>

2. model book hasmany reviews and reivews belongsto book. 通过设置这两个属性，可以通过一次request获取json. 比如此例中：

 {
        id: 4,
        name: "Ext JS 3.0 Cookbook",
        author: "Jorge Ramon",
        detail: "“
        price: 43.23,
        image: "resources/images/books/extjs-30-cookbook.jpg",
        reviews: [
            {
                author: "Art",
                rating: 5,
                date: "November 23, 2009",
                title: "November 23, 2009",
                comment: ""
            }
        ]
    }

3. refs

 refs: [
        {ref: 'bookSideBar', selector: 'booksidebar'}
    ]

此处作用是生成一个getREFNAME方法，此方法会自动调用Ext.ComponentQuery方法。因此，getBookSideBar=booksidebar instance

4.selectionchange event可以自己写handler function 进行处理。

5.Ext.apply（object, opperitities）可以向组件新的属性。例如SideBar.js 里面的dock,selModel等属性。

6. '<tpl for=".">'表示自动填满数组，从root node里面读出name填满

 7. vbox 是竖直排列，用flex，hbox