ext中结合layout tab gird menu的例子（未完成）

pzhifeng

浏览: 4526 次
来自: ...

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (0)

社区版块

存档分类

EXT JSP HTML

目标：

在layoutr 的west显示 tree，在center显示tab，在tab里显示gird（待处理）。

点tree中菜单项，可在center中显示所指向的页面。

1、layout .jsp 引用layout.js 和 tree.js。

html代码提交不了。简单列举div的层次关系：

id="container"
    id="header" class="x-layout-inactive-content"
    id="menus"></d
    id="content" class="x-layout-inactive-content
            id="tabs"
                id="desktop"
                id="demotab"
    id="footer" class="x-layout-inactive-content"

2、layout.js 其中包括两个tab。

Ext.onReady(function() {

    Example = function() {
        return {
            init : function() {
                var layout = new Ext.BorderLayout(document.body, {
                    north: {
                        split:false,
                        initialSize: 35
                    },
                    south: {
                        split:false,
                        initialSize: 20
                    },
                    west: {
                        split:false,
                        initialSize: 200,
                        collapsible: false
                    },
                    center: {
                        closeOnTab: true,
                        autoScroll: true
                    }
                });
                layout.beginUpdate();
                layout.add('north', new Ext.ContentPanel('header', {fitToFrame:true}));
                layout.add('south', new Ext.ContentPanel('footer', {fitToFrame:true}));

layout.add('west', new Ext.ContentPanel('menus', {title: '菜单', fitToFrame:true}));

                var tabs = new Ext.TabPanel('tabs');
                tabs.addTab('desktop', "我的桌面");
                var demotab = tabs.addTab('demotab', "测试管理",true);
                demotab.setUrl("list.jsp", null, true);
                tabs.activate('desktop');

                //layout.add('center', new Ext.ContentPanel('content',{fitToFrame:true,autoScroll: true, resizeEl: 'center-iframe'}));
                layout.add('center', new Ext.ContentPanel('content'));
                layout.endUpdate();
            }
        };

}();
Ext.EventManager.onDocumentReady(Example.init, Example, true);
});

3、tree.js 在layout.jsp页面中显示菜单。

Ext.onReady(function() {

    Example = function() {
        return {
            init : function() {
                // shorthand
                var Tree = Ext.tree;
                var tree = new Tree.TreePanel('menus', {
                    animate:true,
                    loader: new Tree.TreeLoader({
                        dataUrl:'/demo/action/menuAction.jsp'
                    }),
                    enableDD:true,
                    containerScroll: true
                });

                // set the root node
                var root = new Tree.AsyncTreeNode({
                    text: 'Ext JS',
                    draggable:false,
                    id:'source',
                    href:'/demo/action/menuAction.jsp'
                });
                tree.setRootNode(root);

                // render the tree
                tree.render();
                root.expand();

                tree.on('click', function (node) {
                    if (node.isLeaf()) {
                        Ext.get('content').dom.src = node.attributes.href;
                    }
                }, null, {delegate: 'a', stopEvent:true});
            }
        };

}();
Ext.EventManager.onDocumentReady(Example.init, Example, true);
});

4、list.jsp

请参考 http://extjs.com/learn/Tutorial:Using_Ext_grid_form_dialog_to_achieve_paging_list,_create,_edit,_delete_function

需解决的问题：

1、在tab里不能显示gird。即demotab.setUrl("list.jsp", null, true);执行后，gird不显示。

2、点菜单项，为新窗口打开页面，不是在layout的center中显示。

请高手指定！！多谢！