CFXIXI工作室首页
CF西西的博客 | sencha-touch2.0控件nestlist的简单用法

sencha-touch2.0控件nestlist的简单用法

29. 三月 2012

原文:http://docs.sencha.com/touch/2-0/#!/guide/first_app

 

通过nestlist可以自定义一个有标题到内容的一个组合布局如图

 

Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
                {
                    xtype: 'nestedlist',
                    title: 'Blog',
                    iconCls: 'star',
                    displayField: 'title',
					
					detailCard: {
						xtype: 'panel',
						scrollable: true,
						styleHtmlContent: true
					},

					listeners: {
						itemtap: function(nestedList, list, index, element, post) {
							this.getDetailCard().setHtml(post.get('content'));
						}
					},
					
					
					
                    store: {
                        type: 'tree',

                        fields: [
                            'title', 'link', 'author', 'contentSnippet', 'content',
                            {name: 'leaf', defaultValue: true}
                        ],

                        root: {
                            leaf: false
                        },

                        proxy: {
                            type: 'jsonp',
                            url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
                            reader: {
                                type: 'json',
                                rootProperty: 'responseData.feed.entries'
                            }
                        }
                    }
                }
            ]
        });

 

 

点击后

sencha touch 2