EXT富客户端后台管理系统 初步代码

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title><%$sitename%></title>

  <%*加载的Extjs 资源文件 -- 开始*%>

  <link rel="stylesheet" type="text/css" href="<%$extjs_res%>" />

  <script type="text/javascript" src="<%$extjs_adapter%>"></script>

  <script type="text/javascript" src="<%$extjs_laction%>"></script>

  <%*加载的Extjs 资源文件 -- 结束*%>

  <%*执行块的JS区域 -- 开始*%>

  <script type="text/javascript">

  //具体开发 -- BJExtreme类

  BJExtreme= function(){} ;

  BJExtreme.prototype.getAuthor = function(){

  return '许消寒' ;

  }

  BJExtreme.prototype.getVersion = function(){

  return '2008年08月13日 17:00' ;

  }

  BJExtreme.prototype.getController = function(){

  return 'index.php' ;

  }

  BJExtreme.prototype.buildLinkStr = function(ctl,act){

  if (ctl == undefined)

  return BJExtreme.prototype.getController() ;

  if (act == undefined)

  act = null ;

  return BJExtreme.prototype.getController() + '?ctl=' + ctl + '&act=' + act ;

  }

  BJExtreme.prototype.showWindow = function(title1,width1,height1,html1){

  if (this.win == undefined){

  this.win = new Ext.Window({

  title: title1,

  width: width1 ,

  height: height1 ,

  html: html1

  });

  }

  else {

  this.win.close();

  this.win = new Ext.Window({

  title: title1,

  width: width1 ,

  height: height1 ,

  html: html1

  });

  }

  this.win.show();

  }

  /*对出现的UI组件单独封装*/

  BJExtreme.prototype.ui = function(){} ;

  BJExtreme.prototype.ui.mainTopic = {

  title: 'Beijing Extreme 后台管理', region: 'north' ,

  html: '<embed src="<%$prj_dir%>/swf/top_title.swf" quality="high" type="application/x-shockwave-flash" width="450" height="50"></embed>'

  };

  /*左侧菜单项操作 -- 开始*/

  //定义初始话状态时的菜单条对象

  BJExtreme.prototype.ui.menuBar = {

  xtype: 'treepanel' ,

  title: '菜单',region: 'west',width: 200 ,collapsible: true ,

  loader: null , root: null ,rootVisible: true , listeners: null

  };

  //旅游相关

  BJExtreme.prototype.ui.menuBar.Traveling = {

  text: '旅游' ,

  leaf: false , // 这个设为false 则显示文件夹图标 , true 则显示单项图标

  children: null

  };

  BJExtreme.prototype.ui.menuBar.Traveling.children = [

  {text: '北京',leaf: true ,ctl: 'Peking',act: ''},

  {text: '西藏' ,leaf: true ,ctl: 'Tibet' ,act: ''},

  {text: '泰国' ,leaf: true},

  {text: '香格里拉',leaf: true,ctl:'Shangrila',act: ''}

  ];

  //藏医相关

  BJExtreme.prototype.ui.menuBar.Mibetdoctor = {

  text: '藏医' ,

  leaf: false ,

  children: null

  };

  BJExtreme.prototype.ui.menuBar.Mibetdoctor.children = [

  {text: '藏医历史',leaf: true},

  {text: '藏医理论' ,leaf: true},

  {text: '诊断' ,leaf: true},

  {text: '病症' ,leaf: true},

  {text: '治疗',leaf: true}

  ];

  //潜水

  BJExtreme.prototype.ui.menuBar.Diving = {

  text: '潜水' ,

  leaf: false ,

  children: null

  };

  //登山

  BJExtreme.prototype.ui.menuBar.Mountain = {

  text: '登山' ,

  leaf: false ,

  children: null

  };

  //攀岩

  BJExtreme.prototype.ui.menuBar.Rockclimbe = {

  text: '攀岩' ,

  leaf: false ,

  children: null

  };

  //徒步

  BJExtreme.prototype.ui.menuBar.Onfoot = {

  text: '徒步' ,

  leaf: false ,

  children: null

  };

  //摩托车

  BJExtreme.prototype.ui.menuBar.Motorcycle = {

  text: '摩托车' ,

  leaf: false ,

  children: null

  };

  //项目中集成的模块

  BJExtreme.prototype.ui.menuBar.ModuleInProject = {

  text: '项目中集成的模块' ,

  leaf: false ,

  children: null

  };

  BJExtreme.prototype.ui.menuBar.ModuleInProject.children = [

  {

  text: '互动提示条',leaf: true,ctl: 'ExtjsStudy',act: 'linkTips',

  //这个运行的优先级高于下面的那个通用的监听控制器

  listeners:{click: function (n){window.open(BJExtreme.prototype.buildLinkStr(n.attributes.ctl,n.attributes.act));return false ;}}

  }

  ];

  //初始化 菜单项元素 信息 -- 这个必须在 -- 当前菜单是使用异步树组件生成的 , 以后可以添加其他不同的实现

  BJExtreme.prototype.ui.menuBar.loader = new Ext.tree.TreeLoader();

  BJExtreme.prototype.ui.menuBar.root = new Ext.tree.AsyncTreeNode({

  expanded: true ,

  children: [

  BJExtreme.prototype.ui.menuBar.Traveling ,

  BJExtreme.prototype.ui.menuBar.Mibetdoctor ,

  BJExtreme.prototype.ui.menuBar.Diving ,

  BJExtreme.prototype.ui.menuBar.Mountain ,

  BJExtreme.prototype.ui.menuBar.Rockclimbe ,

  BJExtreme.prototype.ui.menuBar.Onfoot ,

  BJExtreme.prototype.ui.menuBar.Motorcycle ,

  BJExtreme.prototype.ui.menuBar.ModuleInProject

  ]

  });

  //定义一个简单的响应事件

  BJExtreme.prototype.ui.menuBar.listeners = {

  click: function (n) //n.attributes 可以获得AsyncTreeNode的children中的对象

  {

  if (n.attributes.leaf == true) //叶选项

  {

  //n.attributes.text n.attributes.leaf

  var ctlStr = BJExtreme.prototype.buildLinkStr(n.attributes.ctl,n.attributes.act);

  myextreme.showWindow('当前控制器',400,300,ctlStr) ;

  }

  else //包含子菜单

  {

  //not to do

  }

  }

  };

  //菜单选项结束

  //主内容面板

  BJExtreme.prototype.ui.contentPane = {

  id: "main_content", xtype: "tabpanel" , region: 'center' ,items: [{title: '主内容面板'}]

  };

  //状态条

  BJExtreme.prototype.ui.statusBar = {

  xtype: "tabpanel" , region: 'south' ,items: [{title: '状态条'}]

  };

  BJExtreme.prototype.buildMainPane = function(BJExtremeObj){

  //Ext.Viewport 用来将对象渲染到页面中的body块中,会自动改变,每个页面仅限一个

  this.mainPane = new Ext.Viewport({

  enableTabScroll: true ,

  layout: 'border', //设为fit则不能显示复合面板

  items: [

  BJExtremeObj.ui.mainTopic,

  BJExtremeObj.ui.menuBar ,

  BJExtremeObj.ui.contentPane ,

  BJExtremeObj.ui.statusBar

  ]

  }) ;

  }

  var myextreme = new BJExtreme() ;

  Ext.onReady(

  function(){

  //Ext.MessageBox.alert('BJExtreme Version',myextreme.getVersion());

  //Ext.MessageBox.alert('BJExtreme Version',myextreme.buildLinkStr('t','b'));

  myextreme.buildMainPane(myextreme) ;

  }

  );

  </script>

  <%*执行块的JS区域 -- 结束*%>

  </head>

  <body>

  <!-- //页面中子导航菜单 -->

  </body>

  </html>