ExtJS的简单使用

edr_

浏览: 169512 次
性别:
来自: 广州

最近访客更多访客>>

leimingchao

fhtwins

心随1

心灵蚂蚁

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端

html jquery 框架 ext 后台模板

ExtJS的简单使用
相比于jquery easyui ，ExtJS显得有点沉重，从官网下载的文档（300多M）就可以看出其包含的文件，功能都是easyui所不能相比的；

废话不多说，马上来看一个简单的demo。
以建立一个的简单的后台管理模板为例子（样式如下）：

1、必要的引用

其中local为语言包，resources为ext UI包， ext-all.js则为核心库，shared则是当涉及多个框架的时候使用。
2、新建一个html测试页面加入必要的引用

<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/ext-all-debug.js"></script>

3、初始化一个viewpoint

Ext.onReady(function() {
   var viewport = Ext.create('Ext.Viewport', {
    id: 'border-example',
    layout: 'border',
    items: [
     pnNorth,
     pnWest,
     pnCenter
    ]
   });
  });

viewpoint，顾名思义就是一个页面，其中包含的小页面则是items中显示的东西，这里我们应该先定义好每一个items对应是那种类型的component，一般的管理后台都是上边一个显示欢迎页面Panel，左边是一个下拉树显示所有的菜单Panel，右边则根据鼠标点击左边的哪个菜单莱尼显示不同的页面，对应的是tab.Panel）

接下来就是就是定义每个panel了，共三个north，west ，center，位置则是在属性region中定义；

          
//首先定义好每个panel中包含什么item
var itemWest_sys=[{
   title: 'Management',
   itemId:'mgId',
   iconCls: 'nav' // see the HEAD section for style used
  }, {
   title: 'Tiemsheet',
   collapsed : false,//default to render it expand,default:true(collapsed)
   itemId:'tsId',
   html: 'Some settings in here.
',
   iconCls: 'settings'
  }];
  //center item
  var itemCenter=[{
   title: 'Index',
   itemId:'indexId',
   autoScroll: true,
   html:'<iframe src="main.html" frameBorder=0 ></iframe>'
  }];
//初始化每个panel
//region-north
  var pnNorth=new Ext.Panel({
   id:'pnNorth',  
   autoWidth:true,  
   heigth:40,  
   margins: '0 5 0 10',
   padding:'0 0 0 30',
   frame:true,
   region:'north',
   html:'<h1>Hello Timesheet Management System</h1>'
  });
  //region-west
  var pnWest=new Ext.Panel({
   id:'pnWest',
   region:'west',
   title:"west",
   split: true,
   width: 200,
   minWidth: 175,
   maxWidth: 400,
   collapsible: true,
   animCollapse: true,
   margins: '0 0 0 10',
   layout: 'accordion',
   items: itemWest_sys
  });
  //region-center
  var pnCenter=Ext.create('Ext.tab.Panel', {
   region: 'center', // a center region is ALWAYS required for border layout
   deferredRender: false,
   margins: '0 5 0 0',
   activeTab: 0, // first tab initially active
   items:itemCenter
  });

每个panel中还可以包含其他的panel，在items中定义。
例如左边的菜单需要根据数据库返回来的数据进行动态加载：
首先将数据进行组装，然后再调用add()方法进行动态的加入；

  
var test={title: 'Index',
   itemId:'indexId',
   autoScroll: true,
   closable:true,
   html:'<h1>Test for item add</h1>' 
  };//组转格式
pnAdd.add(test );

4、整个页面的源码

<!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">
    <link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
    <script type="text/javascript" src="ExtJS/ext-all-debug.js"></script>
 <script type="text/javascript">
	
  //--------------系统全局变量-------
  //west sys item
  var itemWest_sys=[{
   title: 'Management',
   itemId:'mgId',
   iconCls: 'nav' // see the HEAD section for style used
  }, {
   title: 'Tiemsheet',
   collapsed : false,//default to render it expand,default:true(collapsed)
   itemId:'tsId',
   html: 'Some settings in here.
',
   iconCls: 'settings'
  }];
  //center item
  var itemCenter=[{
   title: 'Index',
   itemId:'indexId',
   autoScroll: true,
   html:'<iframe src="main.html" frameBorder=0 ></iframe>'
  }];
  
  //添加树-------data tree test
  var tree_include = Ext.create('Ext.data.TreeStore', {
   root: {
    expanded: true,
    children: [
     { text: "detention", leaf: true },
     { text: "homework", expanded: true, children: [
      { text: "book report", leaf: true },
      { text: "algebra", leaf: true}
     ] },
     { text: "buy lottery tickets", leaf: true }
    ]
   }
  });
  var tree=Ext.create('Ext.tree.Panel', {
   title: 'Simple Tree',
   itemId:"treeId",
   width: 200,
   height: 150,
   store: tree_include,
   rootVisible: false,
   renderTo: Ext.getBody()
  });
  
  //region-north
  var pnNorth=new Ext.Panel({
   id:'pnNorth',  
   autoWidth:true,  
   heigth:40,  
   margins: '0 5 0 10',
   padding:'0 0 0 30',
   frame:true,
   region:'north',
   html:'<h1>Hello Timesheet Management System</h1>'
  });
  //region-west
  var pnWest=new Ext.Panel({
   id:'pnWest',
   region:'west',
   title:"west",
   split: true,
   width: 200,
   minWidth: 175,
   maxWidth: 400,
   collapsible: true,
   animCollapse: true,
   margins: '0 0 0 10',
   layout: 'accordion',
   items: itemWest_sys
  });
  //region-center
  var pnCenter=Ext.create('Ext.tab.Panel', {
   region: 'center', // a center region is ALWAYS required for border layout
   deferredRender: false,
   margins: '0 5 0 0',
   activeTab: 0, // first tab initially active
   items:itemCenter
  });
  
  //Ext.require(['*']);
  Ext.onReady(function() {
   var viewport = Ext.create('Ext.Viewport', {
    id: 'border-example',
    layout: 'border',
    items: [
     pnNorth,
     pnWest,
     pnCenter
    ]
   });
  });
  
  //函数---------添加item---------
  function addItem(itAdd,pnAdd){
   var rtn=pnAdd.getComponent(itAdd.itemId);
   if(rtn==null){
    pnAdd.add(itAdd);
   }else{
    pnAdd.setActiveTab(rtn);
   }
  }
  /* var test={title: 'Index',
   itemId:'indexId',
   autoScroll: true,
   closable:true,
   html:'<h1>Test for item add</h1>' 
  };
  addItem(test,pnCenter);
  addItem(test,pnWest); */
    </script>
    <title>Welcome to Hello Timesheet Management System</title>
</head>
<body>

 <div id="west" class="x-hide-display">
        Hi. I'm the west panel.

    </div>

 <div id="center1" class="x-hide-display">
        I can close ;I am pennal One
 </div>
 <div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">
    </div>
</body>
</html>

以上就是使用ExtJS制作的一个简单的后台管理模型；

好好看API，好好研究example，好好制作demo；

Have a nice day~