如何在ext.js桌面/面板中插入按钮或某些元素
how to insert a button or some element into ext.js desktop/Panel?
我想在桌面上放一些按钮，这不是我的代码，来自我在国外的朋友。我试着把它放在这个代码的每一个地方，但它并不是一个按钮。
它有很多关于这个桌面视图的代码，请帮助我了解把它放在哪里。
Ext.define("TEST.view.desktop.Desktop", {
extend: "Ext.panel.Panel",
alias: "widget.TEST",
uses: [
"Ext.util.MixedCollection",
"Ext.menu.Menu",
"Ext.view.View", // dataview
"Ext.window.Window",
"TEST.view.desktop.TaskBar",
// "Ext.ux.desktop.Wallpaper"
"TEST.view.desktop.Toolbar"
],
requires: [
"TEST.view.desktop.DataprovidersDataView"
],
activeWindowCls: "ux-desktop-active-win",
inactiveWindowCls: "ux-desktop-inactive-win",
lastActiveWindow: null,
bodyCls: "ux-desktop",
border: false,
html: " ",
layout: "fit",
xTickSize: 1,
yTickSize: 1,
/**
* @cfg {Array|Store} shortcuts
* The items to add to the DataView. This can be a {@link Ext.data.Store Store} or a
* simple array. Items should minimally provide the fields in the
* {@link Ext.ux.desktop.ShorcutModel ShortcutModel}.
*/
shortcuts: null,
/**
* @cfg {String} shortcutItemSelector
* This property is passed to the DataView for the desktop to select shortcut items.
* If the {@link #shortcutTpl} is modified, this will probably need to be modified as
* well.
*/
shortcutItemSelector: "div.ux-desktop-shortcut",
/**
* @cfg {Object} toolbarConfig
* The config object for the toolbar.
*/
toolbarConfig: null,
/**
* @cfg {Object} taskbarConfig
* The config object for the TaskBar.
*/
taskbarConfig: null,
windowMenu: null,
initComponent: function() {
var me = this;
me.windowMenu = new Ext.menu.Menu(me.createWindowMenu());
me.bbar = me.taskbar = new TEST.view.desktop.TaskBar(me.taskbarConfig);
me.taskbar.windowMenu = me.windowMenu;
debugger;
me.tbar = me.toolbar = new TEST.view.desktop.Toolbar;
me.windows = new Ext.util.MixedCollection();
me.contextMenu = new Ext.menu.Menu(me.createDesktopMenu());
me.items = [
// { xtype: "wallpaper", id: me.id+"_wallpaper" },
{
xtype: "TESTdataprovidersdataview",
}];
me.callParent();
me.shortcutsView = me.items.getAt(0);
// var wallpaper = me.wallpaper;
// me.wallpaper = me.items.getAt(0);
// if (wallpaper) {
// me.setWallpaper(wallpaper, me.wallpaperStretch);
// }
},
afterRender: function() {
var me = this;
me.callParent();
me.el.on("contextmenu", me.onDesktopMenu, me);
},
//------------------------------------------------------
// Overrideable configuration creation methods
createDesktopMenu: function() {
var me = this, ret = {
items: me.contextMenuItems || []
};
if (ret.items.length) {
ret.items.push("-");
}
ret.items.push(
{ text: "Tile", handler: me.tileWindows, scope: me, minWindows: 1 },
{ text: "Show Toolbar", xtype: 'button', scope: me, minWindows: 1 },
{ text: "Cascade-test", handler: me.cascadeWindows, scope: me, minWindows: 1 });
return ret;
},
createWindowMenu: function() {
var me = this;
return {
defaultAlign: "br-tr",
items: [
{ text: "Restore", handler: me.onWindowMenuRestore, scope: me },
{ text: "Minimize", handler: me.onWindowMenuMinimize, scope: me },
{ text: "Maximize", handler: me.onWindowMenuMaximize, scope: me },
"-",
{ text: "Close", handler: me.onWindowMenuClose, scope: me }
],
listeners: {
beforeshow: me.onWindowMenuBeforeShow,
hide: me.onWindowMenuHide,
scope: me
}
};
},
// Event handler methods
onDesktopMenu: function(e) {
var me = this, menu = me.contextMenu;
e.stopEvent();
if (!menu.rendered) {
menu.on("beforeshow", me.onDesktopMenuBeforeShow, me);
}
menu.showAt(e.getXY());
menu.doConstrain();
},
onDesktopMenuBeforeShow: function(menu) {
var me = this, count = me.windows.getCount();
menu.items.each(function(item) {
var min = item.minWindows || 0;
item.setDisabled(count < min);
});
},
onWindowClose: function(win) {
var me = this;
me.windows.remove(win);
me.taskbar.removeTaskButton(win.taskButton);
me.updateActiveWindow();
},
//------------------------------------------------------
// Window context menu handlers
onWindowMenuBeforeShow: function(menu) {
var items = menu.items.items, win = menu.theWin;
items[0].setDisabled(win.maximized !== true && win.hidden !== true); // Restore
items[1].setDisabled(win.minimized === true); // Minimize
items[2].setDisabled(win.maximized === true || win.hidden === true); // Maximize
},
onWindowMenuClose: function() {
var me = this, win = me.windowMenu.theWin;
win.close();
},
onWindowMenuHide: function(menu) {
Ext.defer(function() {
menu.theWin = null;
}, 1);
},
onWindowMenuMaximize: function() {
var me = this, win = me.windowMenu.theWin;
win.maximize();
win.toFront();
},
onWindowMenuMinimize: function() {
var me = this, win = me.windowMenu.theWin;
win.minimize();
},
onWindowMenuRestore: function() {
var me = this, win = me.windowMenu.theWin;
me.restoreWindow(win);
},
//------------------------------------------------------
// Dynamic (re)configuration methods
getWallpaper: function() {
return this.wallpaper.wallpaper;
},
setTickSize: function(xTickSize, yTickSize) {
var me = this,
xt = me.xTickSize = xTickSize,
yt = me.yTickSize = (arguments.length > 1) ? yTickSize : xt;
me.windows.each(function(win) {
var dd = win.dd, resizer = win.resizer;
dd.xTickSize = xt;
dd.yTickSize = yt;
resizer.widthIncrement = xt;
resizer.heightIncrement = yt;
});
},
setWallpaper: function(wallpaper, stretch) {
this.wallpaper.setWallpaper(wallpaper, stretch);
return this;
},
//------------------------------------------------------
// Window management methods
cascadeWindows: function() {
var x = 0, y = 0,
zmgr = this.getDesktopZIndexManager();
zmgr.eachBottomUp(function(win) {
if (win.isWindow && win.isVisible() && !win.maximized) {
win.setPosition(x, y);
x += 20;
y += 20;
}
});
},
createWindow: function(win) {
var me = this;
win = me.add(win);
me.windows.add(win);
win.taskButton = me.taskbar.addTaskButton(win);
win.animateTarget = win.taskButton.el;
win.on({
activate: me.updateActiveWindow,
beforeshow: me.updateActiveWindow,
deactivate: me.updateActiveWindow,
minimize: me.minimizeWindow,
destroy: me.onWindowClose,
scope: me
});
win.on({
boxready: function() {
win.dd.xTickSize = me.xTickSize;
win.dd.yTickSize = me.yTickSize;
if (win.resizer) {
win.resizer.widthIncrement = me.xTickSize;
win.resizer.heightIncrement = me.yTickSize;
}
},
single: true
});
// replace normal window close w/fadeOut animation:
win.doClose = function() {
win.doClose = Ext.emptyFn; // dblclick can call again...
win.el.disableShadow();
win.el.fadeOut({
listeners: {
afteranimate: function() {
win.destroy();
}
}
});
};
return win;
},
getActiveWindow: function() {
var win = null,
zmgr = this.getDesktopZIndexManager();
if (zmgr) {
// We cannot rely on activate/deactive because that fires against non-Window
// components in the stack.
zmgr.eachTopDown(function(comp) {
if (comp.isWindow && !comp.hidden) {
win = comp;
return false;
}
return true;
});
}
return win;
},
getDesktopZIndexManager: function() {
var windows = this.windows;
// TODO - there has to be a better way to get this...
return (windows.getCount() && windows.getAt(0).zIndexManager) || null;
},
getWindow: function(id) {
return this.windows.get(id);
},
minimizeWindow: function(win) {
win.minimized = true;
win.hide();
},
restoreWindow: function(win) {
if (win.isVisible()) {
win.restore();
win.toFront();
} else {
win.show();
}
return win;
},
tileWindows: function() {
var me = this, availWidth = me.body.getWidth(true);
var x = me.xTickSize, y = me.yTickSize, nextY = y;
me.windows.each(function(win) {
if (win.isVisible() && !win.maximized) {
var w = win.el.getWidth();
// Wrap to next row if we are not at the line start and this Window will
// go off the end
if (x > me.xTickSize && x + w > availWidth) {
x = me.xTickSize;
y = nextY;
}
win.setPosition(x, y);
x += w + me.xTickSize;
nextY = Math.max(nextY, y + win.el.getHeight() + me.yTickSize);
}
});
},
updateActiveWindow: function() {
var me = this, activeWindow = me.getActiveWindow(), last = me.lastActiveWindow;
if (activeWindow === last) {
return;
}
if (last) {
if (last.el && last.el.dom) {
last.addCls(me.inactiveWindowCls);
last.removeCls(me.activeWindowCls);
}
last.active = false;
}
me.lastActiveWindow = activeWindow;
if (activeWindow) {
activeWindow.addCls(me.activeWindowCls);
activeWindow.removeCls(me.inactiveWindowCls);
activeWindow.minimized = false;
activeWindow.active = true;
}
me.taskbar.setActiveButton(activeWindow && activeWindow.taskButton);
}
});
如果我在这里插入按钮，它将和整个桌面一样大。我不需要这么大的纽扣。
me.windows = new Ext.util.MixedCollection();
me.contextMenu = new Ext.menu.Menu(me.createDesktopMenu());
me.items = [
// { xtype: "wallpaper", id: me.id+"_wallpaper" },
{
xtype: "TESTdataprovidersdataview",
xtype: 'button',
text: 'Help'
}];
在克里斯托夫这样评论之后：仍然不工作，我看到整个桌面上的大按钮
me.items = [
{
xtype: 'button',
width: 111,
height:111,
text: 'Show Toolbar',
action: 'showToolbar'
},
{
xtype: "TESTdataprovidersdataview"
}];
经过几个小时的处理，我意识到它有多简单。
这就是我需要实现的全部：
me.items = [
{
xtype: 'button',
text: 'Show Toolbar',
maxWidth: 95,
maxHeight: 32,
margin: '5%, 800%',
itemId: 'niceButton',
align: "right",
action: 'showToolbar',
pack: 'center',
listeners: {
mouseout: function() {
if (!this.mouseout) {
this.mousedOver = true;
alert('Would you like to show Toolbar');
}
}
}
},
{
xtype: "TESTdataprovidersdataview"
}];
相关文章：
- 将按钮的值插入文本字段
- 如何jQuery-Add按钮最多插入10个新输入
- 如何创建一个表并在单击按钮时插入此标签和文本字段
- 如何在点击按钮后自动插入价值
- javascript，HTML表单:单击按钮插入NULL
- Javascript按钮，在html文本区域中插入一个大黑点(•）
- PHP使用子窗口中的单选按钮确定从子窗口向父窗口文本区域插入什么
- 如何在插入按钮时使其自身加载函数
- 使用AJAX/PHP让HTML按钮将数据插入MySQL数据库
- 如何在facebook垂直共享按钮旁边插入横幅
- 单击按钮可多次动态添加选择框、文本框和日期，并将这些值插入数据库
- 如何在弹出窗口中插入关闭按钮
- 如何在 Firefox 扩展的 JavaScript 中的按钮背景中插入图像
- HTML Texeare 插入符号控件使用左、右、下、上、主页和结束虚拟按钮
- 如何在JS中的屏幕右上角插入一个浮动按钮
- 如何在chrome扩展中插入通知操作按钮
- 如何在网页中插入打印表单的“打印”按钮
- 使用 jQuery 在文本区域插入一个浮动按钮
- 如何通过单击按钮插入 html
- 通过按钮插入MySQL
