6 Quick Tips to Capture Those Holiday Sales Now | Practical eCommerce::
Santa holds a sign that read, 6 Quick Tips to Capture Those Holiday Sales Now Despite this, some retailers may still be having trouble coaxing online
http://www.practicalecommerce.com/articles/884-6-Quick-Tips-to-Capture-Those-Holiday-Sales-NowHOME |
Hi,
I am trying to find a way to register a quicktip for every element inside a composite element.
I first initialize and configure quicktips in my application's init function like so:
this.quickTips = Ext.QuickTips.init();
// Apply a set of config properties to the singleton
Ext.apply(Ext.QuickTips.getQuickTip(), {
mouseOffset: [-40, -85],
maxWidth: 171,
minWidth: 171,
showDelay: 10,
trackMouse: true,
floating: true,
shadow: false,
shim: false
});
Then I tried applying an each statement my composite element and put the QuickTip register function inside of that like so:
setQTs: function(){
Ext.select('div.category').each(function(index, el, scope){
Ext.QuickTips.tips({
target: el,
title: el.dom.innerHTML,
text: 'Click here for more info',
width: 100,
dismissDelay: 20000
});
});
},
When I load the page Safari Web Inspector's console throws an undefined value error on line 283 of ext-all.js. Can anyone please point me towards a better way to accomplish this?
Here is all the code that I am working with:
// SET UP A NAMESPACE FOR THE MY GADGETS SERVICE FUNCTION
Ext.namespace('MyGadgetsService');
var MyGadgetsScope;
// THIS FUNCTION CONTAINS THE CORE FUNCTIONALITY FOR THE MyDMC MY GADGETS SERVICE PAGE
var MyGadgetsService = function(){
return {
// INITIALIZE FUNCTION
initialize: function(){
this.refresh();
this.staticEventHandlers();
this.getStaticElements();
Ext.select('div.top').each(function(el){
this.reOrder(el);
}, this);
MyGadgetsScope = this;
this.quickTips = Ext.QuickTips.init();
// Apply a set of config properties to the singleton
Ext.apply(Ext.QuickTips.getQuickTip(), {
mouseOffset: [-40, -85],
maxWidth: 171,
minWidth: 171,
showDelay: 10,
trackMouse: true,
floating: true,
shadow: false,
shim: false
});
},
/* ADD HIDDEN VARIABLES (HTML INPUTS)
* ************************************************** ************************************************** ******************/
Quick Tips: Networking Sites and Con Men - BBB News Center::
Quick Tips: Networking Sites and Con Men. 4/23/2009 The trouble with most scams is that the victims don't know they're being taken until it's too late,
http://oklahomacity.bbb.org/article/quick-tips-networking-sites-and-con-men-10115HOME |
Smart Computing Article - Quick Tips::
Smart Computing Article - Quick Tips. If you're still having trouble positioning the image, press the ALT key while moving the image, which lets you
http://www.smartcomputing.com/editorial/article.asp?article=articles/2003/s1406/36s06/36s06.aspHOME |
addInputs: function(){
this.tabInputs = ;
this.tabs.each(function(el, scope, index){
this.tabName = el.child('a', true).getAttribute('rel');
this.tabContent = Ext.get(this.tabName);
var tabGadgets = this.tabContent.select('.gadget-block', true);
this.gadgetIds = ;
tabGadgets.each(function(div, scope, undex){
var gadgetId = div.dom.getAttribute('id');
if (div.hasClass('placeholder'))
this.gadgetIds[undex] = 'no_gadget'
else
this.gadgetIds[undex] = gadgetId;
}, this);
this.inputValue = this.gadgetIds.join(',');
this.inputName = this.tabName;
this.tabInputs[index] = Ext.DomHelper.append('gadget-services', MyGadgetsElements('input-hidden', this));
}, this);
this.tabValues = ;
Ext.select('ul#tabs-container>li>a').each(function(el, scope, index){
this.tabValues[index] = el.dom.getAttribute('rel');
}, this);
this.inputName = 'tabNames';
this.inputValue = this.tabValues.join(',');
this.tabInput = Ext.DomHelper.append('gadget-services', MyGadgetsElements('input-hidden', this));
},
/* CYCLE THROUGH THE GADGETS AND TABS AND INITIALIZE THEIR DRAG / DROP BEHAVIORS
* ************************************************** ************************************************** ******************/
getDDItems: function(){
Some Kids Are Born to Get in Trouble::
Genes Can Be Key Factor in Certain Kids Being Trouble Makers. By Robin McClure, About.com Child Health & Safety Quick Tips
http://childcare.about.com/od/behaviors/qt/bad.htmHOME |
Quick Tips: How to Recession-Proof Your Business - AOL Small Business::
Quick Tips: How to Recession-Proof Your Business. By DIANA RANSOM . If they've been having trouble, you may be in a good position to pick up their
http://smallbusiness.aol.com/article/_a/quick-tips-how-to-recession-proof-your/20080130172209990001HOME |
//Loop through the gadget list items and make them draggable
this.gadgets.each(function(index, el, scope){
el.initDD('gadgets');
});
Ext.select('div.gadget-head').each(function(index, el, scope){
el.initDD('gadgets');
});
//Loop through the tabs and make them drop targets
this.tabs.each(function(index, el, scope){
var tabDD = el.initDD('gadgets', {}, {
invalidHandleTypes: {
INPUT: 'INPUT'
}
});
});
},
/* Re-number Gadgets
* ************************************************** ************************************************** ******************/
reOrder: function(parentTab){
if (Ext.get(parentTab).select('.gadget-block').getCount() == 0)
Ext.get(parentTab).addClass('empty');
else
Ext.get(parentTab).removeClass('empty');
var gadgets = Ext.get(parentTab).select('.gadget-block');
gadgets.removeClass('odd');
gadgets.each(function(el, scope, index){
var icons = el.select('div.num');
icons.removeClass(['pos0', 'pos1', 'pos2', 'pos3', 'pos4', 'pos5']);
icons.addClass('pos' + index % 6);
//el.update(index + 1);
if (index % 2 == 0)
el.addClass('odd');
}, this);
if (Ext.get(parentTab).child('.page-div'))
Ext.get(parentTab).child('.page-div').remove();
this.pageNumber = 2;
Ext.get(parentTab).select('.gadget-block').each(function(el, scope, index){
if (index % 6 == 0 && index != 0) {
Ext.DomHelper.insertBefore(el, MyGadgetsElements('divider', this));
this.pageNumber++;
}
}, this);
},
/* HIDE THE ADD NEW TAB DIALOG
* ************************************************** ************************************************** ******************/
hideNewTabDialog: function(){
this.newTab.removeClass('active-dialog');
this.btnNewTab.update('+');
},
/* SHOW THE ADD NEW TAB DIALOG
* ************************************************** ************************************************** ******************/
showNewTabDialog: function(e, el){
this.newTab.addClass('active-dialog');
Ext.get(el).update('+ Add New Tab');
Ext.get('tab-title').on('keypress', function(e){
if (e.getCharCode() == 13) {
e.preventDefault();
this.saveNewTab(el)
}
}, this);
},
/* ADD A NEW TAB
* ************************************************** ************************************************** ******************/
saveNewTab: function(el){
el.title = document.getElementById('tab-title').value;
el.name = el.title.replace(/ /, '-');
if (el.title.length == 0) {
this.hideNewTabDialog();
return;
}
if (el.title.length < 19)
el.abbrTitle = el.title;
else
el.abbrTitle = el.name.substr(0, 10) + "...";
var newTabBtn = Ext.DomHelper.append(Ext.get('tabs-container'), MyGadgetsElements('tabBtn', el));
var newTabContent = Ext.DomHelper.append(Ext.get('tab-content-container'), MyGadgetsElements('tabContent', el));
this.hideNewTabDialog();
if (this.tabs.getCount() > 7) {
this.btnNewTab.applyStyles({
'display': 'none'
})
}
this.switchTabs(Ext.get(newTabBtn));
document.getElementById('tab-title').value = '';
},
/* SWITCH TABS
* ************************************************** ************************************************** ******************/
switchTabs: function(target){
this.refresh();
var target = Ext.get(target);
this.active = target.hasClass('active');
this.aTag = target.child('a', true);
this.relAttr = this.aTag.getAttribute('rel');
this.tabs.removeClass('active');
this.tabContent.removeClass('active-tab');
target.addClass('active');
Ext.get(this.relAttr).addClass('active-tab');
if (this.active === false) {
if (Ext.get('tab-options'))
Ext.get('tab-options').remove();
Ext.DomHelper.append(target, MyGadgetsElements('tab-options', this));
}
},
/* SHOW TAB OPTIONS MENU
* ************************************************** ************************************************** ******************/
showTabOptions: function(e){
this.target = e.getTarget('#tab-options', null, true);
this.target.addClass('expanded');
this.target.on('mouseout', function(e, el){
if (!e.within(el, true))
this.target.removeClass('expanded');
}, this, {
delegate: 'ul'
});
},
/* REMOVE TAB
* ************************************************** ************************************************** ******************/
removeTab: function(e, el){
this.refresh();
var tab = Ext.select('li.active a').first().dom.getAttribute('rel');
Ext.select('li.active').remove();
Ext.get(tab).remove();
var firstTab = Ext.select('ul#tabs-container>li').first();
this.switchTabs(firstTab);
},
/* RENAME TAB
* ************************************************** ************************************************** ******************/
renameTab: function(e, el, dblClck){
if (this.tActive === true)
return;
this.tActive = true;
if (dblClck === true)
var tab = e.getTarget('a', null, true);
else
var tab = Ext.select('li.active a').first();
this.tabTitle = tab.dom.innerHTML;
this.origName = tab.dom.getAttribute('rel');
var input = tab.replaceWith(MyGadgetsElements('rename-input', this), true);
input.on('keypress', function(e, el){
if (e.getCharCode() == 13) {
e.preventDefault();
this.submitRename();
}
this.tActive = false;
}, this);
},
/* SUBMIT RENAMED TAB
* ************************************************** ************************************************** ******************/
submitRename: function(){
if (!el)
var el = Ext.get('rename-input');
el.title = document.getElementById('rename-input').value;
el.name = el.title.replace(/ /, '-');
if (el.title.length < 19)
el.abbrTitle = el.title;
else
el.abbrTitle = el.title.substr(0, 10) + "...";
var newTabBtn = Ext.DomHelper.overwrite(Ext.select('li.active').fi rst(), MyGadgetsElements('renamed-tab', el));
Ext.DomHelper.append(Ext.select('li.active').first (), MyGadgetsElements('tab-options', this));
Ext.get(this.origName).dom.setAttribute('id', el.name);
this.refresh();
},
/* SHOW GADGET OPTIONS MENU
* ************************************************** ************************************************** ******************/
showGadgetOptions: function(e, el){
var target = e.getTarget('div.gadget-block', null, true);
var actionMenu = target.select('div.actions');
var hovering = false;
target.select('div.action-menu').applyStyles({
'display': 'block'
});
actionMenu.on('click', function(e, el){
var parentTab = target.parent('div.top')
target.remove();
this.reOrder(parentTab);
}, this, {
delegate: '.delete'
});
actionMenu.on('click', function(e, el){
var parentTab = target.parent('div.top');
el.copyId = target.id + '_copy';
var gadgetCopy = Ext.DomHelper.insertAfter(target, MyGadgetsElements('empty-gadget-block', el), true);
gadgetCopy = Ext.DomHelper.append(gadgetCopy, target.dom.innerHTML);
reOrder(parentTab);
Ext.select('div.action-menu', '.actions img').applyStyles({
'display': 'none'
});
Ext.select('.actions img').applyStyles({
'display': 'none'
});
Ext.select('.gadget-inner').removeClass('active');
this.refresh();
}, this, {
delegate: '.copy'
});
actionMenu.on('click', function(e, el){
this.gadgetInner = target.select('div.gadget-inner');
this.gadgetPrefs = target.select('div.gadget-prefs');
this.gadgetInner.addClass('hide');
this.gadgetPrefs.removeClass('hide');
this.refresh();
}, this, {
delegate: '.edit'
});
actionMenu.on('mouseover', function(){
hovering = true;
});
actionMenu.on('mouseout', function(e, el){
if (!e.within(el, true)) {
target.select('div.action-menu').applyStyles({
'display': 'none'
});
hovering = false;
}
}, this, {
delegate: '.action-menu'
});
Ext.get(el).on('mouseout', function(){
var hideMenu = function(){
if (hovering === false) {
target.select('div.action-menu').applyStyles({
'display': 'none'
});
}
}
setTimeout(hideMenu, 100);
})
},
setQTs: function(){
Ext.select('div.category').each(function(index, el, scope){
Ext.QuickTips.tips({
target: el,
title: 'mooch',
text: 'Click here for more info',
width: 100,
dismissDelay: 20000
});
});
},
/* HIGHLIGHT THE GADGETS ON MOUSEOVER
* ************************************************** ************************************************** ******************/
highlightGadgets: function(e, el){
this.block = e.getTarget('.gadget-block', null, true);
this.target = this.block.select('.gadget-inner');
this.actionsBtn = this.block.select('.actions img');
this.actionsBlock = this.block.select('.actions a, .actions .action-menu');
this.target.addClass('active');
this.actionsBtn.applyStyles({
'display': 'block',
});
this.block.on('mouseout', function(){
this.target.removeClass('active');
this.actionsBtn.applyStyles({
'display': 'none'
});
}, this);
// Manually register a quick tip for a specific element
},
/* DOM NODES TO BE REFRESHED WHEN THE DOM IS MODIFIED
* ************************************************** ************************************************** ******************/
getDynamicElements: function(){
this.gadgets = Ext.select('div.gadget-block');
this.tabBtns = Ext.select('ul#tabs-container>li>a');
this.tabs = Ext.select('ul#tabs-container>li');
this.tabsContainer = Ext.get('tabs-container');
this.tabContent = Ext.select('div.tab-content');
this.tabContentInner = Ext.select('div.tab-content div.gutter');
this.tabTitleInput = Ext.get('tab-title');
this.tabContentContainer = Ext.get('tab-content-container');
this.btnTabOptions = Ext.get('tab-options');
this.pageBreaks = 'div.page-div';
this.gadgetForm = Ext.get('gadget-services');
this.btnSave = Ext.get('save-changes');
this.btnSaveTab = Ext.get('save-tab');
this.btnCancelTab = Ext.get('cancel-tab');
this.newTab = Ext.get('add-tab');
this.btnNewTab = Ext.get('add-tab-btn');
this.tabOptRemove = Ext.select('li.remove-tab');
this.tabOptRename = Ext.select('li.rename-tab');
this.btnActions = Ext.select('div.actions img');
this.actionsMenu = Ext.select('div.actions-menu');
this.btnCancelPrefs = Ext.select('a.btn-cancel-prefs');
},
/* DOM NODES TO BE SELECTED ONLY WHEN THE FUNCTION IS INITIALIZED
* ************************************************** ************************************************** ******************/
getStaticElements: function(){
},
/* EVENT HANDLERS UPDATED WHEN THE DOM IS MODIFIED
* ************************************************** ************************************************** ******************/
dynamicEventHandlers: function(){
this.tabBtns.on('click', function(e){
var target = e.getTarget('li.tab', null, true);
this.switchTabs(target);
}, this);
this.btnTabOptions.on('click', function(e){
this.showTabOptions(e)
}, this);
this.gadgets.on('mouseover', function(e, el){
this.highlightGadgets(e, el);
}, this);
this.tabOptRemove.on('click', function(e, el){
if (this.tabOptRemove)
this.removeTab(e, el);
this.tabOptRemove = null;
}, this);
this.tabOptRename.on('click', function(e, el){
this.renameTab(e, el);
}, this);
this.tabBtns.on('dblclick', function(e, el){
this.renameTab(e, el, true);
}, this);
this.btnActions.on('click', function(e, el){
this.showGadgetOptions(e, el);
}, this);
this.btnCancelPrefs.on('click', function(e, el){
this.gadgetPrefs.addClass('hide');
this.gadgetInner.removeClass('hide');
}, this)
},
/* EVENT HANDLERS UPDATED WHEN THE FUNCTION IS INITIALIZED
* ************************************************** ************************************************** ******************/
staticEventHandlers: function(){
this.btnSaveTab.on('click', function(el){
this.saveNewTab(el);
this.refresh();
}, this);
this.btnNewTab.on('click', function(e, el){
this.showNewTabDialog(e, el);
}, this);
Ext.get('cancel-tab').on('click', function(){
this.hideNewTabDialog();
}, this);
this.btnSave.on('click', function(e){
e.preventDefault();
this.addInputs();
// this.gadgetForm.dom.submit();
}, this);
},
/* REFRESH THE DYNAMIC ELEMENTS, DYNAMIC EVENT HANDLERS AND DRAG / DROP ITEMS
* ************************************************** ************************************************** ******************/
refresh: function(){
this.getDynamicElements();
this.dynamicEventHandlers();
this.getDDItems();
this.setQTs();
}
}
}();
Ext.EventManager.onDocumentReady(function(){
MyGadgetsService.initialize();
});
Hi, if it's at all helpful, I have the page I'm working on up on a testing server. It is http://mydmc.dcrwebworks.net/my-gadgets-service. This version doesn't have the quicktips implemented the way I described in my last post because the page on the testing server needs to be functional so that people can review it.
I really would appreciate some help with this, I really need to get the quicktips functioning in order to get this project wrapped up and seems like fairly simple issue. I just don't know enough about Ext and I am having trouble finding the info I need in the docs.
Cheers!
 Nortel Unveils Vision, Strategy for Israeli High-Performance Net
 Busy Friday Leads to Strong Close for Net Stocks |
HOME