ExtJs 学习笔记一初体验

最新推荐文章于 2024-05-05 12:41:38 发布

原创最新推荐文章于 2024-05-05 12:41:38 发布 · 505 阅读

CC 4.0 BY-SA版权

本文介绍了如何使用Ext JS库创建对话框、窗口、面板和多页选项卡页面，并展示了如何实现按钮事件、对话框弹窗和窗口展示。代码示例详细说明了每个组件的创建过程。

 <link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-2.2/ext-all-debug.js"></script>

     
   <div id="hello">&nbsp;</div>
    <div id="word">&nbsp;</div>
    <input id="btnAlert" type="button" value="alert框" />

        function a(){
            alert("a")
        }

        Ext.onReady(function(){
            //创建对话框
           Ext.MessageBox.alert("hello","Hello,easyjf open source");

            //创建窗口
            var win = new Ext.Window({
                title:"hello",
                width:300,
                height:200,
                html:'<h1>Hello,easyjf open source</h1>'
            });
            win.show();

            //创建面板
            var panel = new Ext.Panel({
                renderTo:"hello",//放到哪里    放到 div的id hello
                title:"hello",
                width:300,
                height:200,
                html:'Hello,easyjf open source'
            });
            //panel.render("hello"); 放到 div的id hello  可以用属性 renderTo来制定

            //创建多页选项卡页面
            new Ext.TabPanel({
                renderTo:"word",
                width:300,
                height:200,
                activeTab:0,//默认选中的选项卡页面
                items:[
                    {
                        title:"面板1",
                        html:"11111",
                        height:30
                    },{
                        title:"面板2",
                        html:"22222",
                        height:30
                    },{
                        title:"面板3",
                        html:"3333" ,
                        height:30
                    }
                ]
            });

            //创建按钮
            new Ext.Button({
                renderTo:"word",
                text:"添加",
                pressed:true,
                height:30,
                handler:Ext.emptyFn()
            });

            //为按钮添加事件
            //Ext.get("btnAlert").addListener("click",a);
            //Ext.get("btnAlert").on("click",a);
            Ext.get("btnAlert").on("click",a,this,{delay:1000}); //事件延迟处理

            //beforedestroy 事件 如果事 件响应函数返回 false，则会取消组件的销毁操作
            var win = new Ext.Window({title:"不能关闭的窗口",height:200,width:300});
            win.on("beforedestroy",function(obj){
                alert("想关闭我，这是不可能的!");
                obj.show();
                return false;
            });
            win.show();