在Myeclipse中使用Extjs的示例工程

新建web工程的目录结构如上传的图片

在helloworld.html中引入相关的css和js，引用方式如下：

<linkrel="stylesheet"type="text/css"href="../extjs-4.1.1/resources/css/ext-all.css">

<scripttype="text/javascript"src="../extjs-4.1.1/bootstrap.js"></script>

<script type="text/javascript"src="../extjs-4.1.1/locale/ext-lang-zh_CN.js"></script>

然后在浏览器中输入以下地址：
http://localhost:8888/strut2Demo/html/helloworld.html

相应的运行界面如上传图片

Extjs相关术语介绍：

面板Panel：通俗的来讲就是画布，与普通的swing应用程序中的面板概念类似。

布局Layout：组件在容器中的摆放方式。

组件Component：已经预先实现好特定功能，并且在编程中能够重用的代码片段或资源。

渲染Render：含有Extjs的页面在浏览器下载完成后在浏览器中完全展现出来的过程。

窗口Window：本质就是一个层利用css进行格式化，类似windows窗口。

对话框Dialog：普通、选择、输入、自定义等类型的对话框。

3.Extjs在Myeclipse中的插件spket插件的安装：

(1)在http://www.spket.com网站中download中下载spket-1.6.23.zip。

(2)下载完成后，解压缩该文件并将features和plugins中的文件拷到myeclipse的对应目录下，重新启动myeclipse。

4.常用的几种提示窗口的用法配置：‘

Ext.MessageBox.alert(title,msg,[callbackfunction],[scope]);

说明：title弹出窗口的标题

      msg:弹出窗口显示的内容，可以使用html标签进行格式化

           callbackfunction:回调函数，点击确定按钮后的处理 scope:回调函数作用域

示例程序：

Ext.Msg.alert('提示','<font color=red style=font-weight:bold>Ex.MessageBox.alert</font>',callBack);

functioncallBack(){

       Ext.Msg.alert('回调函数','已经执行回调函数');

}

Ext.MessageBox.confirm(title,msg,[callbackfunction],[scope]);

说明：title弹出窗口的标题

      msg:弹出窗口显示的内容，可以使用html标签进行格式化

           callbackfunction:回调函数，点击确定按钮后的处理 scope:回调函数作用域

示例程序：

 Ext.MessageBox.confirm('提示','<font color=red style=font-weight:bold>Ex.MessageBox.confirm</font>',callBack);

      function callBack(id){

       Ext.Msg.alert('<div align=center>单击的按钮Id是'+id+'</div>');

      }

Ext.MessageBox.prompt(title,msg,[callbackfunction],[scope],[boolean/number multiline],[String value]);

说明：title弹出窗口的标题

      msg:弹出窗口显示的内容，可以使用html标签进行格式化

           callbackfunction:回调函数，点击确定按钮后的处理 scope:回调函数作用域

      boolean/number multiline:设置为单行或多行

    String value:设置默认值

示例程序：

Ext.MessageBox.prompt('提示','<font color=red style=font-weight:bold>Ex.MessageBox.prompt</font>',callBack,this,true,'默认值');

functioncallBack(id,msg){

 Ext.Msg.alert('<div align=center>单击的按钮Id是'+id+'<br>'+'内容是'+msg+'</div>');

}      

Ext.MessageBox.wait(msg,[title], [config]);

说明：msg:显示的信息内容

      title:提示框的标题

      config:配置进度条

示例程序:

 Ext.MessageBox.wait('<font color=red style=font-weight:bold>请等待，操作需要很长时间</font>','提示',{text:'进度条示例程序'});

Ext.MessageBox.show():可以定制自己喜欢的弹出窗口的样式

 

5.Panel面板控件元素的用法：

var obj={title:"hello",width:1024,height:768,html:'hello'};

var panel=new Ext.Panel(obj);

panel.render("hello");   

panel.render()函数里面的参数是指页面中div的id。

TabPanel面板控件元素的用法：

var panel=new Ext.TabPanel({width:600,height:400,items:[{title:'面板1',height:30,html:'No1'},{title:'面板2',height:30,html:'No2'},{title:'面板3',height:30,html:'No3'}]});

                           panel.render('hello');

其中html:’’指面板中的内容

6.对控件添加事件监听响应函数：

Ext.onReady(function (){

     var win=new Ext.Window({

        title:'不能关闭的窗口',

        height:200,

        width:300 

     });

     win.on("beforedestroy",

        function(obj){

        alert('想关闭我是不可能的');

        obj.show();

        return false;

        }

      );

      win.show();

       }

);

当然，也可以在对控件进行配置的时候添加事件监听函数：

    function b(){

      alert("hcn");

    }

    Ext.onReady(function (){

    new Ext.Panel({

       renderTo:'hello',

       title:'面板头部header',

       width:1000,       

       height:500,   

       tools:[{id:'help',handler:a}],

       html:'<h3>面板主区域</h3>',

       tbar:[{text:'顶端工具栏1',listeners:{"click":b}},{text:'顶端工具栏2',listeners:{"click":b}}],

       bbar:[{text:'底端工具栏1',listeners:{"click":b}},{text:'底端工具栏2',listeners:{"click":b}}],

       buttons:[{text:'按钮位于foot',listeners:{"click":b}}]

       }

      );

       }

    );

运行效果：

点击任何一个按钮都会弹出如下界面：

7.布局layout

Extjs的容器组件包含一个layout和layoutConfig属性，这两个属性用来设置容器的布局和布局的详细配置信息。

Border区域布局：

east\west\south\north\center

Column列布局：

Fit布局：

Form布局：

Accordion布局：

点击+/-可以使用动画，属性layoutConfig{animate：true}即可设置动画属性。

Table布局：

rowspan  colspan