Sencha Touch NestList 如何载入tree结构的数据

最新推荐文章于 2024-09-29 15:00:30 发布

最新推荐文章于 2024-09-29 15:00:30 发布 · 99 阅读

文章标签：

#json #ui

本文介绍如何利用Sencha技术栈构建一个具备动态加载功能的博客应用，通过加载JSON数据展示文章详情，实现无缝用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

Ext.application({ name: 'Sencha', phoneStartupScreen: 'resources/loading/Homescreen.jpg', tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg', launch: function() { //The whole app UI lives in this tab panel Ext.Viewport.add({ xtype: 'tabpanel', fullscreen: true, tabBarPosition: 'bottom', items: [ { xtype: 'nestedlist', title: 'Blog', iconCls: 'star', cls: 'blog', //displayField: 'title', //useTitleAsBackText: false, //onItemDisclosure: true, store: { type: 'tree', /* fields: ['title', 'link', 'author', 'contentSnippet', 'content', { name: 'leaf', defaultValue: true }], */ fields: ['id', 'name', 'description', 'items'], proxy: { type: 'ajax', url: 'resources/data/data.json', reader: { type: 'json', rootProperty: 'items' } } }, detailCard: { xtype: 'panel', scrollable: true, styleHtmlContent: true }, listeners: { itemtap: function(nestedList, list, index, element, post) { this.getDetailCard().setHtml(post.get('name')); } }, getTitleTextTpl: function() { return '<div>后退{name}dsfdsffsds</div>'; }, getItemTextTpl: function(node) { return '<div><strong>{name}:</strong> <em>{description}</em></div>'; } } }); } } ] } ] }); } });

原理为载入一个hasMany的json数据，list会自动的进行加载。