NestedList组件三：动态读取本地Json数据,

 

综合实例

 

1.动态显示Data数据

2.内部属性的用法

3.leafitemtap函数的用法

 

____________________________________________________________________

 

 

 

 

 

 

 

 

_______________________________________________________________________________

app.js

 

  
  
  var txtName=new Ext.form.Text();
  
  
  //注意这个里面的布局,分三部分
  var editPanel=Ext.create('Ext.form.Panel',{
   id:'editPanel',
   modal:true,//是否将组件创建为模式组件.模式组件:组件显示时用户不能对容器组件之外的其他组件进行访问,只能对容器内的子组件进行访问
   hideOnMaskTap:false,//用于指定当容器组件显示时单击该容器组件之外的范围时,是否将容器组件自动隐藏.false:不将容器组件隐藏.true:单击这个组件以外的区域时,隐藏该组件.当容器组件为模式组件时需要把hideOnMaskTap选项值设定为false,否则容器组件将变成非模式组件.
   centered:true,//可以对所有的可视组件使用该配置选项,用于指定是否将组件显示在包含它的父容器组件或浏览器中央.
   height:200,
   width:400,
   items:[
    {//标题使用的是toolbar,让标题居中
     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());//设置文本框中的值赋值给第一条记录的name值
        editPanel.hide();//隐藏form
       }
      },{
       xtype:'spacer'//定义按钮和按钮之间的空格 
      },{
       text:'取消',
       handler:function(){
        editPanel.hide();
       }
       
       
      }   
     ]
    },{//这部分自然在中间了
     xtype:'fieldset',
     items:[
      txtName   
     ]
    }
      
   ]    
  });
  
  //修改按钮
  var editButton=Ext.create('Ext.Button',{
   text:'修改',
   disabled:true,
   handler:function(){
    Ext.Viewport.add(editPanel);//将form渲染在容器中并显示出来
    editPanel.show();
    var activeList=nestedList.getActiveItem(),//获取当前活动项,值是一个list
    record=activeList.getSelection()[0];//选中的项
    txtName.setValue(record.get('name'));//将选中项的值赋给text文本框
   }
         
  });
  
  //工具条:主要用来显示"修改"按钮
  var toolbar=Ext.create('Ext.Toolbar',{
   docked:'top',
   layout:{
    type:'hbox',
    pack:'end'//对齐方式
   },
   items:[
    {
     xtype:'spacer' 
    },
    editButton
       
   ]
         
  });
  
  
  var nestedList=Ext.create('Ext.NestedList',{
   title:'常州兰陵小学',
   store:'list3',
   displayField:'name',//指定在nestedList组件的标题以及列表项中显示的项
   toolbar:toolbar,//定义工具条
   getItemTextTpl:function(){//指定数据仓库中数据的显示方式
    return '<tpl if="leaf == true">'+
      '{name}'+
      '</tpl>'+
      '<tpl if="leaf !=true">{name}/</tpl>'
   },
   listeners:{
    //单击数据仓库最底层数据时触发
    //nestedList:触发leafitemtap事件的nestedList组件
    //list:nestedList组件中当前被激活的子列表
    //index:被单击列表项的序号
    //item:被单击列表项所生成的元素
    //record:用户单击的记录
    //e:触发的事件
    leafitemtap:function(nestedList,list,index,item,record,e){
     editButton.setDisabled(false);
    } 
   }
  });
  ______________________________________________________________________________

 

Model

 

list3.js

 

// JavaScript Document
Ext.define('Oreilly.model.list3',{
 extend:'Ext.data.Model',
 config:{
  fields:['name'] 
 }
});

 

_____________________________________________________________________________________

 

Data

 

list3.txt

 

{
 "items":[
  {"name":"常州兰陵小学","items":[
   {"name":"一年级","items":[
    {"name":"一年级一班","items":[
     {"name":"学生一","leaf":true},
     {"name":"学生二","leaf":true},
     {"name":"学生三","leaf":true},
     {"name":"学生四","leaf":true}
    ]},
    {"name":"一年级二班","items":[
     {"name":"学生五","leaf":true},
     {"name":"学生六","leaf":true},
     {"name":"学生七","leaf":true}
    ]},
    {"name":"一年级三班","items":[
     {"name":"学生八","leaf":true},
     {"name":"学生九","leaf":true},
     {"name":"学生十","leaf":true}
    ]}
   ]},
   {"name":"二年级","items":[
    {"name":"二年级一班","items":[
     {"name":"学生十一","leaf":true},
     {"name":"学生十二","leaf":true},
     {"name":"学生十三","leaf":true}
    ]},
    {"name":"二年级二班","items":[
     {"name":"学生十四","leaf":true},
     {"name":"学生十五","leaf":true},
     {"name":"学生十六","leaf":true},
     {"name":"学生十七","leaf":true},
     {"name":"学生十八","leaf":true}
    ]},
    {"name":"二年级三班","items":[
     {"name":"学生十九","leaf":true},
     {"name":"学生二十","leaf":true},
     {"name":"学生二十一","leaf":true},
     {"name":"学生二十二","leaf":true}
    ]}
   ]}
  
  ]}
 
 ]
}

___________________________________________________________________________________

Store

 

list3.js

 

// JavaScript Document
Ext.define('Oreilly.store.list3',{
 extend:'Ext.data.TreeStore',
 config:{
  model:'Oreilly.model.list3',
  defaultRootProperty:'items',
  proxy:{
   type:'ajax',
   url:'../../sisley/data/list3.txt'
  }
   
 }
      
});

 

___________________________________________________________________________________