zoukankan      html  css  js  c++  java
  • Sencha Touch NestList 如何载入tree结构的数据

    代码:

     

    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会自动的进行加载。


  • 相关阅读:
    理解java的三大特性之封装
    特征学习
    Java类编译、加载、和执行
    榜样
    组合学习模型
    python的re模块详解
    python的argpare和click模块详解
    vue的组件
    vue的表单输入绑定
    vue的事件处理梳理
  • 原文地址:https://www.cnblogs.com/fyq891014/p/4188872.html
Copyright © 2011-2022 走看看