Ext DeskTop的使用方法简易教程及相关例子Demo(转)
生活随笔
收集整理的這篇文章主要介紹了
Ext DeskTop的使用方法简易教程及相关例子Demo(转)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Ext DeskTop的使用方法簡易教程及相關例子Demo(轉)
ExtJS 2010-12-31 10:11:15 閱讀196 評論0 ??字號：大中小?訂閱
http://qwikioffice.com/desktop-demo/
http://gsylvain35.free.fr/desktop/
http://extforumdemo.altervista.org/
http://cobnet.com/icmsBeta2/extjs/ex...top/login.html
首先為了瀏覽器兼容問題 可以把網頁頭的文檔類型定義<!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();//顯示窗體
??? }
});
//其他就是創建不同格式的窗體
總結
以上是生活随笔為你收集整理的Ext DeskTop的使用方法简易教程及相关例子Demo(转)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 枣庄市174平方米房,总价564300元
- 下一篇： 用ajax技术实现无闪烁定时刷新页面