qq_28495031 2016-06-12 08:37
浏览 531

ext js 3.1 tabpanel与treepanel结合事切换问题

图片说明

代码:

Ext.onReady(function() {

Ext.BLANK_IMAGE_URL = project.root + '/ext/resources/images/default/s.gif';
Ext.QuickTips.init();
var currRsetStore, currRsetGrid;

var currCondsForm, currCondsFormTbar;

var treeTabPanel = new Ext.TabPanel({
    activeTab: 0,
    enableTabScroll:true,
    frame : false,
    listeners:{
        activate:function(){
            this.getUpdater().refresh(); 
        }
    }
});

DataTreePanel = function(config) {
    Ext.apply(this, config);

    DataTreePanel.superclass.constructor.call(this, {
        header: false,
        bodyStyle : 'padding: 20px 0 30 0',
        animate:false,
        height:550,
        //autoHeight:true,       
        autoScroll:true,
        border:false,
        frame: false,

// iconCls : 'icon-nav', 增加之后,会使TreePanel的title前面出现空白
layout:'fit',
lines: false,
rootVisible: false,

loader: new Ext.tree.TreeLoader({
dataUrl : project.root + '/cenrep/loadTreeMenuByTreeTableNameTreeNode.action?treeTableName=' + this.treeTableName
}),
root: new Ext.tree.AsyncTreeNode()
});

    this.on('checkchange', function(node, checked) {
        if (node.leaf && checked) {
            if(node.getDepth()>2){//如果节点深度大于2则循环三次
                Ext.each(node.parentNode.parentNode.parentNode.childNodes,function(p){//循环最外层的根节点
                    Ext.each(p.childNodes,function(pn){//循环所有最外层根节点的下一层子节点
                        Ext.each(pn.childNodes,function(n){//循环最内层节点
                            if (n.id != node.id) {
                                n.attributes.checked = false;
                                n.ui.checkbox.checked= false;
                            }
                        });
                    });
                });
            }else{//节点深度小于2 循环两次
                Ext.each(node.parentNode.parentNode.childNodes, function(pn) {
                    Ext.each(pn.childNodes, function(n) {
                        if (n.id != node.id) {
                            n.attributes.checked = false;
                            n.ui.checkbox.checked= false;
                        }
                    });
                }); 
            }

            var nav = Ext.getCmp('condsForm-tbarText');
            nav.setText('<font color="#15428b" style="font-family:黑体;font-size: 14px;"> ' + node.text + '</font>');
            Ext.getCmp('condsForm-tbarBtnAccurate').setDisabled(false);
            Ext.getCmp('condsForm-tbarBtnFuzzy').setDisabled(false);   

            var nodeDef = contentFactory.getNodeDefById(this.treeTableName, node.id); 
            condsFormFactory.setCurrNodeDef(nodeDef);

            }

    }); 

};
Ext.extend(DataTreePanel, Ext.tree.TreePanel, { 
});
personTreePanel = new DataTreePanel({dataType: 'Person', title: '人', treeTableName: 'CenREP_TreeNode_DC_PERSON'});
treeTabPanel.add(personTreePanel);

// SiteTreePanel=new DataTreePanel({dataType: 'Site', title: '地', treeTableName: 'CenREP_TreeNode_DC_SITE'});
//treeTabPanel.add(SiteTreePanel);
//treeTabPanel.add(new DataTreePanel({dataType: 'Event', title: '事', treeTableName: 'CenREP_TreeNode_DC_EVENT'}));
objectTreePanel=new DataTreePanel({dataType: 'Object', title: '物', treeTableName: 'CenREP_TreeNode_DC_OBJECT'});
treeTabPanel.add(objectTreePanel);

orgTreePanel=new DataTreePanel({dataType: 'Org', title: '组织', treeTableName: 'CenREP_TreeNode_DC_ORG'});
treeTabPanel.add(orgTreePanel);    
// 整体布局中,地图部分Panel
var contentPanel = new Ext.Panel({
    html : '<div style="height:100%;width:100%;border:0px solid red;"><iframe id="xchgis-content" name="xchgis-content" marginheight="0" marginwidth="0" src="QueryMap.jsp" width="100%" height="' + parent.window.MapHeight + '" frameborder="0" scrolling="no" style="display:block;"></iframe></div>',
    frame: false,
    id:'content-Panel',
    region:'center'
});


var viewport = new Ext.Viewport({
     layout: 'border',
     style : 'border:#024459 2px solid;',   // 注释后,非IE出底边框;但IE什么边框都没有。
     autoWidth:false,
     autoScroll:false,                      // IE10中必须设定
     items: [
        {  region: 'east',              
            width: 450,
            minWidth: 450,
            maxWidth: 450,
            collapseMode: 'mini',
            split: true,                                
            margins: '0 5 0 0',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items:[
                {   id: 'condsForm-tbarPanel',  
                    height: 30
                }, {
                    id: 'condsForm-panel',
                    bodyStyle: 'padding:25px 0',
                    items: [],
                    flex: 1
                }, {
                    id: 'rsetGrid-panel',
                    items: [],      
                    flex: 3.5                           
                }
            ]
        },
        {   region: 'west',
            width: 290,
            minWidth: 290,
            maxWidth: 290,
            collapseMode:'mini',
            split:true,                             
            margins: '0 0 0 5',
            layout: {
                type:'vbox',
                align:'stretch'
            },
            items:[{
                    items: treeTabPanel,
                    flex:1
                }
            ]
        },
        contentPanel       
     ]    
 });

treeTabPanel.on('tabchange', function(tp, tab) {
        Ext.getCmp('condsForm-tbarPanel').removeAll();
        Ext.getCmp('condsForm-panel').removeAll();
        Ext.getCmp('rsetGrid-panel').removeAll();
        currRsetStore = rsetGridFactory.getRsetStore(tab.dataType);
        currRsetGrid = rsetGridFactory.getRsetGridPanel(tab.dataType, currRsetStore);
        currCondsForm = condsFormFactory.getCondsFormPanel(tab.dataType, currRsetStore);
        condsFormFactory.setCurrCondsForm(currCondsForm);
        Ext.getCmp('condsForm-panel').add(currCondsForm);
        Ext.getCmp('rsetGrid-panel').add(currRsetGrid);

        currCondsFormTbar = condsFormFactory.getCondsFormTbar(tab.dataType, tab.title, currRsetStore);
        var tbarPanel = Ext.getCmp('condsForm-tbarPanel');
        tbarPanel.add(currCondsFormTbar);
        tbarPanel.doLayout();
        viewport.doLayout();
    }
);
treeTabPanel.fireEvent('tabchange', treeTabPanel, personTreePanel);

});

ext小白 求大神指教

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 使用C#,asp.net读取Excel文件并保存到Oracle数据库
    • ¥15 C# datagridview 单元格显示进度及值
    • ¥15 thinkphp6配合social login单点登录问题
    • ¥15 HFSS 中的 H 场图与 MATLAB 中绘制的 B1 场 部分对应不上
    • ¥15 如何在scanpy上做差异基因和通路富集?
    • ¥20 关于#硬件工程#的问题,请各位专家解答!
    • ¥15 关于#matlab#的问题:期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707,使系统具有较小的超调量
    • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
    • ¥30 截图中的mathematics程序转换成matlab
    • ¥15 动力学代码报错,维度不匹配