EXT 2.0 学习之控件介绍

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");

 

效果如下:

在这里只是简单的介绍了,这个做WEB UI 是相当的不错;目前有的OA项目中就在用这个东西哟

目前我还对这个东西不是很了解,能力有限只能为大家介绍这一点,请等我的下一篇文章出现吧