ExtJS的简单使用

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

废话不多说，马上来看一个简单的demo。
以建立一个的简单的后台管理模板为例子（样式如下）：
[img]http://dl2.iteye.com/upload/attachment/0092/8569/370740fb-3648-3b61-8ba7-564ba9f4196f.png[/img]
[size=medium][color=green]1、必要的引用[/color][/size]
[img]http://dl2.iteye.com/upload/attachment/0092/8571/7c360b2a-ce22-3c07-afc5-ef45e5db8d9b.png[/img]
其中local为语言包，resources为ext UI包 ， ext-all.js则为核心库，shared则是当涉及多个框架的时候使用。
[size=medium][color=green]2、新建一个html测试页面加入必要的引用[/color][/size]

[size=medium][color=green]3、初始化一个viewpoint[/color][/size]

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:''
  }];
//初始化每个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:'
Hello Timesheet Management System
'
  });
  //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:'
Test for item add
' 
  };//组转格式
pnAdd.add(test );

[size=medium][color=green]4、整个页面的源码[/color][/size]

    "http://www.w3.org/TR/html4/loose.dtd">


    
    
    
 
    



 

        Hi. I'm the west panel.

    

 

        I can close ;I am pennal One
 
 

    

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

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

[size=large][color=brown]Have a nice day~[/color][/size] :arrow: