ext 布局独孤九剑-第五式 -

hwpok

浏览: 252043 次
性别:
来自: 上海

最近访客更多访客>>

xdonex

mianjifen_mianjifen

xiao_2008

kaowww153

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

ext 布局独孤九剑-第五式

博客分类：

EXT JavaScript CSS HTML

<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>

分享到：

Ext Grid 独孤九剑-第六式 | Ext.form.FormPanel 独孤九剑-第四式

2008-10-26 22:28
浏览 581
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ext 布局独孤九剑-第五式

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ext 布局 独孤九剑-第五式

评论

发表评论

相关推荐

Ext.form.FormPanel 独孤九剑-第三式

Ext.form.FormPanel 独孤九剑-第四式

Ext Grid 独孤九剑-第六式

Ext Grid 独孤九剑-第七式

Ext Grid 独孤九剑-第八式

关于Spket插件的安装 心得

Ext FormPanel 独孤九剑-第九式

Ext 提交一个Form到Servlet

Ext Grid 综合

Ext show,progress

Ext Toolbar 练习

Ext form

最近访客更多访客>>

ext 布局独孤九剑-第五式

关于Spket插件的安装心得