ExtJS一些简单的测试。

最新推荐文章于 2018-02-23 11:13:16 发布

ccav4137

最新推荐文章于 2018-02-23 11:13:16 发布

阅读量167

点赞数

分类专栏： WEB前端文章标签： EXT CSS JavaScript IE HTML ViewUI

WEB前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

直接上代码。

<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Hello EXT</title>  <link rel="stylesheet" type="text/css" href="/css/ext-all.css" mce_href="css/ext-all.css" />  <mce:script type="text/javascript" src="/js/lib/ext-base.js" mce_src="js/lib/ext-base.js"></mce:script> <mce:script type="text/javascript" src="/js/lib/ext-all.js" mce_src="js/lib/ext-all.js" ></mce:script> <mce:script type="text/javascript" src="/js/lib/ext-lang-zh_CN.js" mce_src="js/lib/ext-lang-zh_CN.js"></mce:script>  <mce:script type="text/javascript" src="/js/text/text.js" mce_src="js/text/text.js"></mce:script> </head> <body> <div id='hello'></div> <div id='menu'>MENU</div> <div id='window'>WINDOW</div> </body> </html>

text.js

Ext.onReady(function(){ Ext.QuickTips.init(); // 配合qtip使用 /* 提示框 */ Ext.Msg.show({ title : '提示', msg : '测试，是否确认？', buttons : Ext.Msg.YESNOCANCEL, icon : Ext.MessageBox.WARNING }) /* panel */ var panel = new Ext.Panel({ renderTo : 'hello', title : '面板', html : 'Hello World', width : 100, height : 100 }); /* tabpanel */ var tabpanel = new Ext.TabPanel({ renderTo : 'hello', width : 100, height : 100, items : [ {title : 'panel1', html : 'panel1'}, {title : 'panel2', html : 'panel2'} ] }); /* 事件 */ MyEvent = function(){ // 定义事件名 this.addEvents('eve'); } // 定义事件动作 var todo = function(){ Ext.Msg.alert('eveToDo..!!!!!!!!!!!!!!!!'); } Ext.extend(MyEvent, Ext.util.Observable); var me = new MyEvent(); //注册 me.on('eve', todo); //触发 me.fireEvent('eve'); /* 菜单 */ MyMenu = new Ext.menu.Menu({ minWidth:200, //最小宽度 items : [ {text : 'first_menu', handler : function(){Ext.Msg.alert('click the first_menu')} },'-', {text : 'sec_menu', handler : function(){Ext.Msg.alert('click the first_menu')} }] }); var pl = Ext.get('menu'); pl.on('click', function(){MyMenu.show(this)}); Ext.getDoc().on("contextmenu",function(e){ e.stopEvent();//终止之前的事件响应，不然还会在页面上弹出讨厌的ie右键菜单 MyMenu.showAt(e.getXY()); }) /* 窗口 */ MyWindow = function(){ MyWindow.superclass.constructor.call(this, { width : 300, height : 300, title : '窗口', tools : [ { id : 'help' }, { id : 'toggle' }, { id : 'close', title : '123close', handler : function(p){Ext.getCmp(this.getId()).destroy()}, qtip : '关闭', //鼠标放上去的提示 scope: this // scope 一般和回调函数一起用，用来指定回调函数里的this }], tbar : new Ext.Toolbar({ })}); } Ext.extend(MyWindow, Ext.Window,{}); win = function(){ myWindow = new MyWindow(); myWindow.show();// show要在设置bar之前，否则报错 PS：用了我2个小时。擦 myWindow.getTopToolbar().add({text:"defButton", pressed:true}); myWindow.getTopToolbar().add(new Ext.Toolbar.TextItem("titem")); myWindow.getTopToolbar().add(new Ext.Toolbar.Spacer()); myWindow.getTopToolbar().add(new Ext.Toolbar.Separator()); myWindow.getTopToolbar().add([new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]); myWindow.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"})); var menu = new Ext.menu.Menu({ items:[{ text:"first" },"-",{ text:"second" }] }); myWindow.getTopToolbar().add(new Ext.Toolbar.SplitButton({ text:"splitbutton", menu:menu })); } Ext.get('window').on('click', function(){win.call()}); /* 提示框测试 */ var qtip = Ext.QuickTips.getQuickTip(); qtip.register({ target:"menu", text:"菜单" }); });