jibu-web/jibu-core-extjs/src/main/webapp/js/classic/layout.js

   1 Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
   2 Ext.ns('jibu.layout.classic');
   3
   4 jibu.layout.classic.HeaderPanel = function(){
   5     this.bbar = new Ext.Toolbar({
   6                                     border:true,
   7                                     items : [' ',' ',{
   8                                                  xtype:'displayfield',
   9                                                  id:'message-board'
  10                                              },'->',{
  11                                                  text:this.accountText,
  12                                                  tooltip: this.accountTooltip,
  13                                                  iconCls :'user',
  14                                                  handler : function() {
  15                                                      mainPanel.loadModule('system.setting', this.getText());
  16                                                  }
  17                                              },'-',{
  18                                                  text:this.exitText,
  19                                                  tooltip: this.exitText,
  20                                                  iconCls :'exit',
  21                                                  handler : function() {
  22                                                      window.location = 'Login.x?ci=logout';
  23                                                  }
  24                                              }]
  25                                 });
  26
  27     jibu.layout.classic.HeaderPanel.superclass.constructor.call(this, {
  28                                                                     id:'main-header',
  29                                                                     cls:"main-header",
  30                                                                     border:false,
  31                                                                     region:"north",
  32                                                                     height:65,
  33                                                                     margins:"0 0 0 0",
  34                                                                     el:"header"
  35                                                                 });
  36 };
  37
  38 Ext.extend(jibu.layout.classic.HeaderPanel, Ext.Panel, {
  39                accountText:'Account',
  40                accountTooltip:'Account Setting',
  41                exitText:'Exit'
  42            });
  43
  44 jibu.layout.classic.NavPanel = function() {
  45     this.loader =  new Ext.tree.TreeLoader({
  46                                                preloadChildren: true,
  47                                                clearOnLoad: false
  48                                            });
  49     this.root = new Ext.tree.AsyncTreeNode({
  50                                                text:'Jibu',
  51                                                expanded:true,
  52                                                children:JibuNav.data
  53                                            });
  54     this.tbar = [' ',
  55                  new Ext.form.TextField({
  56                                             width: 150,
  57                                             emptyText:this.findModuleText,
  58                                             enableKeyEvents: true,
  59                                             listeners:{
  60                                                 render: function(f){
  61                                                     this.filter = new Ext.tree.TreeFilter(this, {
  62                                                                                               clearBlank: true,
  63                                                                                               autoClear: true
  64                                                                                           });
  65                                                 },
  66                                                 keydown: {
  67                                                     fn: this.filterTree,
  68                                                     buffer: 350,
  69                                                     scope: this
  70                                                 },
  71                                                 scope: this
  72                                             }
  73                                         }), ' ', ' ',
  74                  {
  75                      iconCls:'icon-expand-all',
  76                      tooltip:this.expandText,
  77                      handler: function(){this.root.expand(true); },
  78                      scope: this
  79                  },'-',{
  80                      iconCls:'icon-collapse-all',
  81                      tooltip:this.collapseText,
  82                      handler: function(){this.root.collapse(true); },
  83                      scope: this
  84                  }];
  85
  86     jibu.layout.classic.NavPanel.superclass.constructor.call(this, {
  87                                                                  id:'module-tree',
  88                                                                  region:"west",
  89                                                                  split:true,
  90                                                                  header:false,
  91                                                                  width:220,
  92                                                                  minSize:175,
  93                                                                  maxSize:500,
  94                                                                  collapsible:true,
  95                                                                  margins:"0 0 5 5",
  96                                                                  cmargins:"0 0 0 0",
  97                                                                  rootVisible:false,
  98                                                                  autoScroll:true,
  99                                                                  collapseMode:"mini",
 100                                                                  collapseFirst:false
 101                                                              });
 102 };
 103
 104 Ext.extend(jibu.layout.classic.NavPanel, Ext.tree.TreePanel, {
 105                findModuleText:'Find a Module',
 106                expandText:'Expand All',
 107                collapseText:'Collapse All',
 108                filterTree: function(t, e){
 109                    var text = t.getValue();
 110                    Ext.each(this.hiddenPkgs, function(n){
 111                                 n.ui.show();
 112                             });
 113                    if(!text){
 114                        this.filter.clear();
 115                        return;
 116                    }
 117                    this.expandAll();
 118
 119                    var re = new RegExp('^' + Ext.escapeRe(text), 'i');
 120                    this.filter.filterBy(function(n){
 121                                             return !n.isLeaf() || re.test(n.text);
 122                                         });
 123
 124                    // hide empty packages that weren't filtered
 125                    this.hiddenPkgs = [];
 126                    var me = this;
 127                    this.root.cascade(function(n){
 128                                          if(!n.isLeaf() && n.ui.ctNode.offsetHeight < 3){
 129                                              n.ui.hide();
 130                                              me.hiddenPkgs.push(n);
 131                                          }
 132                                      });
 133                }
 134            });
 135
 136 jibu.layout.classic.MainPanel = function() {
 137     this.items = [{
 138                       title: this.centerPanelText,
 139                       autoScroll:true
 140                   }];
 141
 142     jibu.layout.classic.MainPanel.superclass.constructor.call(this, {
 143                                                                   region:'center',
 144                                                                   margins:'0 5 5 0',
 145                                                                   enableTabScroll : true,
 146                                                                   minTabWidth     : 75,
 147                                                                   activeTab:0
 148                                                               });
 149
 150 };
 151
 152 Ext.extend(jibu.layout.classic.MainPanel, Ext.TabPanel, {
 153                centerPanelText:'Welcome',
 154                loadModule : function(moduleName,moduleTitle){
 155                    var tab;
 156                    if(!(tab = this.getItem(moduleTitle))){
 157                        tab = [{
 158                                   xtype: moduleName,
 159                                   id:moduleName,
 160                                   title: moduleTitle,
 161                                   closable:true,
 162                                   border:false
 163                               }];
 164                        this.add(tab);
 165                    }
 166                    this.setActiveTab(moduleName);
 167                }
 168            });
 169
 170 Ext.onReady(function() {
 171                 Ext.QuickTips.init();
 172                 Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
 173                 var headerPanel = new jibu.layout.classic.HeaderPanel();
 174                 var navPanel = new jibu.layout.classic.NavPanel();
 175                 mainPanel = new jibu.layout.classic.MainPanel();
 176
 177                 Ext.getCmp('module-tree').on('click', function(node, e){
 178                                                  if(node.isLeaf()){
 179                                                      mainPanel.loadModule(node.attributes.url, node.attributes.text);
 180                                                  }
 181                                              });
 182
 183                 var viewport = new Ext.Viewport({
 184                                                     layout:'border',
 185                                                     items:[
 186                                                         headerPanel,
 187                                                         navPanel,
 188                                                         mainPanel
 189                                                     ]
 190                                                 });
 191             });