extjs4.1.0 helloworld

来源：互联网发布：模拟人生4mc控制器mac 编辑：程序博客网时间：2024/06/14 17:31

Extjs4.1.0

由于学习struts2在一个小项目中用到了extjs，就专门去看了下着方面的知识，发现这里面的知识点也是非常多的，决不是只花几天就可以搞定，所以在这知识对它做一个简单的介绍。

首先到官网去下载extjs，http://www.sencha.com/products/extjs个人学习研究是免费的GPL3的许可证。

环境的搭建：建立web project，然后把extjs目录下的文件全部复制到WebRoot下，在这个目录下建立一个hello.js和一个hello.jsp

其中hello.js的源码如下：

Ext.application({name:'HelloExt',launch:function(){Ext.create('Ext.container.Viewport',{layout:'fit',items:[{title:'Hello Ext',html:'Hello Welcome to Ext JS'}]});}});

Hello.jsp源码如下：

<html>  <head>    <title>helloworld.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"><script type="text/javascript" src="ext-all.js"></script>  <script type="text/javascript" src="hello.js"></script>  </head>    <body>  </body></html>

将它部署到tomcat服务器上，并在浏览器地址栏键入http://localhost:8080/ext/hello.jsp（我的项目名叫ext）

可以看到这样一个界面

在上面的js文件中layout表示布局，在浏览器中键入http://localhost:8080/ext/docs/index.html#!/api/Ext.layout.component.Auto

就可以看到extjs的Api了，里面详细介绍了它的layout的样式，要学会查文档，这是一种能力。下面我们来看这个源码，就比较清晰了。

<script type="text/javascript">Ext.onReady( function() {//Ext.Msg.alert('ext','welcome you!');var addPanel = function(btn, event) {var n;n = tabPanel.getComponent(btn.id);if(n) {tabPanel.setActiveTab(n);return;}n = tabPanel.add( {id : btn.id,title : btn.id,html : '<iframe width=100% height=100% src=' + btn.id + ' />',//autoLoad : '',closable : 'true'});tabPanel.setActiveTab(n);}var item1 = new Ext.Panel( {title : 'Category管理',//html : '<empty panel>',cls : 'empty',items : [ new Ext.Button({id : 'Category-list',text : 'Category列表',width : '100%',listeners : {click : addPanel}}),new Ext.Button({id : 'test',text : 'Test',width : '100%',listeners : {click : addPanel}})]});var item2 = new Ext.Panel( {title : 'Accordion Item 2',html : '<empty panel>',cls : 'empty'});var item3 = new Ext.Panel( {title : 'Accordion Item 3',html : '<empty panel>',cls : 'empty'});var item4 = new Ext.Panel( {title : 'Accordion Item 4',html : '<empty panel>',cls : 'empty'});var item5 = new Ext.Panel( {title : 'Accordion Item 5',html : '<empty panel>',cls : 'empty'});var accordion = new Ext.Panel( {region : 'west',margins : '5 0 5 5',split : true,width : 210,layout : 'accordion',items : [ item1, item2, item3, item4, item5 ]});var tabPanel = new Ext.TabPanel( {region : 'center',enableTabScroll : true,deferredRender : false,activeTab : 0,items : [ {title : 'index',//html : 'aaaaaa'autoLoad : 'Category_add.jsp'} ]});var viewport = new Ext.Viewport( {layout : 'border',items : [ accordion, tabPanel ]});});</script>

上面程序Ext.onReady: Many applications are initiated with Ext.onReady which is called once the DOM is ready. This ensures all scripts have been loaded, preventing dependency issues.

所有script都被加载后，而且DOM就绪，那么Ext.onReady就被调用一次来初始化applications

而我们hello中的Ext.application: This does several things. First it creates a global variable called 'HelloExt' - all of your Application's classes (such as its Models, Views and Controllers) will reside under this single namespace, which drastically lowers the chances of colliding global variables.

首先创建了一个全局变量HelloExt，然后所有的应用类都属于这个命名空间，这大大降低了变量冲突的情况。

When the page is ready and all of your JavaScript has loaded, your Application's launch function is called, at which time you can run the code that starts your app. Usually this consists of creating a Viewport, as we do in the example above.

当这个页面就绪后并且所有的javascript都加载了，你的launch函数就可以调用，这时可以运行代码来开始你的程序，通常它用来创建一个Viewport。

现在来介绍下，function(btn, event)，它是button上面的一个事件触发函数，

查看api：

可以看到，它有三个参数，其中最后一个Object，到addListener中可以看到如下说明：

If omitted, defaults to the object which fired the event.

我们写的这个函数大致意思就是从tabPanel 中拿到一个button的id如果存在就激活它否在就添加，并激活。