Ext DeskTop的使用方法简易教程及相关例子Demo(转)
2010-12-31 10:11:15 阅读196 评论0 字号：大中小 订阅
首先为了浏览器兼容问题 可以把网页头的文档类型定义<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">去掉。
第一步当然是导入js和css，官方的例子是这样导入的
HTML语言: <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="css/desktop.css" /> <script type="text/javascript" src="http://www.cnblogs.com/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="http://www.cnblogs.com/ext-all-debug.js"></script> <script type="text/javascript" src="js/StartMenu.js"></script> <script type="text/javascript" src="js/TaskBar.js"></script> <script type="text/javascript" src="js/Desktop.js"></script> <script type="text/javascript" src="js/App.js"></script> <script type="text/javascript" src="js/Module.js"></script> <script type="text/javascript" src="sample.js"></script><!-例子代码，以后会在这个文件的基础上扩展->页面的body里就放一下代码
HTML语言: <body scroll="no"> <div id="x-desktop"> <a href="http://extjs.com" target="_blank" style="margin:5px; float:right;"><img src="images/powered.gif" /></a> <dl id="x-shortcuts"><!-这就是一些桌面图标-> <dt id="grid-win-shortcut"><!-这个id和后台命名对应-> <a href="#"><img src="images/s.gif" /> <div>Grid Window</div></a> </dt> <dt id="acc-win-shortcut"> <a href="#"><img src="images/s.gif" /> <div>Accordion Window</div></a> </dt> </dl> </div> <div id="ux-taskbar"><!-开始菜单-> <div id="ux-taskbar-start"></div> <div id="ux-taskbuttons-panel"></div> <div class="x-clear"></div> </div> </body>
简单看看sample.js里面有什么
JavaScript语言: MyDesktop = new Ext.app.App({ init :function(){ Ext.QuickTips.init(); }, getModules : function(){ return [ new MyDesktop.GridWindow(), new MyDesktop.TabWindow(), new MyDesktop.AccordionWindow(), new MyDesktop.BogusMenuModule(), new MyDesktop.BogusModule() ]; }, // 开始菜单的配置，把Start 改成开始 要修改TaskBar.js的内容 getStartConfig : function(){ return { //开始菜单的标题 title: 'Jack Slocum', //标题前的图片样式 iconCls: 'user', //开始菜单侧边的一些配置，结合例子自己看可以加handler指定相关方法 toolItems: [{ text:'Settings', iconCls:'settings', scope:this },'-',{ text:'Logout', iconCls:'logout', scope:this }] }; } }); MyDesktop.GridWindow = Ext.extend(Ext.app.Module, { //body中指定的id编号 id:'grid-win', init : function(){ this.launcher = { //窗体的名称 text: 'Grid Window', //窗体的图片样式 iconCls:'icon-grid', //创建窗体的方法， handler : this.createWindow, scope: this } }, createWindow : function(){ //获得desktop对象 var desktop = this.app.getDesktop(); //获得名称为grid-win的窗体 var win = desktop.getWindow('grid-win'); if(!win){//窗体为空，既没有这个窗体就创建它 //一下就是窗体配置，自己研究一下 win = desktop.createWindow({ id: 'grid-win', title:'Grid Window', width:740, height:480, iconCls: 'icon-grid', shim:false, animCollapse:false, constrainHeader:true, layout: 'fit', items: new Ext.grid.GridPanel({ border:false, ds: new Ext.data.Store({ reader: new Ext.data.ArrayReader({}, [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'} ]), data: Ext.grid.dummyData }), cm: new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), {header: "Company", width: 120, sortable: true, dataIndex: 'company'}, {header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'}, {header: "Change", width: 70, sortable: true, dataIndex: 'change'}, {header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'} ]), viewConfig: { forceFit:true }, //autoExpandColumn:'company', tbar:[{ text:'Add Something', tooltip:'Add a new row', iconCls:'add' }, '-', { text:'Options', tooltip:'Blah blah blah blaht', iconCls:'option' },'-',{ text:'Remove Something', tooltip:'Remove the selected item', iconCls:'remove' }] }) }); } win.show();//显示窗体 } }); //其他就是创建不同格式的窗体