ExtJS[Desktop] アイコン行ラッピングのサンプルコードを実装します_extjs

ExtJS のデスクトップ デモでは、デフォルトのアイコン配置は折り返されません。これは、デスクトップ上のアイコンが多すぎる場合、アイコンがデスクトップ領域を超えると、アイコン、つまりデスクトップ領域を超えた部分が覆われてしまうことを意味します。タスクバーによってブロックされる場合は、次のコードがこの問題を解決します。

まず、desktop.js の関数を拡張します。

コードをコピー コードは次のとおりです。

initShortcut: function() {
var btnHeight = 64;
var btnPadding = 30;
var row = {index : 1,y : btnPadding};
var ボトム;
var taskBarHeight = Ext.query(".ux-taskbar")[0].clientHeight 40; (). getHeight() - taskBarHeight;
var items = Ext.query(".ux-desktop-shortcut");

for (var i = 0, len = items.length; i numberOfItems = 1;
bottom = row.y btnHeight;
if ((bodyHeight 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.y = row.y btnHeight btnPadding; }


次に、現在の js ファイルの createDataView メソッドにリスナーを追加します。




コードをコピー

コードは次のとおりです。

createDataView: function () { var me = this; return { xtype: 'dataview', overItemCls: 'x-view-over', trackOver: true, itemSelector: me.shortcutItemSelector,

ストア: me.shortcuts、

tpl: new Ext.XTemplate(me.shortcutTpl)、
リスナー:{
resize:me.initShortcut
}
}


さらに、この関数は afterRender レンダリングの最後に呼び出されます。




コードをコピー


コードは次のとおりです。

afterRender: function () {

var me = this; me.callParent(); me.el.on('contextmenu', me.onDesktopMenu, me); }