ExtJs笔记

1.Ext简介

.Extjs是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。ExtJs可以用来开发RIA（Rich Internet Application,富互联网应用系统）的Ajax应用框架。

ExtJs是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJs用在.Net,Java.Php等各种开发语言开发的应用中



2.Ext库文件说明                                                               

.要使用extjs，那么首先要得到extjs库文件，该框架是开源的，可以直接从官方网站下载。

解压后看到文件有：

adapter: 负责将里面提供的第三方底层库（包括ext自带的底层库）映射为Ext所支持的底层库。

build ：压缩后的ext全部源码（里面分类存放）

docs ： API帮助文档

examples ：提供使用ExtJS技术做出的小实验

resources ：ExtUI资源文件目录，如CSS、图片文件都存放在这里。

source :  没有经过压缩的Ext全部的源码（里面分类存放），遵从Lesser GNU开源的协议。

Ext-all.js ： 压缩后的Ext全部源码

ext-all-debug.js ：未经压缩的Ext全部的源码（用于调试）

ext-core.js ：压缩后的Ext的核心组件，包括sources/core下的所有类。

ext-core-debug.js： 未经压缩的Ext核心组件，包括sources/core下的所有类。



3.应用ExtJs

应用extjs需要在页面中引入extjs的样式及extjs库文件。样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个：adapter/ext/ext-base.js及ext-all.js。其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。Adapter表示适配器，也就是说可以有多种适配器，因此可以把adapter/ext/ext-base.js换成adapter/jquery/ext-jquery-adapter.js,或adapter/prototype/ext-prototype-adapter.js等。

一个要使用extjs框架的页面中一般要包括下面几句：

<link rel=”stylesheet”  type=”text/css” href=”extjs/resources/css/ext-all.css”/>

<script  type=”text/javascript” src=”extjs/adapter/ext/ext-base.js”></script>

<script  type=”text/javascript” src=”extjs/ext-all.js”></script>

在ExtJs库文件及页面内容加载完后，ExtJs会执行Ext.onReady中指定的函数。一般情况下用户的ExtJs应用都是从Ext.onReady开始的，使用ExtJs应用程序的代码大致如下：

<script>

Function fn()

{

  Alert(‘ExtJs 库以加载’);

}

Ext.onReady(fn);

</script>

Fn也可以写成一个匿名函数的形式，因此上面的代码也可以改成下面的形式。

<script>

Ext.onReady(function()

{

   Alert(‘ExtJs库已加载’);

})；

</script>

4.Ext类库组成

ExtJs由一系列的类库组成，一旦页面成功加载了ExtJs库后，我们就可以在页面中通过javascript调用ExtJs的类及控件来实现需要的功能。ExtJs的类库由以下几部分组成（在source文件夹下）

底层API（core）：底层API中提供了对DOM操作.事件处理.DOM查询器等基础的功能.

控件（widgets）：是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口等。

使用工具Utils：Ext提供了很多的使用工具，可以方便我们实现如数据内容格式化、json数据编码或解码、发送Ajax请求、cookie管理、css管理等扩展功能等。



<script>

var panel=new Ext.Panel({

title:’hello’,

width:300,

height:200,

html:’<h1>Hello,easyjf open source</h1>’

});

panel.render(“hello”);

</script>

对于容器中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接在父组件的构造函数中，通过items传递数组方式来构造组件对象。

var panel=new Ext.TabPanel({

renderTo:’hello’,

width:300,

height:200,

items:[{

title:’面板’,

height:300

},{

title:’面板2’,

height:30

}]

});

或者

var panel=new Ext.TabPanel({

renderTo:’hello’,

width:300,

height:200,

items:[

new Ext.Panel({title:”面板1”,height:30}),

new Ext.Panel({title:”面板2”,height:30})

]

});

前者不但省略掉了new Ext.Panel这个构造函数，最重要前者只有在初始化TabPanel的时候，才会创建子面板，而第二种方式则在程序一开始就会创建子面板。也就是说前者是通过延长加载的方式创建组件。



5.ExtJs中的事件

1.  <script>

     function a()

{

     alert(‘some thing’);

}

Ext.onReady(function(){

  // Ext.get("btnAlert").addListener("click",a);

  //Ext.get("btnAlert").on("click",a);

  Ext.get("btnAlert").on("click",a,this,{delay:2000});  //点击按钮2000毫秒也就是2秒后会弹出提示信息框});

  </script>

  <input type=”button”  value=”alert”  id=”btnAlert”>



2.<script>

Ext.onReady(function(){

  var win=new Ext.Window({

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

     height:200,

     width:300,

     listeners:{"beforedestroy":function(obj){

        alert("想关闭我，这是不可能的");

        obj.show();

        return false;

     }}

  });

//  win.on("beforedestroy",function(obj){

//    alert("想关闭我，这是不可能的");

//  obj.show();

//  return false;

//  });

  win.show();

});

</script>

3. <script>

Ext.onReady(function(){

function handlerClick(e)  //e就是一个EventObject对象

{

  e.preventDefault();

  var target=e.getTarget();

  alert(e.getCharCode()+"   "+e.getXY());

}

Ext.get("myDiv").on("click",handlerClick);

});

</script>



6.ExtJs核心组件

1.Component也就是组件，Ext中使用Ext.Component类来定义组件，其它具体的组件及控件都是继承该类实现。Component定义了一个标准的Ext组件生命周期管理：创建、渲染、销毁等。另外还包含了所有组件公有的一些基本属性及行为比如显示或隐藏、启用或禁用等。可以通过Ext.getCmp方法来获得一个组件。所有的组件都可以放到Ext.Container中，并自动支持延迟渲染。Ext中所有需要放到一个layout中渲染显示的可视化部件需要继承Component或其子类。

所有component都有一个Ext组件类型值，即xtype属性，可以使用getXType方法得到组件的xtype值，isXType是用来判断一个组件是否属于指定的类型。



2.BoxComponent，父类是Ext.Component，所有盒状组件的基类，所有具有边界属性的组件的基类。所有的容器类都继承了Ext.BoxComponent

属性： autoHeight 自动高度适应，设置为true则使用样式height：‘auto’，否则为固定的高度，默认为false

       autoWidth 自动宽度适应，设置为true则使用样式width：‘auto’， 否则为固定的高度，默认为false



3.Container 容器 父类Ext.BoxComponent 。是Ext中所有具有容器功能的组件的基类。容器组件包含处理子项的一些基本行为，负责添加、插入、删除这些子项。容器提供布局支持功能，可以通过布局来可视化渲染容器中的子组件。这个类是用于共其它容器类继承，一般不直接使用new关键字创建这个类的实例。



7 使用面板

面板Panel是ExtJs控件的基础，很多高级控件都是在面板的基础上扩展的，还有其它大多数控件也都直接或间接与它有关系。应用程序的界面一般情况下是由一个一个的面板通过不同的组织方式形成。

面板组成部分：一个顶部工具栏（tbar），一个底部工具栏（bbar），面板头部（header），面板尾部（bottom），面板主区域（body）几个部分组成。  面板的类名为Ext.Panel，其xtype为panel. 如例子：panel2.html



属性： autoScroll     是否自动添加滚动条。为true则在面板的body元素中使用样式 overflow：‘auto‘，

                    从而在学要的时候会显示一个滚动条。为false则表示不显示滚动条，会导致截断多余的内容，默认值为false。

       hideCollapseTool   在collapsible为true时，是否显示关闭/开启面板的按钮，默认为false



7.1工具栏Toolbar

面板中可以有工具栏，工具栏可以位于面板的顶部和底部，Ext中的工具栏是由Ext.Toolbar类表示的。是其它工具栏的基类。工具栏上可以放按钮、文本、分隔符等内容。可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。还可以在顶部或底部工具栏中加入各种工具栏选项。（eg。panel2.html）



Ext中的工具栏中的项目主要由下面的类定义：

Ext.Toolbar.Button--------按钮，xtype为tbbutton

Ext.Toolbar.TextItem---------文本，xtype为tbtext

Ext.Toolbar.Fill------------填充区域，xtype为tbfill

Ext.Toolbar.Separator---------分隔符，xtype为tbseparator

Ext.Toolbar.Spacer-----------一个空格，xtype为tbspacer

Ext.Toolbar.SplitButton--------Split按钮，xtype为tbsplit

7.2选择面板TabPanel

选择面板也就是指包含Tab的面板，一个面板中会有多个tab，同一时刻活动tab只能是一个。选项面板在Ext中由类Ext.TabPanel来定义，该类直接继承自Panel，因此他实际上也是一个面板。Ext并没有针对选项面板中的Tab专门定义一个新的类，每一个tab其实也就是普通的Panel而已。（eg。tabPanel.html）

7.3视图区ViewPort

在前面的实例中，为了显示一个面板，我们需要在页面上添加一个<div>，然后把Ext控件渲染到这个div上。ViewPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例。

eg。Ext.onReady(function(){

new Ext.ViewPort({

  enableTabScroll:true,

  layout:”fit”,

  items:[{title:”面板”,

html:””,

bbar:[{text:”button1”},

{text:”button2”}]

}]

});

});

ViewPort不需要在指定renderTo，而我们也看到ViewPort确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改变。

ViewPort主要用于程序的主页面，可以通过使用不同的布局来搭建不同风格的应用程序主界面，在ViewPort上常用的布局有fit，border等。（eg。viewPort.html）

8 窗口、对话框及提示框

8.1窗口Window

8.1.1窗口基本应用

ExtJs中窗口是由Ext.Window类定义，该类继承自Ext.Panel，因此窗口其实是一种特殊的面板Panel，窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。（eg、window.html）

8.1.2窗口分组

窗口是分组进行管理的，可以对一组窗口进行操作，默认情况下的窗口都是默认组Ext.WindowMgr中。窗口分组由类Ext.WindowGroup定义，该类包括bringToFrong、getActive、hideAll、sendToBack等方法用来对分组中的窗口进行的操作。（eg、windowGroup.html）

8.2对话框MessageBox

8.2.1对话框基本应用

Ext的对话框都封装在Ext.MessageBox类，该类还有一个简写形式即Ext.Msg，可以直接通过Ext.MessageBox或Ext.Msg类直接调用相应的对话框方法来显示漂亮的Ext对话框。消息框MessageBox是异步的，不同于正常的JavaScript中的alert方法（将中断浏览器的操作）。显示一个MessageBox的时候不会影响其他代码的执行，因此，如果需要用户在对消息框反馈之后执行一些代码，就必须要使用回调函数。

1.   Ext.MessageBox.alert(“请注意”, ” 这是ExtJs的提示框 “);

2.   Ext.MessageBox.confirm(“请确认”,”是否真的要删除指定的内容”,function(button,text){

if(button==”yes”)

{alert(“成功删除”);}

});

3.  Ext.MessageBox.prompt(“输入提示框”,”请输入你的新年愿望:”,function(button,text){

if(button==”yes”)

{alert(“你的新年愿望是：”+text);}

else

{alert(“你放弃了操作”);}

});

在实际应用中，可以直接使用MessageBox的show方法来显示自定义的对话框。eg、

function save(button)

{

  if(button==”yes”)

{

//执行数据保存操作

}

else  if(button==”no”)

{

  //不保存数据

}

else

{

  //取消当前操作

}

}

Ext.MessageBox.show({

   title:’保存数据’,

   msg:’你已经作了一些数据操作，是否要保存当前内容的修改?’,

   buttons:Ext.Msg.YESNOCANCEL,

   fn:save,

   icon:Ext.MessageBox.QUESTION

});

8.2.2提示框Tip

提示框是指当我们把鼠标移动并停留到页面上的某一个元素上时，在页面上会出现一个对该元素说明并悬浮在屏幕上的提示区域，当鼠标移出该元素，则该提示框会自动隐藏。

Tip继承Panel，也就是说ExtJs中使用Panel来显示提示框信息。

eg、Ext.onReady(function(){

var tip=new Ext.Tip({

html:”这是一个简单的提示框”

});

var el=Ext.get(“hello”);

el.on({

“mouseover”:function(){

  tip.showBy(el);

},

“mouseout”:function(){

  tip.hide();

}

});

});

<div id=”hello”>提示框</div>



ExtJs在Tip类的基础上，提供了专门用于元素提示信息的ToopTip以及在页面中进行快速提示的QuickTip等类。直接使用ToopTip，则不需要自己在元素的mouseover及mouseout事件响应函数中手动处理信息提示框的隐藏及显示。

Ext.onReady(function(){

var el=Ext.get(“hello”);

var tip=new Ext.ToolTip({

html:”这是一个简单的提示框”,

target:el

});

});

…………….

9         布局layout

9.1基本应用

所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext的所有容器组件都支持布局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排序、组合及渲染方式等。

ExtJs的布局基类为Ext.layout.ContainerLayout，其它布局都继承该类。ExtJs的容器组件包含一个layout及layoutConfig配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息。如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局,有的布局学要layoutConfig配置，有的则不需要layoutConfig配置。

Ext.onReady(function(){

new Ext.Panel({

  renderTo:”hello”,

  width:400,

  height:200,

  layout:”column”,

  items:[{columnWidth:.5,   //width:100  可用来指定具体的宽度

title:”面板1”},

{columnWidth:.5,

title:”面板2”

}]

});

});

Ext中的一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我们在使用这些组件的时候，不能给这些容器组件再指定另外的布局。

9.2    Border区域布局

Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分为“东”、“南”、“西”、“北”、“中”五块区域，分别由east , south , west , north , center来表示，在往容器中添加子元素的时候，我们只需要通过region配置选项来指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。（eg、viewPort.html）

9.3    Column列布局（例子 和上面的一样）

9.4    Fit布局

Fit布局由类Ext.layout.FitLayout定义，名称为fit。Fit布局表示容器组件中的子元素大小与容器组件大小完全一样大，也就是说子元素布满整个容器组件。如果容器组件中有多个子元素，则只会显示一个元素。

Ext.onReady(function(){

new Ext.Panel({

renderTo:”hello”,

title:”容器组件”,

layout:”fit”,

width:500,

height:100,

items:[{title:”子元素1”,html:”这是子元素1中的内容”},

{title:”子元素2”,html:”这是子元素2 中的内容”}

]

});

});

9.5 Form布局

9.6 Accordion布局

Accordion布局由类Ext.layout.Accordion定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素呈可折叠的形式。

指定：layout：”accordion”,

      layoutConfig:{animate:true}//表示在执行展开折叠时是否应用动画效果。

9.7 Card 布局

Card布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。(eg. cardPanel.html)

10 使用表格控件Grid

ExtJs中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。

表格由类Ext.grid.GridPanel，继承自Panel，其xtype为grid。ExtJs中，表格Grid必须包含列定义信息，并指定表格的数据存储器store。表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStore、GroupingStore等。

var sm=new Ext.grid.CheckboxSelectionModel();//checkbox定义



    var cm=new Ext.grid.ColumnModel([ 

    new Ext.grid.RowNumberer(),  

    sm,                         //checkbox引用

    {header:'编号(id)',dataIndex:'id',sortable:true},

    {header:'用户名(username)',dataIndex:'username',sortable:true},

    {header:'地址(address)',dataIndex:'address',sortable:true},

    {header:'邮件(email)',dataIndex:'email',sortable:true},

    {header:'邮政编码(zip)',dataIndex:'zip',sortable:true},

    {header:'电话(telephone)',dataIndex:'telephone',sortable:true},

    {header:'手机(mobile)',dataIndex:'mobile',sortable:true},

    {header:'姓名(name)',dataIndex:'name',sortable:true},

    {header:'权限(privilege)',dataIndex:'privilege',renderer:renderPri,sortable:true},

    {header:'注册日期(createDate)',dataIndex:'createDate',width:160,sortable:true},

    {header:'组号(team)',dataIndex:'team',width:160,sortable:true}

   ]);

   var ds=new Ext.data.Store({  //转换数据与表中的列一一对应来填充    proxy:newExt.data.HttpProxy({url:'manageruser.do?cmd=queryAllUser'}),

    reader:new Ext.data.JsonReader({

     root:'user',

     totalProperty:'counts',

     fields:['id','username','address','email','zip','telephone','mobile','name','privilege','createDate','team']

   })

   });

   

   var grid=new Ext.grid.GridPanel({ 

    ds:ds,//所要显示的数据

    cm:cm,//表格的样式即表格的列

    sm:sm,//checkbox

    height:220,

    loadMask:{msg:"数据加载中,请稍候..."},

    bbar:new Ext.PagingToolbar({

       pageSize:30,

       store:ds,

       displayInfo:true,

       displayMsg:'显示第{0}条到{1}条记录,一共{2}条',

       emptyMsg:"没有记录"

    })

});

ds.load();

数据存储器Store负责把各种各样的数据（如二维数组，Json对象数组，xml文本）等转换成ExtJs的数据记录集Record，var grid= new Ext.grid.GridPanel({})；负责创建一个表格，表格包含的列由columns配置属性来表述或则cm，columns是一数组，每一行数据元素描述表格的一列信息，表格的列信息包含列头显示文本（header），对应的记录集字段（dataIndex），是否可以排序（sorable），列的渲染函数（renderer），宽度（width），格式化信息（format）等。

ds是用来加载数据的。

10.1表格数据的选择

我们可以在程序中通过调用GridPanel的getSelectionModel方法来得到表格选择模型对象，该对象包含了表格的选择信息，该方法返回的值为RowSelectionModel或CellSelectionModel类型的对象。

function showSel()

{

  var rows=grid.getSelectionModel().getSelections();

  if(rows)

{

alert(“一共选择了”+rows.length+“行数据”)；

for(var i=0;i<++;i<rows.length)

{

alert(rows[i].get(“name”));

}

}

}

//var cel=grid.getSelectionModel().getSelectedCell();

//if(cel)

//{

//  var h=grid.getColumnModel().getDataIndex(cell[1]);

//  var o=grid.getStore().getAt(cel[0]).get(h);

//  alert(o);

//}

10.2可编辑的表格EditorGridPanel

例子（callcenter无线呼叫系统）

11 使用表单Form

11.1 表单面盘FormPanel

对于传统的b/s应用来说，数据录入元素是放在表单<form>标签里面的。而对于ExtJs应用来说，则可以直接使用FormPanel控件来存放表单中的元素。FormPanel继承自Panel，在Panel的基础上提供与表单相关的各种特性，比如可以指定表单提交的url、指定表单提交方式、是否是二进制提交等；另为FormPanel固定使用form布局，form布局也就是专门用户组织包含输入元素的布局。

Ext.onReady(function(){

var form=new Ext.form.FormPanel({

renderTo:”hello”,

title:”用户信息录入框”,

height:200,

width:300,

labelWidth:60,

labelAlign:”right”,

frame:true,

defaults:{xtype:”textfield”,width:180},

items:[

{name:”username”,fieldLabel:”姓名”},

{name:”password”,fieldLabel:”密码”,inputType:”password”},

{name:”email”,fieldLabel:”电子邮件”},

{xtype:”textarea”,name:”intro”,fieldLabel:”简介”}

],

buttons:[{text:”提交”,

handler:function(){

f.form.submit({

   waitTitle:”请稍候”,

   waitMsg:”正在提交表单数据，请稍候……”

});

}

},{text:”取消”,

handler:function()

{

  f.form.reset();

}

}]

})

});

上面的代码中，使用new Ext.form.FormPanel来创建表单面板，父类Ext.Panel。通过labelWidth来指定表单中字段标签的宽度，labelAlign来指定字段标签的对齐方式，在defaults中指定该容器中所有子元素默认类型都是textfield，也就是录入文本框。在items定义的子元素中，一共包含三个textfield元素以及一个textarea元素，这些元素都包含一个name属性，相当于传统<input>标签中的name属性，fieldLabel属性用来指定字段标签。

表单面板FormPanel包含一个form属性，该属性是一个Ext.form.BasicForm类型的对象，可以直接访问，也可以通过getForm()方法得到，所有Ext.form.BasicForm的配置选项都可以直接在FormPanel中使用。

FormPanel内部使用Ext.layout.FormLayout作为布局，该布局需要表单字段及字段标签设置正确。要在FormPanel中使用其他布局样式，需要在FormPanel中嵌入一个Panel或者其它可以使用布局功能的容器。

11.2 FieldSet

有时候，一个表单中会包含许多的元素，如果全部按某一种方式堆在一个表单中会显得比较乱。因此，ExtJs中提供了一个FieldSet控件，名称（或xtype）为fieldset，可以用来组织表单中的字段元素，一个FieldSet也就是一个字段集合，可以存放多个字段。

FieldSet类继承自Panel，默认的布局为form，与FormPanel不同的是，可以通过layout来指定FieldSet使用其他的布局来管理其中的元素。（eg、fieldSetForm.html）

11.3 TextField

在表单中录入元素中，最简单的就是TextField，用来取代传统的文本框,可以在TextField中录入文本信息。TextField由Ext.form.TextField类定义，组件的xtype为textfield。提供了文本信息录入相关的各种验证、提示、选择等功能。

{

xtype:”textfield”,

name:”username”,

fieldLabel:”姓名”,

allowBlank:false,

maxLength:5,

maxLengthText:”姓名的长度不能大于5!”,

minLength:2,

minLengthText:”姓名的长度不能小于2!”,

blankText:”该项必须填写”,

selectOnFocus:true  //当文本框获得焦点时，选中文本框中当前的文本。

}

配置参数：regex 类型为RegExp

一个javascript正则表达式，用于在验证的时候检查输入的值是否与该正则表达式匹配。正则表达式验证只有在其它的验证器都执行完并成功通过后才执行，当正则验证失败时，将会把字段设置成无效状态，并显示regexText作为验证提示信息。



regexText 类型为String

指定当正则表达式验证未通过时显示的验证信息，默认值为“”。



validator类型为Function

客户端验证功能将在字段验证过程执行（默认情况设置为空）。如果有效的话，它将在所有基本验证返回true的状况下执行，并且当前字段值将会传递给客户端验证方法。如果通过验证，boolean型值将会被返回，否则返回错误提示信息。

11.4 CheckBox 及 Radio

{

xtype:”checkbox”,

name:”chk”,

fieldLabel:”选择性别”,

boxLabel:”男”,

checked:true

}

使用复选框CheckBox的时候，可以直接通过其setValue方法来改变复选框的选择状态，比如下面的代码都可以把复选框变成未选状态：

f.form.findField(“chk”).setValue(false);

f.form.findField(“chk”).setValue(0);

f.form.findField(“chk”).setValue(“off”);



{

xtype:”radio”,

name:”rad”,

fieldLabel:”选择性别”,

boxLabel:”男”

}

在CheckBox的基础上，单选框还提供了一个getGroupValue方法，可以用来获得该单选框所属组中的选中值。

11.5 ComboBox

列表选择数据相当于html中的<select>标签。

{

xtype:”combo”,

name:”country”,

fieldLabel:”选择国际”,

transform:”countrys”,

lazyRender:true,

triggerAction:”all”

}

在html页面中加入一个传统的<select>标签，id为countrys，在这个<select>标签中包含了下拉框中的选项信息，代码如下：

<select id=”countrys”>

<option value=”1”>中国</option>

<option value=”2”>美国</option>

<option value=”3”>英国</option>

<option value=”4”>日本</option>

<option value=”5”>意大利</option>

<option value=”6”>巴西</option>

<option value=”7”>巴拉圭</option>

</select>

上面的两段代码配置在一起，可以在表单中生成一个下拉列表框，该列表框除了外观变漂亮了以外，还自动支持选项自动过滤功能，只要在文本框中输入一个“巴”字，则在下拉列表中会自动把以“巴”开头的“巴西”、“巴拉圭”等显示出来。

要从其它数据文件或内容中加载下拉列表框的数据，这就需要使用到数据存储器Store，通过前面数据存储器一章中的介绍我们知道，数据存储器Store可以处理内存数组、xml及JSON格式的数据等。

{

xtype:”combo”,

name:”country”,

fieldLabel:” 选择国际”,

displayField:”name”,

valueField:”code”,

store:store,

typeAhead:true,

mode:’local’,         //mode:’remote’默认为remote

triggerAction:’all’,

emptyText:’请选择…’,

selectOnFocus:true

}

其中displayField表示列表框中显示的字段名称，valueField表示选项值得字段名称，store表示该控件使用的存储器，下拉列表项中的选项值从store中得到，mode为local表示从本地加载数据，不需要与服务器交互，这里用到的store为SimpleStore，定义store及相关数据的代码如下：

var countrys=[[“中国”,1],[“美国”,2],[“英国”,3],[“日本”,4],[“意大利”,5],[“巴西”,6],[“巴拉圭”,7]];

var store=new Ext.data.SimpleStore({

fields:[‘name’,’code’],

data:countrys

});

下拉列表框中的数据也可以存放在服务器端，当用户要选择列表框的数据时才加载更新表框中的数据，这里可以使用支持异步加载的JsonStore或自定义Store等。

{

xtype:”combo”,

name:”country”,

fieldLabel:” 选择国际”,

displayField:”name”,

valueField:”code”,

store:store,

typeAhead:true,

triggerAction:’all’,

emptyText:’请选择…’,

selectOnFocus:true,

pageSize:7

}

存储器store的定义

var store=new Ext.data.JsonStore({

url:”data.js”,

fields:[‘name’,’code’],

totalProperty:”total”,

root:”result”,

id:”name”

});

data.js文件中的内容：

{

total:20,

result:[

{name: “中国”,code:”1”},

{name:“美国”,code:”2”}

。。。

]

}

11.6 DateField

录入日期的控件

{

xtype:”datefield”,

name:”bornDate”,

fieldLabel:”出生日期”,

width:150,

format:”Y年n月j日”

}

11.7  TimeField

录入时间的控件

{

xtype:”timefield”,

name:”ontime”,

fieldLabel:”下班时间”,

width:150,

increment:30,//       指定下拉列表中时间选择项增量为30分钟，默认值为15分钟。

format:”G点i分”

}

11.8  HtmlEditor

{

xtype:”htmleditor”,

name:”intro”,

fieldLabel:”简介”,

width:500,

//enableFont:false,

//enableFontSize:false,

//enableSourceEdit:false,

//enableLists:false

}

使用HtmlEditor控件时，可以在初始化的时候指定在最顶上的工具栏中显示哪些控件。

11.9  其它字段Field组件

ExtJs还提供了代替传统隐藏域的Hidden组件、用来录入数字信息的NumberField组件等其它字段组件。

{

xtype:”hidden”,

name:”h”,

fieldLabel:”隐藏域”

}



{

xtype:”numberfield”,

name:”times”,

fieldLabel:”迟到次数”,

allowDecimals:true,  //是否允许包含小数点值，默认为true

allowNegative:false, //是否允许负数，默认为true

decimalPrecision:2,  //表示小数位数的精度

minValue:10,

maxValue:100

}

11.10  表单动作

11.10.1  表单提交动作submit

f.form.submit({

waitTitle:”请稍候”,

waitMsg:”正在提交表单数据，请稍候……”,

url:”person.html”,

method:”POST”,

success:function(action,form)

{

alert(“提交成功”);

},

failure:function(action,form)

{

alert(“表单提交失败”);

}

});

在表单动作实现中，ExtJs要求服务器端返回类似下面格式的Json数据：

{

success:false,

errors:{

username:”用户名不能为空”,

times:”迟到次数必须为数字”

}

}

12     菜单

菜单