ext2.2学习笔记一

liliugen

浏览: 546488 次
性别:
来自: 杭州

最近访客更多访客>>

林斌_LB

m635674608

lemon_gogogo

xvm03

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

EXT JavaScript CSS PHP 框架

Ext2.2正式发布了，刚下载体验了下。

在ext官方网上下载 www.extjs.com

EXT下载：http://extjs.com/products/extjs/download.php
完整信息：http://extjs.com/blog/2008/08/04/ext-22-released/

Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype like getXType and isXType. 下面就是这些可以使用了控件的列表了,我直接从它的帮助文档复制过来,并同时加上了它的英文原文,因为每次看到这段我总是能够想起什么,呵呵:

Ext组件主要包括一些常用组件,如表单组件,数据组件,导航组件,相信大家看名称就知道什么意思了.

xtype Class

基本组件---------------------------------------

box Ext.BoxComponent

button Ext.Button

colorpalette Ext.ColorPalette

component Ext.Component

container Ext.Container

cycle Ext.CycleButton

dataview Ext.DataView

datepicker Ext.DatePicker

editor Ext.Editor

editorgrid Ext.grid.EditorGridPanel

grid Ext.grid.GridPanel

paging Ext.PagingToolbar

panel Ext.Panel

progress Ext.ProgressBar

propertygrid Ext.grid.PropertyGrid

slider Ext.Slider

splitbutton Ext.SplitButton

statusbar Ext.StatusBar

tabpanel Ext.TabPanel

treepanel Ext.tree.TreePanel

viewport Ext.Viewport

window Ext.Window

导航组件---------------------------------------

toolbar Ext.Toolbar

tbbutton Ext.Toolbar.Button

tbfill Ext.Toolbar.Fill

tbitem Ext.Toolbar.Item

tbseparator Ext.Toolbar.Separator

tbspacer Ext.Toolbar.Spacer

tbsplit Ext.Toolbar.SplitButton

tbtext Ext.Toolbar.TextItem

窗体组件---------------------------------------

form Ext.FormPanel

checkbox Ext.form.Checkbox

combo Ext.form.ComboBox

datefield Ext.form.DateField

field Ext.form.Field

fieldset Ext.form.FieldSet

hidden Ext.form.Hidden

htmleditor Ext.form.HtmlEditor

label Ext.form.Label

numberfield Ext.form.NumberField

radio Ext.form.Radio

textarea Ext.form.TextArea

textfield Ext.form.TextField

timefield Ext.form.TimeField

trigger Ext.form.TriggerField

Ext的每个组件都是有一个指定的Xtype属性值,通过该值就可以得到该组件的类型,同时也可以根据该组件来定义一个组件例如:

{xtype:"button",id:"btnEnter",text:"确定"} //这就是定义了一个按钮的组件.

{xtype:"field",id:"txtName"} //这就是定义了一个输入框的组件.

{xtype:"field",id:"txtPwd",inputType:"password"} //这就是定义了一个密码框的组件.

当然你可以不用xtype 比如:

var btnEnter = new Ext.Button({id:"btnEnter",text:"确定"} );//这就是定义了一个按钮的组件.

var txtName = new Ext.form.Textfield({id:"txtName"} );//这就是定义了一个输入框的组件.

var txtPwd = new Ext.form.Textfield({id:"txtPwd",inputType:"password"} );//这就是定义了一个密码框的组件.

是不是很简单,在下面会解说具体的示例,包括它的基本的语法结构,同时,你需要明确,这和你在javascript里面的用法不会有不同的地方,只是有些方法Ext已经给我们封装好了,我们只要有拿来主义的精神就可以.特别一说的是:Ext的一些很实用的类都是全局的,无须new了,直接用就可以.

在下节会介绍一些Ext的很好的很实用的也很简单就能够使用的Util类.

该示例演示的是：定义一个Ext的按钮组件，点这个按钮后就会弹出一个非常精美的Ext式样的消息框．

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS</title>

</head>

<body>
    <form id="form1" runat="server">
    <div>
    <%--既然Ext是基于javascript的，所以我们要把Ext的东东包裹在javascript里面--%>
    <script type="text/javascript">
    //定义一个函数，在里面定义一个弹出按钮,当网页上出现弹出按钮后,点击就会出现hello世界了.
    function ready()
    {
        // 下面openMs就是出发事件后所执行的函数

        var openMsg = function()
        {
            //alert("good");比较下ext的弹出消息框是多么多么的令人狂喜
            Ext.Msg.alert("提示消息，可以自定义","hello世界-hello世界-hello世界-hello世界");
        };

        //定义Ext的按钮
        var 弹出按钮 = new Ext.Button
        ({
            id:"btnOpen",           //定义按钮的ID
            text:"弹出按钮",        //定义按钮的标题
            handler:openMsg,     //定义按钮出发的事件，handler后面直接写函数的名称openMsg
            //也可以写成下面这样，本质是一样的，效果也是一样的
            //handler:function(){Ext.Msg.alert("提示消息，可以自定义","hello世界-hello世界-hello世界-hello世界"); },
            renderTo:document.body//将弹出按钮渲染到窗体上
        });
    }
    Ext.onReady(ready);//里面的参数就是上面定义的函数

//onReady是使用Ext的入口,只有在上面所说的Ext框架全部加载完成后,才会执行Ext.onReady里面所包含的函数，就是说具体执行什么函数，由Ext的onReady方法指定．

//当然onReady这个Ext方法总共有三个参数，为了力求简单，这里先使用一个参数，在提高篇里面则会详细讲解．

    </script>
    </div>
    </form>
</body>

</html>

效果如：