X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..530ef4b6c5b943cfa68b779d11cf7de29aa878bf:/examples/ux/GroupTabPanel.js
diff --git a/examples/ux/GroupTabPanel.js b/examples/ux/GroupTabPanel.js
index 060fc815..3a773b5a 100644
--- a/examples/ux/GroupTabPanel.js
+++ b/examples/ux/GroupTabPanel.js
@@ -1,298 +1,304 @@
/*!
- * Ext JS Library 3.1.0
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.2.1
+ * Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
-Ext.ns('Ext.ux');
-
-Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
- tabPosition: 'left',
-
- alternateColor: false,
-
- alternateCls: 'x-grouptabs-panel-alt',
-
- defaultType: 'grouptab',
-
- deferredRender: false,
-
- activeGroup : null,
-
- initComponent: function(){
- Ext.ux.GroupTabPanel.superclass.initComponent.call(this);
-
- this.addEvents(
- 'beforegroupchange',
- 'groupchange'
- );
- this.elements = 'body,header';
- this.stripTarget = 'header';
-
- this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';
-
- this.addClass('x-grouptabs-panel');
-
- if (this.tabStyle && this.tabStyle != '') {
- this.addClass('x-grouptabs-panel-' + this.tabStyle);
- }
-
- if (this.alternateColor) {
- this.addClass(this.alternateCls);
- }
-
- this.on('beforeadd', function(gtp, item, index){
- this.initGroup(item, index);
- });
- },
-
- initEvents : function() {
- this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
- },
-
- onRender: function(ct, position){
- Ext.TabPanel.superclass.onRender.call(this, ct, position);
- if(this.plain){
- var pos = this.tabPosition == 'top' ? 'header' : 'footer';
- this[pos].addClass('x-tab-panel-'+pos+'-plain');
- }
-
- var st = this[this.stripTarget];
-
- this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{
- tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});
-
- var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
- this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
-
- this.header.addClass('x-grouptabs-panel-header');
- this.bwrap.addClass('x-grouptabs-bwrap');
- this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');
-
- if (!this.groupTpl) {
- var tt = new Ext.Template(
- '',
- '',
- '',
- '{text}',
- ''
- );
- tt.disableFormats = true;
- tt.compile();
- Ext.ux.GroupTabPanel.prototype.groupTpl = tt;
- }
- this.items.each(this.initGroup, this);
- },
-
- afterRender: function(){
- Ext.ux.GroupTabPanel.superclass.afterRender.call(this);
-
- this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({
- cls: 'x-tab-joint'
- });
-
- this.addClass('x-tab-panel-' + this.tabPosition);
- this.header.setWidth(this.tabWidth);
-
- if (this.activeGroup !== undefined) {
- var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);
- delete this.activeGroup;
- this.setActiveGroup(group);
- group.setActiveTab(group.getMainItem());
- }
- },
-
- getGroupEl : Ext.TabPanel.prototype.getTabEl,
-
- // private
- findTargets: function(e){
- var item = null,
- itemEl = e.getTarget('li', this.strip);
- if (itemEl) {
- item = this.findById(itemEl.id.split(this.idDelimiter)[1]);
- if (item.disabled) {
- return {
- expand: null,
- item: null,
- el: null
- };
- }
- }
- return {
- expand: e.getTarget('.x-grouptabs-expand', this.strip),
- isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),
- item: item,
- el: itemEl
- };
- },
-
- // private
- onStripMouseDown: function(e){
- if (e.button != 0) {
- return;
- }
- e.preventDefault();
- var t = this.findTargets(e);
- if (t.expand) {
- this.toggleGroup(t.el);
- }
- else if (t.item) {
- if(t.isGroup) {
- t.item.setActiveTab(t.item.getMainItem());
- }
- else {
- t.item.ownerCt.setActiveTab(t.item);
- }
- }
- },
-
- expandGroup: function(groupEl){
- if(groupEl.isXType) {
- groupEl = this.getGroupEl(groupEl);
- }
- Ext.fly(groupEl).addClass('x-grouptabs-expanded');
- this.syncTabJoint();
- },
-
- toggleGroup: function(groupEl){
- if(groupEl.isXType) {
- groupEl = this.getGroupEl(groupEl);
- }
- Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');
- this.syncTabJoint();
- },
-
- collapseGroup: function(groupEl){
- if(groupEl.isXType) {
- groupEl = this.getGroupEl(groupEl);
- }
- Ext.fly(groupEl).removeClass('x-grouptabs-expanded');
- this.syncTabJoint();
- },
-
- syncTabJoint: function(groupEl){
- if (!this.tabJoint) {
- return;
- }
-
- groupEl = groupEl || this.getGroupEl(this.activeGroup);
- if(groupEl) {
- this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2);
-
- var y = Ext.isGecko2 ? 0 : 1;
- if (this.tabPosition == 'left'){
- this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);
- }
- else {
- this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);
- }
- }
- else {
- this.tabJoint.hide();
- }
- },
-
- getActiveTab : function() {
- if(!this.activeGroup) return null;
- return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null;
- },
-
- onResize: function(){
- Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);
- this.syncTabJoint();
- },
-
- createCorner: function(el, pos){
- return Ext.fly(el).createChild({
- cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos
- });
- },
-
- initGroup: function(group, index){
- var before = this.strip.dom.childNodes[index],
- p = this.getTemplateArgs(group);
- if (index === 0) {
- p.cls += ' x-tab-first';
- }
- p.cls += ' x-grouptabs-main';
- p.text = group.getMainItem().title;
-
- var el = before ? this.groupTpl.insertBefore(before, p) : this.groupTpl.append(this.strip, p),
- tl = this.createCorner(el, 'top-' + this.tabPosition),
- bl = this.createCorner(el, 'bottom-' + this.tabPosition);
-
- group.tabEl = el;
- if (group.expanded) {
- this.expandGroup(el);
- }
-
- if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){
- bl.setLeft('-10px');
- bl.setBottom('-5px');
- tl.setLeft('-10px');
- tl.setTop('-5px');
- }
-
- this.mon(group, {
- scope: this,
- changemainitem: this.onGroupChangeMainItem,
- beforetabchange: this.onGroupBeforeTabChange
- });
- },
-
- setActiveGroup : function(group) {
- group = this.getComponent(group);
- if(!group){
- return false;
- }
- if(!this.rendered){
- this.activeGroup = group;
- return true;
- }
- if(this.activeGroup != group && this.fireEvent('beforegroupchange', this, group, this.activeGroup) !== false){
- if(this.activeGroup){
- var oldEl = this.getGroupEl(this.activeGroup);
- if(oldEl){
- Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
- }
- }
-
- var groupEl = this.getGroupEl(group);
- Ext.fly(groupEl).addClass('x-grouptabs-strip-active');
-
- this.activeGroup = group;
- this.stack.add(group);
-
- this.layout.setActiveItem(group);
- this.syncTabJoint(groupEl);
-
- this.fireEvent('groupchange', this, group);
- return true;
- }
- return false;
- },
-
- onGroupBeforeTabChange: function(group, newTab, oldTab){
- if(group !== this.activeGroup || newTab !== oldTab) {
- this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');
- }
- this.expandGroup(this.getGroupEl(group));
- if(group !== this.activeGroup) {
- return this.setActiveGroup(group);
- }
- },
-
- getFrameHeight: function(){
- var h = this.el.getFrameWidth('tb');
- h += (this.tbar ? this.tbar.getHeight() : 0) +
- (this.bbar ? this.bbar.getHeight() : 0);
-
- return h;
- },
-
- adjustBodyWidth: function(w){
- return w - this.tabWidth;
- }
-});
-
-Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);
\ No newline at end of file
+Ext.ns('Ext.ux');
+
+Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
+ tabPosition: 'left',
+
+ alternateColor: false,
+
+ alternateCls: 'x-grouptabs-panel-alt',
+
+ defaultType: 'grouptab',
+
+ deferredRender: false,
+
+ activeGroup : null,
+
+ initComponent: function(){
+ Ext.ux.GroupTabPanel.superclass.initComponent.call(this);
+
+ this.addEvents(
+ 'beforegroupchange',
+ 'groupchange'
+ );
+ this.elements = 'body,header';
+ this.stripTarget = 'header';
+
+ this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';
+
+ this.addClass('x-grouptabs-panel');
+
+ if (this.tabStyle && this.tabStyle != '') {
+ this.addClass('x-grouptabs-panel-' + this.tabStyle);
+ }
+
+ if (this.alternateColor) {
+ this.addClass(this.alternateCls);
+ }
+
+ this.on('beforeadd', function(gtp, item, index){
+ this.initGroup(item, index);
+ });
+ this.items.each(function(item){
+ item.on('tabchange',function(item){
+ this.fireEvent('tabchange', this, item.activeTab);
+ }, this);
+ },this);
+ },
+
+ initEvents : function() {
+ this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
+ },
+
+ onRender: function(ct, position){
+ Ext.TabPanel.superclass.onRender.call(this, ct, position);
+ if(this.plain){
+ var pos = this.tabPosition == 'top' ? 'header' : 'footer';
+ this[pos].addClass('x-tab-panel-'+pos+'-plain');
+ }
+
+ var st = this[this.stripTarget];
+
+ this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{
+ tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});
+
+ var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
+ this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
+
+ this.header.addClass('x-grouptabs-panel-header');
+ this.bwrap.addClass('x-grouptabs-bwrap');
+ this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');
+
+ if (!this.groupTpl) {
+ var tt = new Ext.Template(
+ '',
+ '',
+ '',
+ '{text}',
+ ''
+ );
+ tt.disableFormats = true;
+ tt.compile();
+ Ext.ux.GroupTabPanel.prototype.groupTpl = tt;
+ }
+ this.items.each(this.initGroup, this);
+ },
+
+ afterRender: function(){
+ Ext.ux.GroupTabPanel.superclass.afterRender.call(this);
+
+ this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({
+ cls: 'x-tab-joint'
+ });
+
+ this.addClass('x-tab-panel-' + this.tabPosition);
+ this.header.setWidth(this.tabWidth);
+
+ if (this.activeGroup !== undefined) {
+ var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);
+ delete this.activeGroup;
+ this.setActiveGroup(group);
+ group.setActiveTab(group.getMainItem());
+ }
+ },
+
+ getGroupEl : Ext.TabPanel.prototype.getTabEl,
+
+ // private
+ findTargets: function(e){
+ var item = null,
+ itemEl = e.getTarget('li', this.strip);
+ if (itemEl) {
+ item = this.findById(itemEl.id.split(this.idDelimiter)[1]);
+ if (item.disabled) {
+ return {
+ expand: null,
+ item: null,
+ el: null
+ };
+ }
+ }
+ return {
+ expand: e.getTarget('.x-grouptabs-expand', this.strip),
+ isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),
+ item: item,
+ el: itemEl
+ };
+ },
+
+ // private
+ onStripMouseDown: function(e){
+ if (e.button != 0) {
+ return;
+ }
+ e.preventDefault();
+ var t = this.findTargets(e);
+ if (t.expand) {
+ this.toggleGroup(t.el);
+ }
+ else if (t.item) {
+ if(t.isGroup) {
+ t.item.setActiveTab(t.item.getMainItem());
+ }
+ else {
+ t.item.ownerCt.setActiveTab(t.item);
+ }
+ }
+ },
+
+ expandGroup: function(groupEl){
+ if(groupEl.isXType) {
+ groupEl = this.getGroupEl(groupEl);
+ }
+ Ext.fly(groupEl).addClass('x-grouptabs-expanded');
+ this.syncTabJoint();
+ },
+
+ toggleGroup: function(groupEl){
+ if(groupEl.isXType) {
+ groupEl = this.getGroupEl(groupEl);
+ }
+ Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');
+ this.syncTabJoint();
+ },
+
+ collapseGroup: function(groupEl){
+ if(groupEl.isXType) {
+ groupEl = this.getGroupEl(groupEl);
+ }
+ Ext.fly(groupEl).removeClass('x-grouptabs-expanded');
+ this.syncTabJoint();
+ },
+
+ syncTabJoint: function(groupEl){
+ if (!this.tabJoint) {
+ return;
+ }
+
+ groupEl = groupEl || this.getGroupEl(this.activeGroup);
+ if(groupEl) {
+ this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2);
+
+ var y = Ext.isGecko2 ? 0 : 1;
+ if (this.tabPosition == 'left'){
+ this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);
+ }
+ else {
+ this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);
+ }
+ }
+ else {
+ this.tabJoint.hide();
+ }
+ },
+
+ getActiveTab : function() {
+ if(!this.activeGroup) return null;
+ return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null;
+ },
+
+ onResize: function(){
+ Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);
+ this.syncTabJoint();
+ },
+
+ createCorner: function(el, pos){
+ return Ext.fly(el).createChild({
+ cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos
+ });
+ },
+
+ initGroup: function(group, index){
+ var before = this.strip.dom.childNodes[index],
+ p = this.getTemplateArgs(group);
+ if (index === 0) {
+ p.cls += ' x-tab-first';
+ }
+ p.cls += ' x-grouptabs-main';
+ p.text = group.getMainItem().title;
+
+ var el = before ? this.groupTpl.insertBefore(before, p) : this.groupTpl.append(this.strip, p),
+ tl = this.createCorner(el, 'top-' + this.tabPosition),
+ bl = this.createCorner(el, 'bottom-' + this.tabPosition);
+
+ group.tabEl = el;
+ if (group.expanded) {
+ this.expandGroup(el);
+ }
+
+ if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){
+ bl.setLeft('-10px');
+ bl.setBottom('-5px');
+ tl.setLeft('-10px');
+ tl.setTop('-5px');
+ }
+
+ this.mon(group, {
+ scope: this,
+ changemainitem: this.onGroupChangeMainItem,
+ beforetabchange: this.onGroupBeforeTabChange
+ });
+ },
+
+ setActiveGroup : function(group) {
+ group = this.getComponent(group);
+ if(!group){
+ return false;
+ }
+ if(!this.rendered){
+ this.activeGroup = group;
+ return true;
+ }
+ if(this.activeGroup != group && this.fireEvent('beforegroupchange', this, group, this.activeGroup) !== false){
+ if(this.activeGroup){
+ this.activeGroup.activeTab = null;
+ var oldEl = this.getGroupEl(this.activeGroup);
+ if(oldEl){
+ Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
+ }
+ }
+
+ var groupEl = this.getGroupEl(group);
+ Ext.fly(groupEl).addClass('x-grouptabs-strip-active');
+
+ this.activeGroup = group;
+ this.stack.add(group);
+
+ this.layout.setActiveItem(group);
+ this.syncTabJoint(groupEl);
+
+ this.fireEvent('groupchange', this, group);
+ return true;
+ }
+ return false;
+ },
+
+ onGroupBeforeTabChange: function(group, newTab, oldTab){
+ if(group !== this.activeGroup || newTab !== oldTab) {
+ this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');
+ }
+ this.expandGroup(this.getGroupEl(group));
+ if(group !== this.activeGroup) {
+ return this.setActiveGroup(group);
+ }
+ },
+
+ getFrameHeight: function(){
+ var h = this.el.getFrameWidth('tb');
+ h += (this.tbar ? this.tbar.getHeight() : 0) +
+ (this.bbar ? this.bbar.getHeight() : 0);
+
+ return h;
+ },
+
+ adjustBodyWidth: function(w){
+ return w - this.tabWidth;
+ }
+});
+
+Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);