Sencha Touch NestedList

/**
 * @author Changweihua
 */
Ext.application({
    name : 'Chapter11',
    launch : function() {
        var data = {
            name:'丹阳珥陵高级中学',
            items:[{
                name:'高一年级',
                items:[{
                    name:'高一(一)班',
                    items:[{
                        name:'James',
                        leaf:true
                    },{
                        name:'Wade',
                        leaf:true
                    },{
                        name:'Bosh',
                        leaf:true
                    }]
                },{
                    name:'高一(二)班',
                    items:[{
                        name:'Durant',
                        leaf:true
                    },{
                        name:'WestBrook',
                        leaf:true
                    },{
                        name:'Martin',
                        leaf:true
                    }]
                },{
                    name:'高一(三)班',
                    items:[{
                        name:'Greffen',
                        leaf:true
                    },{
                        name:'Jordan',
                        leaf:true
                    },{
                        name:'Paul',
                        leaf:true
                    }]
                }] 
            },{
                name:'高二年级',
                items:[{
                    name:'高二(一)班',
                    items:[{
                        name:'David',
                        leaf:true
                    },{
                        name:'Curry',
                        leaf:true
                    },{
                        name:'Landary',
                        leaf:true
                    }]
                },{
                    name:'高二(二)班',
                    items:[{
                        name:'Anthony',
                        leaf:true
                    },{
                        name:'JR',
                        leaf:true
                    },{
                        name:'Kid',
                        leaf:true
                    }]
                },{
                    name:'高二(三)班',
                    items:[{
                        name:'Allen',
                        leaf:true
                    },{
                        name:'Anderson',
                        leaf:true
                    },{
                        name:'Cole',
                        leaf:true
                    }]
                }] 
            },{
                name:'高三年级',
                items:[{
                    name:'高三(一)班',
                    items:[{
                        name:'Harden',
                        leaf:true
                    }]
                },{
                    name:'高三(二)班',
                    leaf:true
                }] 
            }] 
        };
           
        Ext.define('ListItem', {
            extend:'Ext.data.Model',
            config:{
                fields:[{name:'name', type:'string'}]
            }
        });
           
        var store = Ext.create('Ext.data.TreeStore', {
            model:'ListItem',
            defaultRootProperty:'items',
            root:data
        });
           
        var txtName = new Ext.form.Text();
           
        var editPanel = Ext.create('Ext.form.Panel', {
            id:'editPanel',
            modal:true,
            hideOnMaskTap:false,
            centered:true,
            height:200,
            width:300,
            items:[{
                docked:'top',
                xtype:'toolbar',
                title:'修改学生姓名'
            },{
                docked:'bottom',
                xtype:'toolbar',
                items:[{
                    text:'确定',
                    handler:function(){
                        var activeList = nestedList.getActiveItem();
                        record = activeList.getSelection()[0];
                        record.set('name', txtName.getValue());
                        editPanel.hide();
                    }
                },{
                    xtype:'spacer'
                },{
                    text:'取消',
                    handler:function(){
                        editPanel.hide();
                    }
                }]
            },{
                xtype:'fieldset',
                items:[txtName]
            }]
        });
           
        var toolbar = Ext.create('Ext.Toolbar', {
            docked:'top',
            layout:{
                type:'hbox',
                pack:'end'
            },
            items:[{
                xtype:'spacer'
            },{
                xtype:'button',
                text:'修改',
                disabled:true,
                id:'edit',
                handler:function(){
                    Ext.Viewport.add(editPanel);
                    editPanel.show();
                    var activeList = nestedList.getActiveItem();
                    record = activeList.getSelection()[0];
                    txtName.setValue(record.get('name'));
                }
            }]
        });
           
        var nestedList = Ext.create('Ext.NestedList', {
            title:'丹阳珥陵高级中学',
            store:store,
            displayField:'name',
            toolbar:toolbar,
            getItemTextTpl:function(){
                return  '<tpl if="leaf == true">' +
                        '{name}' +
                        '</tpl>' +
                        '<tpl if="leaf != true">{name} /</tpl>';
            },
            listeners:{
                leafitemtap:function(nestedList, list, index, item){
                   toolbar.down('#edit').setDisabled(false);
                }
            }
        });
        Ext.Viewport.add(nestedList);
           
    }
});


知识共享许可协议
《Sencha Touch NestedList》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     155.45ms