我在Extjs中例子desktop中StartMenu.js的注释
来源:互联网 发布:妇科医生 知乎 编辑:程序博客网 时间:2024/05/06 08:30
/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/licensetoolsPanel
*/
/**
* @class Ext.ux.StartMenu
* @extends Ext.menu.Menu
* A start menu object.
* @constructor
* Creates a new StartMenu
* @param {Object} config Configuration options
*
* SAMPLE USAGE:
*
* this.startMenu = new Ext.ux.StartMenu({
*iconCls: 'user',
*height: 300,
*shadow: true,
*title: get_cookie('memberName'),
*width: 300
*});
*
* this.startMenu.add({
*text: 'Grid Window',
*iconCls:'icon-grid',
*handler : this.createWindow,
*scope: this
*});
*
* this.startMenu.addTool({
*text:'Logout',
*iconCls:'logout',
*handler:function(){ window.location = "logout.php"; },
*scope:this
*});
*/
Ext.namespace("Ext.ux");
Ext.ux.StartMenu = Ext.extend(Ext.menu.Menu, {
initComponent: function(config) {
Ext.ux.StartMenu.superclass.initComponent.call(this, config);//相当于super.initComponent(config);
var tools = this.toolItems;
this.toolItems = new Ext.util.MixedCollection();//相当于hashMap,多了些filter功能
if(tools){
this.addTool.apply(this, tools);//addTool方法传入??不太明白
}
},
// private
onRender : function(ct, position){
Ext.ux.StartMenu.superclass.onRender.call(this, ct, position);
var el = this.el.addClass('ux-start-menu');
var header = el.createChild({//调ext-core.js包中createChild方法创建Ext.Element的div;
tag: "div",
cls: "x-window-header x-unselectable x-panel-icon "+this.iconCls
});
this.header = header;
var headerText = header.createChild({//然后又在上面那个div下创建span
tag: "span",
cls: "x-window-header-text"
});
var tl = header.wrap({
cls: "ux-start-menu-tl"
});
var tr = header.wrap({//.wrap是做什么用的呢?经查:wrap:在当前节点外绑定一个由DomHelper创建的父节点
cls: "ux-start-menu-tr"
});
var tc = header.wrap({
cls: "ux-start-menu-tc"
});
this.menuBWrap = el.createChild({
tag: "div",
cls: "x-window-body x-border-layout-ct ux-start-menu-body"
});
var ml = this.menuBWrap.wrap({
cls: "ux-start-menu-ml"
});
var mc = this.menuBWrap.wrap({
cls: "x-window-mc ux-start-menu-bwrap"
});
this.menuPanel = this.menuBWrap.createChild({
tag: "div",
cls: "x-panel x-border-panel ux-start-menu-apps-panel"
});
this.toolsPanel = this.menuBWrap.createChild({
tag: "div",
cls: "x-panel x-border-panel ux-start-menu-tools-panel"
});
var bwrap = ml.wrap({cls: "x-window-bwrap"});
var bc = bwrap.createChild({
tag: "div",
cls: "ux-start-menu-bc"
});
var bl = bc.wrap({
cls: "ux-start-menu-bl x-panel-nofooter"
});
var br = bc.wrap({
cls: "ux-start-menu-br"
});
this.ul.appendTo(this.menuPanel);//Ext-all.js中el = Ext.Layer;layer中有{tag: 'ul', cls: 'x-menu-list'},所以 ul = this.el.child('ul.x-menu-list');
var toolsUl = this.toolsPanel.createChild({//toolsPanel下也创建1个ul.x-menu-list
tag: "ul",
cls: "x-menu-list"
});
this.mon(toolsUl, 'click', this.onClick, this);
this.mon(toolsUl, 'mouseover', this.onMouseOver, this);
this.mon(toolsUl, 'mouseout', this.onMouseOut, this);
this.items.each(function(item){
item.parentMenu = this;
}, this);
this.toolItems.each(
function(item){
var li = document.createElement("li");
li.className = "x-menu-list-item";
toolsUl.dom.appendChild(li);
item.render(li);
item.parentMenu = this;
}, this);
this.toolsUl = toolsUl;
this.menuBWrap.setStyle('position', 'relative');
this.menuBWrap.setHeight(this.height - 28);
this.menuPanel.setStyle({
padding: '2px',
position: 'absolute',
overflow: 'auto'
});
this.toolsPanel.setStyle({
padding: '2px 4px 2px 2px',
position: 'absolute',
overflow: 'auto'
});
this.setTitle(this.title);
},
// private
findTargetItem : function(e){
var t = e.getTarget(".x-menu-list-item", this.ul, true);
if(t && t.menuItemId){
if(this.items.get(t.menuItemId)){
return this.items.get(t.menuItemId);
}else{
return this.toolItems.get(t.menuItemId);
}
}
},
/**
* Displays this menu relative to another element
* @param {Mixed} element The element to align to
* @param {String} position (optional) The {@link Ext.Element#alignTo} anchor position to use in aligning to
* the element (defaults to this.defaultAlign)
* @param {Ext.ux.StartMenu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
*/
show : function(el, pos, parentMenu){
this.parentMenu = parentMenu;
if(!this.el){
this.render();
}
this.fireEvent("beforeshow", this);
this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
var tPanelWidth = 100;
var box = this.menuBWrap.getBox();
this.menuPanel.setWidth(box.width-tPanelWidth);
this.menuPanel.setHeight(box.height);
this.toolsPanel.setWidth(tPanelWidth);
this.toolsPanel.setX(box.x+box.width-tPanelWidth);
this.toolsPanel.setHeight(box.height);
},
addTool : function(){
var a = arguments, l = a.length, item;
for(var i = 0; i < l; i++){
var el = a[i];
if(el.render){ // some kind of Item
item = this.addToolItem(el);
}else if(typeof el == "string"){ // string
if(el == "separator" || el == "-"){
item = this.addToolSeparator();
}else{
item = this.addText(el);
}
}else if(el.tagName || el.el){ // element
item = this.addElement(el);
}else if(typeof el == "object"){ // must be menu item config?
item = this.addToolMenuItem(el);
}
}
return item;
},
/**
* Adds a separator bar to the Tools
* @return {Ext.menu.Item} The menu item that was added
*/
addToolSeparator : function(){
return this.addToolItem(new Ext.menu.Separator({itemCls: 'ux-toolmenu-sep'}));
},
addToolItem : function(item){
this.toolItems.add(item);
if(this.ul){
var li = document.createElement("li");
li.className = "x-menu-list-item";
this.ul.dom.appendChild(li);
item.render(li, this);
this.delayAutoWidth();
}
return item;
},
addToolMenuItem : function(config){
if(!(config instanceof Ext.menu.Item)){
if(typeof config.checked == "boolean"){ // must be check menu item config?
config = new Ext.menu.CheckItem(config);
}else{
config = new Ext.menu.Item(config);
}
}
return this.addToolItem(config);
},
setTitle : function(title, iconCls){
this.title = title;
this.header.child('span').update(title);
return this;
}
});
- 我在Extjs中例子desktop中StartMenu.js的注释
- extjs desktop startmenu (开始菜单)
- 在extjs4的desktop例子中添加自己的东西
- 如何在JS中改变Extjs combox 的值
- extjs中treepanel例子
- extjs中treepanel例子
- 在InstantRails中展现Extjs的grid-filtering例子的全过程
- Extjs 如何在分页工具栏中设置动态条数Pageszie 的例子
- [EXTJS]让Extjs也能有类似JS中alert的功能
- js中tooltip的例子
- js中数组的例子
- extjs中的JS代码在firefox可以正常运行,在IE中无法运行的方法。
- 在ubuntu7.10 Desktop版本中安装LAMP的命令
- 在Desktop应用中的Window中使用Flowplayer的代码
- 在Parallels Desktop的虚拟机中如何使用网银
- Extjs中checkbox和radio的使用的小例子
- EXTJS在使用中遇到的问题
- 在extjs中实现的文本编辑器
- Hibernate HQL使用总结
- 【转】js中的文档模式-document.compatMode
- 在Ubuntu 10.4环境下安装arm-2010q1-188-arm-none-eabi.bin文件
- SDL下播放声音文件
- 聊天三个小时后发生的故事
- 我在Extjs中例子desktop中StartMenu.js的注释
- Notepad++提示"Load langs.xml failed!"的解决方法
- 俄罗斯方块
- 带url重写的web.config
- 保留题目
- alfresco中Policy载体分类和继承关系
- Windowx下配置DialogBlocks全攻略
- zz 关于一个flex 加 SFS的配置 但是我自己没有测试出来 那个SFSEvent报错 不知道有没有人能解决
- RSS技术