梦幻之旅

DEBUG - 天道酬勤

   :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  671 随笔 :: 6 文章 :: 256 评论 :: 0 Trackbacks
<html>
    
<head>
        
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
<title>extDemo</title>
        
<link rel="stylesheet" type="text/css"
            href
="/ext/resources/css/ext-all.css" />
        
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
        
<script type="text/javascript" src="/ext/ext-all.js"></script>
        
<script type="text/javascript">
         Ext.onReady(
function(){
            
//创建一个工具条
            var tb=new Ext.Toolbar('toolbar-div');
            tb.add(
new Ext.Toolbar.SplitButton({
                  text: '文件',
                  cls: 'x
-btn-text-icon blist',
                menu : {items: [
                 {text: '新建', handler: onItemClick},
                 {text: '保存', handler: onItemClick},
                 {text: '加载', handler: onItemClick}
           ]}}),
           
new Ext.Toolbar.MenuButton({
               text: '编辑',
               cls: 'x
-btn-text-icon blist',
               menu : {items: [
                 {text: '复制', handler: onItemClick},
                 {text: '粘贴', handler: onItemClick}
           ]}})
         );
        
        
//创建树型菜单
        var root = new Ext.tree.TreeNode({
            text: '文件夹',
            allowDrag:
false,
            allowDrop:
false
        });
        root.appendChild(
            
new Ext.tree.TreeNode({text:'收件箱',allowDrag:false}),
            
new Ext.tree.TreeNode({text:'发件箱',allowDrag:false}),
            
new Ext.tree.TreeNode({text:'联系人',allowDrag:false}),
            
new Ext.tree.TreeNode({text:'已删除的邮件',allowDrag:false})
        );
        
//创建表格的数据
        var myData = [['张三','测试','2006-1-1'],
                     ['李四','测试一','
2006-5-6'],
                     ['王五','测试二','
2007-12-1'],
                     ['刘六','测试三','
2006-12-1'],
                     ['张三','测试四','
2007-6-1'],
                     ['李四','测试五','
2007-7-1'],
                     ['刘六','测试六','
2007-8-1'],
                     ['张三','测试七','
2007-9-1'],
                     ['李四','测试八','
2007-10-1'],
                     ['王五','测试九','
2007-11-1'],
                     ['刘六','测试六','
2007-8-1']];
        
        
//生成表格
        var ds = new Ext.data.Store({
            proxy: 
new Ext.data.MemoryProxy(myData),
            reader: 
new Ext.data.ArrayReader({},
                [{name:'sender'},
                   {name:'title'},
                   {name:'sendtime'}])
        });
        ds.load();
        
var colModel = new Ext.grid.ColumnModel(
            [{header:'发送人',width:
100,sortable:true,dataIndex:'sender'},
             {id:'title',header:'标题', width:
100,sortable:true,dataIndex:'title'},
             {header:'发送时间',width:
75,sortable:true,dataIndex:'sendtime'}
            ]);
            
        
//把以上的元素布局
        var viewport = new Ext.Viewport({
            layout:'border',
            items:[
                
new Ext.BoxComponent({
                     region:'north',
                     el:'north
-div',
                    tbar:tb,
                    height:
26
             }),
                
//树型列表
                new Ext.tree.TreePanel({
                    region:'west',
                    contentEl:'west
-div',
                    title:'树列表',
                    split:
true,
                    width: 
200,
                    minSize: 
175,
                    maxSize: 
400,
                    collapsible: 
true,
                    margins:'
0 0 0 0',
                    root:root
             }),
             {
             region:'center',
             layout:'border',
             items:[
                    
//条目列表
                    new Ext.grid.GridPanel({
                           region:'center',
                           el:'center
-center',
                           title:'条目列表',
                           ds: ds,
                           cm: colModel,
                           autoScroll: 
true
                    })
                    
//内容
                    /**
                    {
                        region:'south',
                        contentEl:'center-south',
                        title:'内容',
                        split:true,
                        collapsible:true,
                        titlebar:true,
                        height:200,
                        minSize: 100,
                        maxSize:400,
                        collapsedTitle:'内容'
                     }
*/
                 ]
            },
            
new Ext.BoxComponent({
                 region:'south',
                 el:'south
-div',
                 height:
24
            })]
        });
        root.expand()
            
function onItemClick(item){
                 alert(item.text);
        }
     });
    
</script>
    
</head>
    
<body>
        
<div id="north-div">
            
<div id='toolbar-div'></div>
        
</div>
        
<div id="west-div"></div>
        
<div id='center-center'></div>
        
<div id='center-south'></div>
        
<div id="south-div"></div>
    
</body>
</html>
posted on 2008-10-26 22:28 HUIKK 阅读(441) 评论(0)  编辑  收藏 所属分类: EXT

只有注册用户登录后才能发表评论。


网站导航: