helps.js

基于Sturts+Spring+Hibernate的一个高级销售管理系统。内容丰富

Ext.BLANK_IMAGE_URL = 'images/s.gif';

YuanChung = {};
HelpTreePanel = function() {
    HelpTreePanel.superclass.constructor.call(this, {
        id:'helpTree',
        region:'west',
        split:true,
        width: 280,
        minSize: 175,
        maxSize: 500,
        collapsible: true,
        margins:'5 0 5 5',
        cmargins:'0 0 0 0',
        rootVisible:false,
        lines:false,
        autoScroll:true,
        animCollapse:false,
        animate: false,
        collapseMode:'mini',
        loader: new Ext.tree.TreeLoader({
    			preloadChildren: true,
    			clearOnLoad: false
    		}),
        root: new Ext.tree.AsyncTreeNode({
            id:'root',
            expanded:true,
            children:[YuanChung.treeData]
         }),
        collapseFirst:false
    });
    
    this.getSelectionModel().on('beforeselect', function(sm, node){
        return node.isLeaf();
    });
};

Ext.extend(HelpTreePanel, Ext.tree.TreePanel, {
    selectHelpTreeItem : function(fileName){
        if(fileName){
            this.selectPath(this.getNodeById(fileName).getPath());
            Ext.getCmp("help_" + fileName).setTitle(this.getNodeById(fileName).text);
        }
    }
});


HelpContentPanel = Ext.extend(Ext.Panel, {
    closable: true,
    autoScroll:true,

    initComponent : function(){
        HelpContentPanel.superclass.initComponent.call(this);
    },

    scrollToMember : function(member){
        var el = Ext.fly(member);
        if(el){
            var top = (el.getOffsetsTo(this.body)[1]) + this.body.dom.scrollTop;
            this.body.scrollTo('top', top-25, {duration:.75});
        }
    },

  	scrollToSection : function(id){
  		var el = Ext.getDom(id);
  		if(el){
  			var top = (Ext.fly(el).getOffsetsTo(this.body)[1]) + this.body.dom.scrollTop;
  			this.body.scrollTo('top', top-25, {duration:.5, callback: function(){
                  Ext.fly(el).next('h3').pause(.2).highlight('#8DB2E3', {attr:'color'});
              }});
      }
  	}
});


HelpMainPanel = function(){
    HelpMainPanel.superclass.constructor.call(this, {
        id:'helpBody',
        region:'center',
        margins:'5 5 5 0',
        resizeTabs: true,
        minTabWidth: 135,
        tabWidth: 135,
        enableTabScroll: true,
        activeTab: 0,
		defaultChildId: 'help_pingtaijianjie',
		defaultNodeId: 'pingtaijianjie',
		defaultTreeId: 'helpTree',
        items: {
            id:'help_pingtaijianjie',
            title: '平台简介',
            autoLoad: {url: 'helps/pingtaijianjie.jsp', scope: this},
            autoScroll: true
        }
    });
};

Ext.extend(HelpMainPanel, Ext.TabPanel, {

    initEvents : function(){
        HelpMainPanel.superclass.initEvents.call(this);
        this.body.on('click', this.onClick, this);
    },

	render : function(){
        HelpMainPanel.superclass.render.apply(this, arguments);
        Ext.getCmp(this.defaultChildId).on("activate", function(panel){
			var theMain = panel.ownerCt;
			Ext.getCmp(theMain.defaultTreeId).selectPath(Ext.getCmp(theMain.defaultTreeId).getNodeById(theMain.defaultNodeId).getPath());
		});
		//default to select the tree node when render this panel
		Ext.getCmp(this.defaultTreeId).selectPath(Ext.getCmp(this.defaultTreeId).getNodeById(this.defaultNodeId).getPath());
    },

    onClick: function(e, target){
		    if(target = e.getTarget('a', 3)){
            var fileName = Ext.fly(target).getAttributeNS('yc', 'fileName');
            e.stopEvent();
            if(fileName){
                var sectionName = Ext.fly(target).getAttributeNS('yc', 'sectionName');
                this.loadHelpItem(target.href, fileName, sectionName);
            }else if(target.className == 'inner-link'){
                this.getActiveTab().scrollToSection(target.href.split('#')[1]);
            }else{
                window.open(target.href);
            }
        }
    },

    loadHelpItem : function(href, fileName, member){
        var id = 'help_' + fileName;
        var tab = this.getComponent(id);
        if(tab){
            this.setActiveTab(tab);
            if(member){
                tab.scrollToMember(member);
            }
        }else{
            var autoLoad = {url: href};
            if(member){
                autoLoad.callback = function(){
                    Ext.getCmp(id).scrollToMember(member);
                }
            }
            var p = this.add(new HelpContentPanel({
                id: id,
                fileName : fileName,
                autoLoad: autoLoad
            }));
            this.setActiveTab(p);
        }
    }
});


Ext.onReady(function(){
    Ext.Updater.defaults.indicatorText = '<div class="loading-indicator">加载中...</div>';
    var helpTree = new HelpTreePanel();
    var helpMainPanel = new HelpMainPanel();

    helpTree.on('click', function(node, e){
         if(node.isLeaf()){
            e.stopEvent();
            helpMainPanel.loadHelpItem(node.attributes.href, node.id);
         }
    });

    helpMainPanel.on('tabchange', function(tp, tab){
        helpTree.selectHelpTreeItem(tab.fileName); 
    });

    var hd = new Ext.Panel({
        border: false,
        layout:'anchor',
        region:'north',
        height:80,
        items: [{
            xtype:'box',
            el:'header',
            border:false,
            anchor: 'none -25'
        }]
    })

    var viewport = new Ext.Viewport({
        layout:'border',
        items:[ hd, helpTree, helpMainPanel ]
    });

    helpTree.expandPath('/root/helpdocs');
	
    var page = window.location.href.split('?')[1];
    if(page){
        var ps = Ext.urlDecode(page);
        var path = ps['path'];
        var fileName = ps['fileName'];
        helpMainPanel.loadHelpItem('helps/' + path + '.jsp', fileName, ps.member);
    }
    
    viewport.doLayout();
    setTimeout(function(){
        Ext.get('loading').remove();
        Ext.get('loading-mask').remove();
    }, 250);
	
});