NestedList组件二：横向显示nestedList中detailCard的数据,

 

将整个页面分为左右两部分：左边nestedList组件，右边是detailCard容器

 

 

 

 

___________________________________________________________________________________

 

 

//nestedList组件:是一个列表组件,专门用来显示具有阶层关系的数据集合.
  //nestedList组件使用Ext.data.TreeStore数据仓库来装载这种具有阶层关系的数据集合,在使用Ext.data.TreeStore数据仓库的时候,必须制定其阅读器的root配置选项的选项值,以便让阅读器能够读取到阶层数据所构成的树形结构上的每一个节点(注意:本地数据是用root,服务器上的数据用url)
  
  //nestedList组件:使用Ext.dataview.NestedList类定义nestedList组件,xtype是nextedlist,直接继承自Ext.Contrainer类
   
   //1.nestedList简单示例,读取本地数据
   //2.横向显示nestedList中detailCard的数据,
   
   var data1=
   {
    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}
      ]}
     ]}
   
   ]}
   
   
   var store1=Ext.create('Ext.data.TreeStore',{
    model:'Oreilly.model.list3',
    defaultRootProperty:'items',//
    root:data1
   });
   
   var detailContainer=Ext.create('Ext.Container',{
    
     layout:'card',
     flex:1
   });
   
   var nestedList1=Ext.create('Ext.NestedList',{
    title:'常州兰陵小学',//nestedList的标题
    store:store1,//数据仓库,必须有
    displayField:'name',//显示标题,以及列表中显示的字段名,此项必须有
    detailContainer:detailContainer,
    detailCard:true,
    
    listeners:{
     leafitemtap:function(nestedList,list,index,target,record,e){//当单击的数据位数据仓库最底层数据时,触发该事件
      var detailCard=nestedList.getDetailCard();
      detailCard.setHtml('我选择了:'+record.get('name'));
     }
    },
    flex:1
           
   });
   
   
    Ext.Viewport.add({
    layout:'hbox',
    items:[
      nestedList1,
      detailContainer
     
    ]
    });