ExtJS[Desktop]實(shí)現(xiàn)圖標(biāo)換行示例代碼
更新時間：2013年11月17日 16:53:47 作者：
ExtJS中的desktop的demo中，默認(rèn)的圖標(biāo)排列是不換行的，以下代碼就是為了解決這一問題的，需要的朋友可以了解下
ExtJS中的desktop的demo中，默認(rèn)的圖標(biāo)排列是不換行的，這就造成了如果桌面上的圖標(biāo)過多的話，當(dāng)超出桌面區(qū)域，會造成圖標(biāo)遮蓋，即超出桌面區(qū)域的部分會被任務(wù)欄遮擋，以下代碼就是為了解決這一問題的。
首先，在desktop.js中擴(kuò)展一個函數(shù)。
initShortcut : function() {
var btnHeight = 64;
var btnWidth = 64;
var btnPadding = 30;
var col = {index : 1,x : btnPadding};
var row = {index : 1,y : btnPadding};
var bottom;
var numberOfItems = 0;
var taskBarHeight = Ext.query(".ux-taskbar")[0].clientHeight + 40;
var bodyHeight = Ext.getBody().getHeight() - taskBarHeight;
var items = Ext.query(".ux-desktop-shortcut");
for (var i = 0, len = items.length; i < len; i++) {
numberOfItems += 1;
bottom = row.y + btnHeight;
if (((bodyHeight < bottom) ? true : false) && bottom > (btnHeight + btnPadding)) {
numberOfItems = 0;
col = {index : col.index++,x : col.x + btnWidth + btnPadding};
row = {index : 1,y : btnPadding};
}
Ext.fly(items[i]).setXY([col.x, row.y]);
row.index++;
row.y = row.y + btnHeight + btnPadding;
}
}
然后在當(dāng)前的js文件中的createDataView方法中，添加一個監(jiān)聽器。
createDataView: function () {
var me = this;
return {
xtype: 'dataview',
overItemCls: 'x-view-over',
trackOver: true,
itemSelector: me.shortcutItemSelector,
store: me.shortcuts,
tpl: new Ext.XTemplate(me.shortcutTpl),
listeners:{
resize:me.initShortcut
}
};
}
再者，在afterRender渲染結(jié)束時調(diào)用函數(shù)。
afterRender: function () {
var me = this;
me.callParent();
me.el.on('contextmenu', me.onDesktopMenu, me);
Ext.Function.defer(me.initShortcut,1);
}
首先，在desktop.js中擴(kuò)展一個函數(shù)。
復(fù)制代碼 代碼如下:
initShortcut : function() {
var btnHeight = 64;
var btnWidth = 64;
var btnPadding = 30;
var col = {index : 1,x : btnPadding};
var row = {index : 1,y : btnPadding};
var bottom;
var numberOfItems = 0;
var taskBarHeight = Ext.query(".ux-taskbar")[0].clientHeight + 40;
var bodyHeight = Ext.getBody().getHeight() - taskBarHeight;
var items = Ext.query(".ux-desktop-shortcut");
for (var i = 0, len = items.length; i < len; i++) {
numberOfItems += 1;
bottom = row.y + btnHeight;
if (((bodyHeight < bottom) ? true : false) && bottom > (btnHeight + btnPadding)) {
numberOfItems = 0;
col = {index : col.index++,x : col.x + btnWidth + btnPadding};
row = {index : 1,y : btnPadding};
}
Ext.fly(items[i]).setXY([col.x, row.y]);
row.index++;
row.y = row.y + btnHeight + btnPadding;
}
}
然后在當(dāng)前的js文件中的createDataView方法中，添加一個監(jiān)聽器。
復(fù)制代碼 代碼如下:
createDataView: function () {
var me = this;
return {
xtype: 'dataview',
overItemCls: 'x-view-over',
trackOver: true,
itemSelector: me.shortcutItemSelector,
store: me.shortcuts,
tpl: new Ext.XTemplate(me.shortcutTpl),
listeners:{
resize:me.initShortcut
}
};
}
再者，在afterRender渲染結(jié)束時調(diào)用函數(shù)。
復(fù)制代碼 代碼如下:
afterRender: function () {
var me = this;
me.callParent();
me.el.on('contextmenu', me.onDesktopMenu, me);
Ext.Function.defer(me.initShortcut,1);
}
您可能感興趣的文章:
- extjs圖表繪制之條形圖實(shí)現(xiàn)方法分析
- extjs4圖表繪制之折線圖實(shí)現(xiàn)方法分析
- Extjs grid添加一個圖片狀態(tài)或者按鈕的方法
- 解決Extjs上傳圖片無法預(yù)覽的解決方法
- ExtJs之帶圖片的下拉列表框插件
- ExtJs使用總結(jié)(非常詳細(xì))
- 學(xué)習(xí)ExtJS Window常用方法
- Extjs學(xué)習(xí)筆記之五 一個小細(xì)節(jié)renderTo和applyTo的區(qū)別
- Extjs中常用表單介紹與應(yīng)用
- ExtJS 簡介 讓你知道extjs是什么
- ExtJS下grid的一些屬性說明
- extjs圖形繪制之餅圖實(shí)現(xiàn)方法分析
相關(guān)文章
Extjs4中Form的使用之本地hiddenfield實(shí)例，具體實(shí)現(xiàn)如下，需要的朋友不要錯過2013-11-11
ExtJS4的requires是新增的機(jī)制，主要是實(shí)現(xiàn)異步加載機(jī)制，在下面的文章總將為大家介紹下ExtJS4中的requires使用方法，需要的朋友不要錯過2013-12-12
所謂布局就是指容器組件中子元素的分布、排列組合方式。Ext的所有容器組件都支持而局操作，每一個容器都會有一個對應(yīng)的布局，布局負(fù)責(zé)管理容器組件中子元素的排列、組合及渲染方式等。2009-04-04
由后臺返回的json的日期時間格式中，往往都是 類似 "\/Date(1309200300000)\/"的日期時間格式，結(jié)果導(dǎo)致無法正常在TimeField中顯示2011-06-06
ExtJS是一個MVVM結(jié)構(gòu)的JavaScript框架,在處理表格表單方面則是它的拿手好戲,這里整理了基本的JavaScript的ExtJS框架中表格的編寫教程2016-05-05
入門基礎(chǔ)學(xué)習(xí) ExtJS筆記（一）
這段時間手中項(xiàng)目已經(jīng)完成，空閑時間較多。開始了學(xué)習(xí)ExtJs之旅。2010-11-11
下面我講一下在使用Extjs遇到的一個問題，希望各位朋友看到這篇隨筆以后，能給我指教，這里我先謝過了！2010-01-01
ComboBox 和 DateField 在IE下消失的解決方法
開發(fā)過程中卻遇到了在 IE 瀏覽器中放大、縮小窗口大小會導(dǎo)致這兩個組件消失不見不報任何錯誤且在其他瀏覽器正常，通過本文你將學(xué)會如何解決此問題2013-08-08
這篇文章主要介紹了ExtJS判斷IE瀏覽器類型的方法,需要的朋友可以參考下2014-02-02
導(dǎo)入extjs、jquery 文件時$使用沖突問題解決方法
在html頁面中，沒有導(dǎo)入jquery文件時，可以正常保存，而導(dǎo)入jquery文件后，則不能不存了，發(fā)現(xiàn)導(dǎo)入的jquery文件和現(xiàn)有的extjs文件沖突了2014-01-01