ext portal 简单示例

来源：互联网发布：东京学艺大学知乎编辑：程序博客网时间：2024/05/22 08:21

<body><div id="mainDiv"></div>
<script type="text/javascript">
Ext.onReady(function(){
  var arr=[['Bill', 'Gardener'], [ 'Ben', 'Horticulturalist'],['你', 'Gardener'],['他', 'Gardener']];
  var reader = new Ext.data.ArrayReader
  (

   {},
   //定义数组到record的映射关系
   [
    {name: 'name'},
    {name: 'occupation', mapping: 1}
   ]
  );
  //生成元数据
  var store=new Ext.data.Store(
  {
   reader:reader
  });

  store.loadData(arr);

  //现在配置列信息
  var col=new Ext.grid.ColumnModel(
  [
   new Ext.grid.RowNumberer({header:'序号',width:40}),
   {header:'姓名',sortable: true,dataIndex:'name'},
   {header:'职业',sortable: true,dataIndex:'occupation'}
  ]);

  //现在我们有一个可用的grid了,别骄傲这只是第一步
  var grid=new Ext.grid.GridPanel({
   store:store,
   cm:col,

   tbar:[{
    xtype:'textfield',
    emptyText:'please enter'
   },{
    xtype:'textfield',
    emptyText:'please enter'
   },
   {
    text:'search'
   }]
  });
  var panel1=new Ext.Panel({
   title:'待处理任务',height:200,
   draggable:true,
   items:grid

  });
  var panel2=new Ext.Panel({
   title:'待处理任务',height:200,draggable:true,
   html:'bb'
  });
  var panel3=new Ext.Panel({
   title:'待处理任务',height:200,draggable:true,
   html:'cc'
  });
  var panel4=new Ext.Panel({
   title:'待处理任务',height:200,
   draggable:true,
   html:'aa'

  });
  var panel5=new Ext.Panel({
   title:'待处理任务',height:200,draggable:true,
   html:'bb'
  });
  var panel6=new Ext.Panel({
   title:'待处理任务',height:200,draggable:true,
   html:'cc'
  });
  var panel7=new Ext.Panel({
   title:'待处理任务',height:200,
   draggable:true,
   html:'aa'

  });
  var panel8=new Ext.Panel({
   title:'待处理任务',height:200,draggable:true,
   html:'bb'
  });
  var panel9=new Ext.Panel({
   title:'待处理任务',height:200,draggable:true,
   html:'cc'
  });



  var protalPanel=new Ext.Panel({
   layout:'border',
   autoScroll:true,
   style:'width:100%',
   height:1500,
   frame:true,
   renderTo:'mainDiv',
   items:[{
    region:'north',
    height:150,
    html:'<div>logo</div>'
   },
   {
    region:'center',
    xtype:'portal',
    //height:1000,
    items:[{
     columnWidth:0.2,style:'padding:10px 0px 10px 10px',
     items:[panel1,panel2,panel3]
    },
    {
     columnWidth:0.6,style:'padding:10px 0px 10px 10px',
     items:[panel4,panel5,panel6]
    },
    {
     columnWidth:0.2,style:'padding:10px 0px 10px 10px',
     items:[panel7,panel8,panel9]
    }]

    /*region:'center',
    xtype:'portal',
    items:[{
     columnWidth:0.33,
     style:'padding:10px 0px 10px 10px',
     items:[panel1,panel2]
    },
    {
     columnWidth:0.33,
     style:'padding:10px 0px 10px 10px',
     items:[{
      title:'portal2',
      height:200,
      html:'portal2'
     }]
    },
    {
     columnWidth:0.33,
     style:'padding:10px 0px 10px 10px',
     items:[{
      title:'portal3',
      height:200,
      html:'portal3'
     }]
    }]*/





   },
   {
    region:'south',
    height:110,
    collapsable:true,
    html:'<div>bottom</div>'
   }]
  });
  /*var viewport=new Ext.Panel({
   layout:'border',
   renderTo:'mainDiv',
   width:1000,height:1000,
   items:[{
    region:'north',
    width:200,
    height:500,
    items:[{
     title:'task1',
     html:'task1'
    },
    {
     title:'task2',
     html:'task2'
    }]
   },
   {
    region:'center',
    xtype:'portal',
    items:[{
     columnWidth:0.33,
     style:'padding:10px 0px 10px 10px',
     items:[{
      title:'portall',
      height:200,
      html:'portall'
     }]
    },
    {
     columnWidth:0.33,
     style:'padding:10px 0px 10px 10px',
     items:[{
      title:'portal2',
      height:200,
      html:'portal2'
     }]
    },
    {
     columnWidth:0.33,
     style:'padding:10px 0px 10px 10px',
     items:[{
      title:'portal3',
      height:200,
      html:'portal3'
     }]
    }]
   }]
  });*/
});
</script>
</body>
</html>