EXT 2.0 学习之控件介绍

最新推荐文章于 2012-02-09 19:19:15 发布

最新推荐文章于 2012-02-09 19:19:15 发布 · 169 阅读

文章标签：

#EXT #UI #Ajax #框架 #HTML

[随笔分类].NET练手随笔专栏收录该内容

2 篇文章

订阅专栏

本文介绍了EXT框架的基础使用方法，展示了Panel、MessageBox及TabPanel等控件的应用实例。EXT框架基于AjaxUI，用于创建美观的Web UI界面。

EXT 是一种基于Ajax UI 的框架,主是用作UI,设计出来的窗体非常的漂亮,在这里就不多说什么,看看基本的控件吧:

Demo1:Panel控件

Ext.onReady(function(){
    var obj = new Ext.Panel({
        width: 300,
        height: 200,
        items: [{
            title: "P1",
            height: 50
        }, {
            title: "P2",
            height: 50
        }, {
            title: "P3",
            height: 50
        }]
    });
    obj.render("cao");
});

效果如下:

Demo2:MessageBox控件

Code:

Ext.onReady(function(){
   
    Ext.MessageBox.alert("", "This is one Demo!");
    var win = new Ext.Window({
        title: "提示",
        width: 100,
        height: 110,
        html: "<input type='text' value='cao' name='myText'>"
    });
    win.show();
});

效果如下:

Demo3:TabPanel控件

code:

Ext.onReady(function(){
	 var tab = new Ext.TabPanel({
                    width: 300,
                    height: 400,
                    items: [new Ext.Panel({
                        title: "面板1",
                        height: 50,
			html:"<input tyep='text' value='明天更美好!'>"
                    }), new Ext.Panel({
                        title: "面板2",
                        height: 50,
			html:"<input type='button' name='MyButton'>"
                    }), new Ext.Panel({
                        title: "面板3",
                        height: 50
                    })]
                });
	tab.render("cao");