资源描述：
《Extjs教程第二章Ext概览(2)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、第二章Ext概览（2）什么是配置对象（configobject）？如果你对CSS和JSON熟悉的话，你可以发现配置对象和它们有相似之处，因为他们几乎完全一样。配置对象的作用就是让程序语言更好地读懂数据的结构——这里所谓的程序语言就是Javascript。举个例子来看看配置在我们代码中的体现：{title:'Milton',msg:'Haveyouseenmystapler?',buttons:{yes:true,no:true,cancel:true},icon:'milton-icon',fn:function(btn){Ext.Msg.alert('YouClic
2、ked',btn);}}智力的配置可能显得过于复杂，但是一旦我们了解了它，一切就将变的十分简单和迅速。所有的Ext控件都需要配置对象，所以我们必须对它十分熟悉。配置对象是我们相当有用的朋友。这里提几点在使用配置对象时的注意事项：·配置条目（record）要被花括号包围，每一个括号中的条目都是对象的一部分——{records}；·每个条目都有属性名和属性值，其间被冒号分割，条目之间靠逗号分割——{name0:value0,name1:value1}；·条目的属性值可以是任何数据类型，包括布尔型，数组，函数以及对象——{name0:true,name1:{name2:va
3、lue2}}；·方括号代表数组——{name:[‘one’,‘two’,‘three’]}。数组中的元素也可以是包含对象、值与数字的任何东西。使用JSON格式的最大好处就是你可以通过添加配置来修改控件。不像原始的函数，配置选项现在变得毫不相干，可以任意增减。JSON是如何工作的？你可能听别人提起过eval，它就大体上来自于JSON。eval函数就是JavaScript用来解释JSON字符串的，把字符串转化为对象、数组、函数或者其它。该行动了：好了，我们了解了Ext的工作机制并对使用者进行了提问。现在我们可以采用问题的回答了。让我们在对话框中添加函数以用来表明在点击按钮
4、后执行什么相应。switch可以帮我们完成这些：fn:function(btn){switch(btn){case'yes':Ext.Msg.prompt('Milton','Whereisit?');break;case'no':Ext.Msg.alert('Milton','Imgoingtoburnthebuildingdown!');break;case'cancel':Ext.Msg.wait('Savingtablestodisk...','FileCopy');break;}}还记得前面提及的对话种类吗？我们现在介绍一些，它们帮助我们完成特定的任务，不需
5、要我们为区分任务的不同而专门进行配置。点击OK你可以得到一个提示（prompt）对话框。提示对话框的作用是让你输入单一的值，在几乎所有的用户界面中它是一个标准的元素。点击No你会得到一个警告(alert)。你一定熟悉JS中的传统的警告框。我还清楚地记得第一次使用JS的警告框的时候，我十分激动，警告的信息是：“如果你是傻子，请点击OK”。点击Cancel按钮（或者点击close按钮或者按下Esc键）你可以得到进度对话框。Ext可以控制进度对话框并通知它何时消失。但是为了简单，在本例中，我们让它一直运行。N：Ext中内置了按钮的聚焦和Tab键带来的顺序移动。一般来说OK或
6、者Yes是默认的动作。按回车键可以触发这个按钮，按Tab键可以让焦点在对话框中的按钮和其他元素上移动。点火：现在我们可以在页面中添加一些基于用户对于对话框操作的动作响应。我们将通过修改switch结构来管理Yes按钮的单击。提示窗口（prompt）可以接收第三个参数，就是点击Yes按钮后执行的函数。我们第一这个函数来检验用户输入的值是否等于“theoffice”，如果不等于，把该值写在页面的DIV标签中，如果值等于“theoffice”的话，我们在DIV标签中默认添加“DullWork”文本。在同一个DIV上，我们采用一个“Swingline”订书机作为背景图片。ca
7、se'yes':Ext.Msg.prompt('Milton','Whereisit?',function(btn,txt){if(txt.toLowerCase()=='theoffice'){Ext.get('my_id').dom.innerHTML='DullWork';}else{Ext.get('my_id').dom.innerHTML=txt;}Ext.DomHelper.applyStyles('my_id',{background:'transparenturl(images/stapler.png)50%50%no-repeat
