'
})
],
buttons: [{text: 'Login',
minWidth: 75,
type:'submit',
handler: function() {
if (f.getForm().isValid())
{
f.getForm().submit({
waitMsg:'Logging In...',
success: function(form, action) {
window.location.href=action.result.msg;
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert("Failure", "Form fields may not be submitted with invalid values");
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert("Failure", "Ajax communication failed");
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert("Failure", action.result.msg);
}
}
}
);
}
else
{
Ext.Msg.alert('Error', 'Please Complete the form!');
}
}},
{text: 'Cancel',
minWidth: 75,
handler: function() {loginDlg.close()}},
{text: 'Forgot Password',
minWidth: 75,
handler: function() {loginDlg.close();showResetPwd();}}
]
});
var loginDlg = new Ext.Window({
height: 200,
width: 300,
closable: true,
closeAction : 'close',
modal: true,
frame: true,
resizable: false,
title: 'Login',
layout: 'fit',
items: f
});
loginDlg.show(redir);
} //end showLogin
function getLoginForm(redir)
{
var f = new Ext.FormPanel({
labelWidth: 100,
url: '/A_DoLogin.jsp',
frame: true,
defaults: {width: 150},
items: [
{xtype: 'hidden',
name: 'redir',
value: redir
},
{xtype: 'textfield',
fieldLabel: 'Email address',
name: 'email',
vtype: 'email'},
{xtype: 'textfield',
inputType: 'password',
fieldLabel: 'Password',
name: 'password',
allowBlank: false},
{xtype: 'checkbox',
fieldLabel: 'Remember Me',
name: 'rememberme',
vtype: 'rememberme'},
new Ext.Panel({
fieldLabel:'Login with',
html:' '
})
],
buttons: [{text: 'Login',
minWidth: 75,
handler: function() {
if (f.getForm().isValid())
{
f.getForm().submit({
waitMsg:'Logging In...',
success: function(form, action) {
window.location.href=action.result.msg;
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert("Failure", "Form fields may not be submitted with invalid values");
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert("Failure", "Ajax communication failed");
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert("Failure", action.result.msg);
}
}
}
);
}
else
{
Ext.Msg.alert('Error', 'Please Complete the form!');
}
}}]
});
return f;
}
function getVerifForm(email)
{
var f = new Ext.FormPanel({
labelWidth: 100,
url: '/MFSAjaxServlet?ACTION=DOVERIFYCODE',
frame: true,
width:300,
defaults: {width: 150},
items: [
{xtype: 'hidden',
value: email,
name: 'email',
vtype: 'email'},
{xtype: 'textfield',
fieldLabel: 'Verification Code',
name: 'token',
allowBlank: false}
],
buttons: [{text: 'Verify Account',
minWidth: 75,
handler: function() {
if (f.getForm().isValid())
{
f.getForm().submit({
waitMsg:'Verifying Account...',
success: function(form, action) {
//window.location.href=action.result.msg;
pageTracker._trackEvent('Register', 'Site', email);
Ext.Msg.alert("Token Verified.","Token Successfully Verified.Your opinion is VERY important to us, let us know anything on your mind.
'
})
],
buttons: [{text: 'Register',
minWidth: 75,
handler: function() {
if (f.getForm().isValid())
{
f.getForm().submit({
waitMsg:'Registering...',
success: function(form, action) {
window.location.href='T_VerifyReqd.jsp';
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert("Failure", "Form fields may not be submitted with invalid values");
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert("Failure", "Ajax communication failed");
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert("Failure", action.result.msg);
}
}
}
);
}
else
{
Ext.Msg.alert('Error', 'Please Complete the form!');
}
}},
{text: 'Cancel',
minWidth: 75,
handler: function() {regDlg.close()}}]
});
var regDlg = new Ext.Window({
height: 300,
width: 300,
closable: true,
closeAction : 'hide',
modal: true,
frame: true,
resizable: false,
title: 'Register',
layout: 'fit',
items: f
});
regDlg.show();
} //end showRegister
function setupValidations()
{
Ext.apply(Ext.form.VTypes, {
nicknameUnique: function (val, field){
Ext.Ajax.request({
url : '/MFSAjaxServlet' ,
params : { ACTION : 'NICKCHECK', nickname: val },
method: 'GET',
success: function ( result, request) {
if(result.responseText=='AVAILABLE')
{
}
else
{
field.markInvalid("Nickname already taken.");
}
},
failure: function ( result, request) {
field.markInvalid("Error validating nickname.");
}
});
return true;
},
nicknameUniqueText: "Nickname already taken."
});
}
function createFollowBtn(elemID,uid)
{
var btn = new Ext.Button({
text: 'Follow',
scale: 'small',
handler: function()
{
Ext.Ajax.request({
url : 'MFSAjaxServlet' ,
params : { ACTION : 'FOLLOW', uid2 : uid },
method: 'GET',
success: function ( result, request) {
var ok = result.responseText;
if (ok == 'OK')
{
btn.hide();
createUnFollowBtn(elemID,uid);
}
else
{
Ext.MessageBox.alert('Failed', 'Unable to follow.');
}
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', 'Unable to follow.');
}
});
}
});
btn.render(elemID);
}
function createUnFollowBtn(elemID,uid)
{
var btn = new Ext.Button({
text: 'Un-Follow',
scale: 'small',
handler: function()
{
Ext.Ajax.request({
url : 'MFSAjaxServlet' ,
params : { ACTION : 'UNFOLLOW', uid2 : uid },
method: 'GET',
success: function ( result, request) {
var ok = result.responseText;
if (ok == 'OK')
{
btn.hide();
createFollowBtn(elemID,uid);
}
else
{
Ext.MessageBox.alert('Failed', 'Unable to follow.');
}
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', 'Unable to follow.');
}
});
}
});
btn.render(elemID);
}
function createRatingsGrid(uid, nick)
{
var store = new Ext.data.JsonStore({
root: 'Result',
totalProperty: 'total',
idProperty: 'id',
remoteSort: true,
url: '/MFSAjaxServlet?ACTION=GETUSERRATINGS&uid='+uid,
fields: [
'name',
{name: 'displayDate', mapping: 'displayDate', type: 'date', dateFormat: 'm/d/Y'},
'rank', 'id','comments','city','state','userDislayStr'
]
});
store.setDefaultSort('creationDate', 'desc');
function renderDestLink(value, p, record){
return String.format(
'{1}',
record.id, value);
}
function renderDate(value, p, r){
return String.format('{0}', value.dateFormat('m/d/Y'));
}
function renderLocation(value, p, r){
return String.format('{0}, {1}', value, r.data.state);
}
var title = "Your ";
if (nick != null)
title = nick+"\'s ";
var grid = new Ext.grid.GridPanel({
width:750,
height:525,
title:''+title+'Ratings',
store: store,
trackMouseOver:false,
disableSelection:true,
loadMask: true,
columns:[{
id: 'destname', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Name",
dataIndex: 'name',
width: 250,
sortable: true,
renderer:renderDestLink
},{
header: "Location",
dataIndex: 'city',
width: 150,
renderer: renderLocation,
sortable: true
},{
header: "Rating",
dataIndex: 'rank',
width: 70,
align: 'right',
sortable: true
},{
id: 'date',
renderer: renderDate,
header: "Date",
dataIndex: 'displayDate',
width: 150,
sortable: true
}],
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying Ratings {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
store.load({params:{start:0, limit:25}});
ratingGrid = true;
return grid;
}
function rpxLinkClick()
{
return RPXNOW.show(RPXNOW.token_url,'https://thesuggestr.rpxnow.com/openid/v2/signin');
}
function showGetSuggestion(loggedIn)
{
var locationStore = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
url: '/MFSAjaxServlet?ACTION=GETLOCATIONS',
storeId: 'myStore',
// reader configs
root: 'Result',
idProperty: 'genField1',
fields: ['genField1']
});
var tagStore = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
url: '/MFSAjaxServlet?ACTION=GETTAGSCATS&TYPE=FOR',
storeId: 'myTagStore',
// reader configs
root: 'Result',
idProperty: 'description',
fields: ['description']
});
var searchfor = new Ext.form.ComboBox({
store: tagStore,
displayField:'description',
valueField:'description',
fieldLabel:'What are you searching for?',
labelStyle:'width:200px',
typeAhead: false,
forceSelection: false,
mode: 'remote',
minChars: 2,
triggerAction: 'all',
emptyText:'Enter a Tag or Keyword...',
selectOnFocus:true,
id:'searchforDlg',
name:'searchfor',
width:250,
triggerClass:'displayNone',
allowBlank: false
});
var searchwhere = new Ext.form.ComboBox({
// tpl: '
',
iconCls: 'x-icon-tickets',
tabTip: 'See maps of your suggestions and wishlist.',
style: 'padding: 10px;',
autoLoad: {url:'/A_MyMaps.jsp',
callback: function() { }
}
,
listeners:{ activate:function(p) {resizeWindow(baseHeight);}}
},
{
title: 'I\'m Following',
iconCls: 'x-icon-tickets',
tabTip: 'See all the people you\'re following.',
style: 'padding: 10px;',
autoLoad: {url:'/A_UHFollowing.jsp?profileid='+uid,scripts:true,
callback: function() { }
}
,
listeners:{ activate:function(p) {resizeWindow(baseHeight);}}
},
{
title: 'My Followers',
iconCls: 'x-icon-tickets',
tabTip: 'See all the people following you.',
style: 'padding: 10px;',
autoLoad: {url:'/A_UHFollowers.jsp?profileid='+uid,script:true,
callback: function() { }
}
,
listeners:{ activate:function(p) {resizeWindow(baseHeight);}}
},
{
title: 'My Ratings',
iconCls: 'x-icon-tickets',
tabTip: 'See All Your Ratings.',
style: 'padding: 10px;',
listeners:{
activate: function(p)
{
if (ratingGrid == false)
{
p.add({
border:false,
html:'One of the keys to our personalized suggestions is to get as many ratings and people as possible using the site. By inviting some friends you\'ll help make the site more valuable for yourself and others. THANKS!
'+getvaluedisplay(value),r.data.comment);
//else
return String.format(getvaluedisplay(value));
}
function renderAuthor(value, p, r){
if(value>0)
{
var r2 = value * 100;
var corrint=Math.round(r2);
var cs=corrint+'';
var c = cs.charAt(0);
var str = ""+c;
if (corrint > 99)
str = "10";
if (corrint <= 10)
str = "1";
var img2 = str+"meter.png";
if(r.data.bloguser=="1")
{
return String.format('![\"Featured](\"v2images/blogicon12.png\" "\\"Featured")
{0} {0}', r.data.creator,r.data.userID);
}
else
return String.format('{0}', r.data.creator,r.data.userID);
}
}
var grid = new Ext.grid.GridPanel({
width:640,
height:600,
store: store,
trackMouseOver:false,
disableSelection:true,
applyTo:'ratingsgrid',
loadMask: true,
columns:[{
id: 'id', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Who (Click to sort by similarity)",
dataIndex: 'correlation',
width: 350,
renderer:renderAuthor,
sortable:true
},{
header: "Rating",
dataIndex: 'rank',
width: 150,
align: 'right',
sortable: true,
renderer:getRating
},{
id: 'date',
header: "Date",
dataIndex: 'displayDate',
width: 150,
sortable: true,
renderer:renderDate
}],
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
if(record.data.comment==null)
p.body="";
else
p.body = ''+record.data.comment+'
'; return 'x-grid3-row-expanded'; } return 'x-grid3-row-collapsed'; } }, bbar: new Ext.PagingToolbar({ pageSize: 20, store: store, displayInfo: true, displayMsg: 'Displaying Ratings {0} - {1} of {2}', emptyMsg: "No topics to display" }) }); store.load({params:{start:0, limit:20}}); globalstore=store; } function reloadGridCommentsOnly(val) { if(val.checked==true) globalstore.load({params:{ORDERBY:'commentsonly',start:0,limit:20}}); else globalstore.load({params:{start:0,limit:20}}); } function showEditMsg(destid) { var fs = new Ext.FormPanel({ frame: false, title:'Add / Edit Comment', labelAlign: 'top', labelWidth: 0, id:'editcomment', waitMsgTarget: true, url:'A_SetDestCommentJSON.jsp', header:false, border:false, listeners: { beforerender: function(){ this.form.load({ url:'/A_GetDestCommentJSON.jsp?destid='+destid, method:'GET', success:function(form, action) { editDlg.show(); return true; }, failure:function(form, action) { Ext.MessageBox.alert('Message', 'You must rate this place before you can comment on it.'); } }); } }, items: [{ name: 'eid', xtype:'hidden' }, { name: 'destid', xtype:'hidden' }, { fieldLabel:'Please enter your comment', name: 'comment', id: 'comment', allowBlank: false, xtype: 'htmleditor', enableColors: false, enableAlignments: false, width:400 }], buttons: [{text: 'Submit', minWidth: 75, handler: function() { if (fs.getForm().isValid()) { fs.getForm().submit({ waitMsg:'Adding comment...', success: function(form, action) { // Ext.Msg.alert("Success", 'Comment Updated'); editDlg.close(); }, failure: function(form, action) { switch (action.failureType) { case Ext.form.Action.CLIENT_INVALID: Ext.Msg.alert("Failure", "Form fields may not be submitted with invalid values"); break; case Ext.form.Action.CONNECT_FAILURE: Ext.Msg.alert("Failure", "Ajax communication failed"); break; case Ext.form.Action.SERVER_INVALID: Ext.Msg.alert("Failure", action.result.msg); } } } ); } else { Ext.Msg.alert('Error', 'Please Complete the form!'); } }}, {text: 'Cancel', minWidth: 75, handler: function() {editDlg.close()}}] }); var editDlg = new Ext.Window({ height: 350, width: 450, closable: true, closeAction : 'close', modal: true, frame: true, resizable: false, title: 'Add/Edit Comment', layout: 'fit', items: fs }); fs.getForm().load({ url:'/A_GetDestCommentJSON.jsp?destid='+destid, method:'GET', success:function(form, action) { editDlg.show(); return true; }, failure:function(form, action) { Ext.MessageBox.alert('Message', 'You must rate this place before you can comment on it.'); } }); } function createTabs(editDisabled, ownerDisabled, videoDisabled,offerDisabled) { var aTab = 0; if (ownerDisabled == false) aTab = 3; var tabs = new Ext.TabPanel({ renderTo: 'mainAdditonalInfo', id: 'tabs', activeTab: aTab, frame:true, plain:true, height:725, defaults:{autoHeight: true}, items:[ {contentEl:'ratingtab', title: 'Reviews'}, {contentEl:'detailstab', title: 'Details'}, {contentEl:'editorialtab', title: 'Editorial', disabled: editDisabled}, {contentEl:'ownertab', title: 'Owner\'s Message',disabled: ownerDisabled}, {contentEl:'videotab', title: 'Videos',disabled: videoDisabled}, {contentEl:'offertab', title: 'Offers',disabled: offerDisabled} ] }) } function switchToDetails() { var panel = Ext.ComponentMgr.get('tabs'); panel.setActiveTab(1); } function switchToReviews() { var panel = Ext.ComponentMgr.get('tabs'); panel.setActiveTab(0); } var tempIdCounter = 0; function addTag(dest,tag,userid) { Ext.Ajax.request({ url: '/TagServlet?ACTION=ADDTAG&ItemID='+dest+'&Tag='+tag+'&USERID='+userid, success: function(o) { }, failure: function(o){}, headers: { 'my-header': 'foo' }, params: { foo: 'bar' } }); // Default headers to pass in every request Ext.Ajax.defaultHeaders = { 'Powered-By': 'Ext' }; } function initTags(uid,destid) { Ext.override(Ext.ux.form.SuperBoxSelect, { beforeBlur: Ext.emptyFn }); var loggedin=true; if( uid==null || uid=="-1" || uid=="") loggedin=false; var store2 = new Ext.data.JsonStore({ root: 'Result', autoDestroy: true, storeId: 'store2', totalProperty: 'total', idProperty: 'tagid', url: '/TagServlet?ACTION=GETTAG&CurrentTag=', fields: [ 'tagtext','tagid' ,'count'] }); var tcStore = new Ext.data.JsonStore({ // store configs autoDestroy: true, url: '/TagServlet?ACTION=GETCLOUDJSON&ItemID='+destid+'&LoggedIn='+loggedin, storeId: 'tcStore', // reader configs root: 'Result', idProperty: 'tagid', fields: ['tagid','tagtext','count'] }); var cloud = new Ext.ux.TagCloud({ store: tcStore, displayField: 'tagtext', weightField: 'count', displayWeight: true } ); cloud.on('tagselect', function(cloud, record, index){ //alert('You clicked on "'+record.get('tagtext')+'"!'); var zip = Ext.getDom('postalcode').innerHTML; window.location.href = 'T_Search.jsp?searchfor='+record.get('tagtext')+'&searchwhere='+zip; }); cloud.render('tagcloud'); tcStore.load(); if(uid!=null) { var form2 = new Ext.form.FormPanel({ id:'f2Form', renderTo: 'f2', bodyStyle: 'border:0;', width: 240, labelWidth:0, items: [{ allowBlank:true, hideLabel:true, allowAddNewData: true, id:'tagselector', xtype:'superboxselect', fieldLabel:'', emptyText: 'Enter a tag', resizable: true, name: 'tags', anchor:'100%', store: store2, displayField: 'tagtext', valueField: 'tagtext', extraItemCls: 'x-tag', minChars:2, listeners: { beforeadditem: function(bs,v){ //console.log('beforeadditem:', v); //return false; }, additem: function(bs,v){ //console.log('additem:', v); }, beforeremoveitem: function(bs,v){ //console.log('beforeremoveitem:', v); //return false; }, removeitem: function(bs,v){ //console.log('removeitem:', v); }, newitemdata: function(bs,v){ //console.log('removeitem:', v); bs.setValueEx({tagtext:v}); } } }, { border: false, html:'Hit Enter to add a brand new tag.' } ], buttons: [{ text: 'Add Tags', scope: this, handler: function(){ var tags=Ext.getCmp('tagselector').getValue(); //alert(tags); var myArray = tags.split(","); for (var i = 0 ; i < myArray.length ; i++){ //alert(myArray[i]); addTag(destid,myArray[i],uid); } tcStore.load(); cloud.render('tagcloud'); Ext.getCmp('tagselector').reset(); } }] }); } } Ext.ns('Ext.ux.window'); /** * @class Ext.ux.window.MessageWindowGroup * @extends Ext.WindowGroup * An object that represents a group of {@link Ext.ux.window.MessageWindow} instances * and provides position management in addition to the standard Window Group features. * @constructor */ Ext.ux.window.MessageWindowGroup = function (config) { config = config || {}; var mgr = new Ext.WindowGroup(); mgr.positions = []; Ext.apply(mgr, config); return mgr; }; /** * @class Ext.ux.window.MessageWindowMgr * @extends Ext.ux.window.MessageWindowGroup * The default global Message Window group that is available automatically. To have * more than one group of Message Windows to utilize separate positioning in addition * to the standard Window Manager features create additional instances of * {@link Ext.ux.window.MessageWindowGroup} as needed. * @singleton */ Ext.ux.window.MessageWindowMgr = Ext.ux.window.MessageWindowGroup(); /** * @class Ext.ux.window.MessageWindow * @extends Ext.Window *If you are looking for a lightweight implementation of Toast or Notification windows this is * NOT the class you want. This class builds upon the implementation by Edouard Fattal. * This class creates a specialized Window for notification messages and offers the following features:
* *
* var group2 = new Ext.ux.window.MessageWindowGroup({
* //override any defaults or add to base class instance
* groupId: 2, //groupId not implemented at this time
* zseed: 2000 //change the zseed (default = 9000)
* });
* var mw1 = new Ext.ux.window.MessageWindow({
* manager: group2//specify the MessageWindowGroup manager (instead of using default manager)
* });
* var mw2 = new Ext.ux.window.MessageWindow({
* manager: group2//specify the MessageWindowGroup manager (instead of using default manager)
* });
* var mw3 = new Ext.ux.window.MessageWindow({
* //will use default manager
* });
*
* hideFx: {
* delay: 5000, //time in milliseconds to delay the start of the effect
* duration: 0.25, //duration of the effect
* mode: 'standard', // null = will not hide
* // 'standard' = traditional window hide (vanish)
* // 'standard' = traditional window hide (vanish)
* // anything else will use the default of ghost
* useProxy: true //default is false to hide window instead
* }
*
* msgs: [
* {text: 'Some text message 1', url:'http://extjs.com/support/training/'},
* {text: 'Some text message 2 »', url:'http://extjs.com/support/training/'}
* ],
*
* //configure a different origin than the default bottom right corner of the window:
* origin: {
* //get window's Ext.element:
* el: Ext.get('northRegion'), //element to align to (defaults to document)
* increment: true, // default is to increment position of subsequent messages
* pos: "bl-bl", // position to align to (see {@link Ext.Element#alignTo} for more details defaults to "br-br").
* offX: 10, // amount to offset horizontally (-20 by default)
* offY: 0 // amount to offset vertically (-20 by default)
* spaY: 5 // vertical spacing between adjacent messages (5 by default)
* },
*
* pinState effect
* -------- ------
* null window will show/hide itself, user can not control
* 'pin' window will initially show itself in pinned state, user will need to click unpin to hide
* 'unpin' window will initially show itself in unpinned state, user will need to click pin to keep open
*
*/
pinState: 'unpin',
/**
* @cfg {Boolean} plain
* True to render the window body with a transparent background so that it will blend into the framing
* elements, false to add a lighter background color to visually highlight the body element and separate it
* more distinctly from the surrounding frame (defaults to false).
*/
plain: false,
/**
* @cfg {Boolean} resizable
* True to allow user resizing at each edge and corner of the window, false to disable resizing (defaults to false).
*/
resizable: false,
/**
* @cfg {String} resizeHandles
* A valid {@link Ext.Resizable} handles config string (defaults to 'all'). Only applies when resizable = true.
*/
/**
* @cfg {String} textHelp
* Qtip text to display for help tool (defaults to 'Get hel'). Only applicable if help = true.
*/
textHelp: 'Get help',
/**
* @cfg {String} textPin
* Qtip text to display for pin tool. Only applicable if {@link pinState} == 'pin' or 'unpin'.
*/
textPin: 'Pin this to prevent closing',
/**
* @cfg {String} textUnpin
* Qtip text to display for unpin tool. Only applicable if {@link pinState} == 'pin' or 'unpin'.
*/
textUnpin: 'Unpin this to close',
/**
* @cfg {Number} x
* The X position of the left edge of the Window on initial showing. Defaults to centering the Window within
* the width of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to).
*/
/**
* @cfg {Number} y
* The Y position of the top edge of the Window on initial showing. Defaults to centering the Window within
* the height of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to).
*/
/** @private */
initHidden : true,
/** @private */
initComponent : function () {
Ext.apply(this, {
collapsible: false,
footer: false,
minHeight: 20,
stateful: false
});
//if interval is specified automatically show message windows
if (this.interval) {
this.startAutoRefresh();
}
//set up automatic hide/close of window if so configured
if (this.autoHide) {
if (this.pinState === 'unpin') {
this.task = new Ext.util.DelayedTask( this[this.hideAction], this, [this.animateTarget]);
}
}
//new
else {
this.closable = true;
}
//added this.closable
//call parent
Ext.ux.window.MessageWindow.superclass.initComponent.call(this);
//add listeners
this.on({
mouseout: {
scope: this,
fn: this.onMouseout
}
});
//add events
this.addEvents(
/**
* @event activate
* Fires after the window has been visually activated via {@link setActive}.
* @param {Ext.ux.window.MessageWindow} this
*/
/**
* @event deactivate
* Fires after the window has been visually deactivated via {@link setActive}.
* @param {Ext.ux.window.MessageWindow} this
*/
/**
* @event resize
* Fires after the window has been resized.
* @param {Ext.ux.window.MessageWindow} this
* @param {Number} width The window's new width
* @param {Number} height The window's new height
*/
/**
* @event maximize
* Fires after the window has been maximized.
* @param {Ext.ux.window.MessageWindow} this
*/
/**
* @event minimize
* Fires after the window has been minimized.
* @param {Ext.ux.window.MessageWindow} this
*/
/**
* @event restore
* Fires after the window has been restored to its original size after being maximized.
* @param {Ext.ux.window.MessageWindow} this
*/
/**
* @event pinned
* Fires after the window has been pinned.
* @param {Ext.ux.window.MessageWindow} this
*/
'afterpin',
/**
* @event unpinned
* Fires after the window has been unpinned.
* @param {Ext.ux.window.MessageWindow} this
*/
'afterunpin',
/**
* @event click
* Fires after the window has been clicked.
* @param {Ext.ux.window.MessageWindow} this
* @param {Ext.ux.window.MessageWindow} msg The message from the message array if configured.
*/
'click');
this.initFx();
},
//override
/** @private */
initEvents: function () {
//use a slighly enhanced Ext.ux.window.MessageWindowMgr instead of the default WindowMgr
this.manager = this.manager || Ext.ux.window.MessageWindowMgr;
//the parent class will register, so no need to do it here:
//this.manager = this.manager || Ext.WindowMgr;
Ext.ux.window.MessageWindow.superclass.initEvents.call(this);
},
focus: function () {
Ext.ux.window.MessageWindow.superclass.focus.call(this);
},
/** @private */
toFront: function () {
if(this.manager.bringToFront(this)){
//only focus if configured as such
if(this.focusOnShow){
this.focus();
}
}
return this;
},
/** @private */
initTools: function () {
if (this.pinOnClick) {
this.addTool({
id: 'unpin', // image points left
handler: this.handlePin,
//set initial visibility (also check if pinState is null)
hidden: (!this.pinState || this.pinState === 'pin'),
qtip: this.textPin,
scope: this
});
this.addTool({
id: 'pin',// image points down
handler: this.handleUnpin,
hidden: (!this.pinState || this.pinState === 'unpin'),
qtip: this.textUnpin,
scope: this
});
}
if (this.help) {
this.addTool({
id: 'help',
handler: this.handleHelp,
qtip: this.textHelp,
scope: this
});
}
// let the default tools be applied farthest to the right
Ext.ux.window.MessageWindow.superclass.initTools.apply(this, arguments);
},
/** @private */
onRender: function (ct, position) {
Ext.ux.window.MessageWindow.superclass.onRender.call(this, ct, position);
//after call to parent class onRender this.el exists.
//clip part of the window (for example the recurring messages that
//eject from a border have the bottom rounded edge, etc. clipped off.
if (this.clip) {
switch (this.clip) {
case 'bottom':
Ext.destroy(this.getEl().child('.' + this.baseCls + '-bl'));
break;
}
}
//add a class when hovering over in order to disable
//any updates to the window while hovering over
if (true) {
this.el.addClassOnOver(this.hoverCls);
}
//add click listener to body
Ext.fly(this.body.dom).on('click', this.handleClick, this);
},
////////////////////////////////
// Temporary override?
/**
* Closes the window, removes it from the DOM and destroys the window object. The beforeclose event is fired
* before the close happens and will cancel the close action if it returns false.
*/
// close : function(){
close : function(animateTarget){
if(this.fireEvent("beforeclose", this) !== false){
// this.hide(null, function(){
this.hide(animateTarget, function(){
this.fireEvent('close', this);
this.destroy();
}, this);
}
},
/////////////////////////////////
/**
* Toggles the active pin state.
*/
togglePinState: function (event) {
if (this.pinOnClick) {
//check which tool is visible
if (this.tools.unpin.isVisible()) {
this.handlePin(event, this.tools.unpin, this);
} else {
this.handleUnpin(event, this.tools.pin, this);
}
}
},
/**
* Override to the Panel Class createElement method. This method is called by
* Panel Class' onRender(). Normally the panel class will create a header in the
* *-tc class, to utilize the default box class for styling we'll move the header
* inside the *-mc class to utilize
Ext.Element.boxMarkup:
SuperBoxSelect is an extension of the ComboBox component that displays selected items as labelled boxes within the form field. As seen on facebook, hotmail and other sites.
*The SuperBoxSelect component was inspired by and based on the BoxSelect component found here: http://efattal.fr/en/extjs/extuxboxselect/
* * @author Dan Humphrey created for ******CENSORED****** * @class Ext.ux.form.SuperBoxSelect * @extends Ext.form.ComboBox * @constructor * @component * @version 1.0b1 * @license Unlikely * */ Ext.ux.form.SuperBoxSelect = function(config) { Ext.ux.form.SuperBoxSelect.superclass.constructor.call(this,config); this.addEvents({ /** * Fires before an item is added to the component via user interaction. Return false from the callback function to prevent the item from being added. * @event beforeadditem * @memberOf Ext.ux.form.SuperBoxSelect * @param {SuperBoxSelect} this * @param {Mixed} value The new item value */ 'beforeadditem' : true, /** * Fires after a new item is added to the component. * @event additem * @memberOf Ext.ux.form.SuperBoxSelect * @param {SuperBoxSelect} this * @param {Mixed} value The new item value */ 'additem' : true, /** * Fires when the allowAddNewData config is set to true, and a user attempts to add an item that is not in the data store. * @event additem * @memberOf Ext.ux.form.SuperBoxSelect * @param {SuperBoxSelect} this * @param {Mixed} value The new item value */ 'newitemdata' : true, /** * Fires when an item's remove button is clicked. Return false from the callback function to prevent the item from being removed. * @event beforeremoveitem * @memberOf Ext.ux.form.SuperBoxSelect * @param {SuperBoxSelect} this * @param {Mixed} value The item value */ 'beforeremoveitem' : true, /** * Fires after an item has been removed. * @event removeitem * @memberOf Ext.ux.form.SuperBoxSelect * @param {SuperBoxSelect} this * @param {Mixed} value The item value */ 'removeitem' : true }); }; /** * @private hide from doc gen */ Ext.ux.form.SuperBoxSelect = Ext.extend(Ext.ux.form.SuperBoxSelect,Ext.form.ComboBox,{ /** * @cfg {Boolean} allowAddNewData When set to true, allows items to be added (via the setValueEx and addItem methods) that do not already exist in the data store. Defaults to false. */ allowAddNewData: false, /** * @cfg {Boolean} backspaceDeletesLastItem When set to false, the BACKSPACE key will focus the last selected item. When set to true, the last item will be immediately deleted. Defaults to true. */ backspaceDeletesLastItem: true, /** * @cfg {String} classField The underlying data field that will be used to supply an additional class to each item. */ classField: null, /** * @cfg {String} clearBtnCls An additional class to add to the in-field clear button. */ clearBtnCls: '', /** * @cfg {String/XTemplate} displayFieldTpl A template for rendering the displayField in each selected item. Defaults to null. */ displayFieldTpl: null, /** * @cfg {String} extraItemCls An additional css class to apply to each item. */ extraItemCls: '', /** * @cfg {String/Object/Function} extraItemStyle Additional css style(s) to apply to each item. Should be a valid argument to Ext.Element.applyStyles. */ extraItemStyle: '', /** * @cfg {String} expandBtnCls An additional class to add to the in-field expand button. */ expandBtnCls: '', /** * @cfg {Boolean} fixFocusOnTabSelect When set to true, the component will not lose focus when a list item is selected with the TAB key. Defaults to true. */ fixFocusOnTabSelect: true, /** * @cfg {Boolean} navigateItemsWithTab When set to true the tab key will navigate between selected items. Defaults to true. */ navigateItemsWithTab: true, /** * @cfg {Boolean} pinList When set to true the select list will be pinned to allow for multiple selections. Defaults to true. */ pinList: true, /** * @cfg {Boolean} preventDuplicates When set to true unique item values will be enforced. Defaults to true. */ preventDuplicates: true, /** * @cfg {Boolean} removeValuesFromStore When set to true, selected records will be removed from the store. Defaults to true. */ removeValuesFromStore: true, /** * @cfg {String} renderFieldBtns When set to true, will render in-field buttons for clearing the component, and displaying the list for selection. Defaults to true. */ renderFieldBtns: true, /** * @cfg {Boolean} stackItems When set to true, the items will be stacked 1 per line. Defaults to false which displays the items inline. */ stackItems: false, /** * @cfg {String} styleField The underlying data field that will be used to supply additional css styles to each item. */ styleField : null, /** * @cfg {String} valueDelimiter The delimiter to use when joining and splitting value arrays and strings. */ valueDelimiter: ',', initComponent:function() { this.items = new Ext.util.MixedCollection(false); this.usedRecords = new Ext.util.MixedCollection(false); this.hideTrigger = true; this.grow = false; this.resizable = false; this.multiSelectMode = false; Ext.ux.form.SuperBoxSelect.superclass.initComponent.call(this); }, onRender:function(ct, position) { Ext.ux.form.SuperBoxSelect.superclass.onRender.call(this, ct, position); this.el.removeClass('x-form-text'); this.el.addClass('x-superboxselect-input-field'); this.wrapEl = this.el.wrap({ tag : 'ul' }); var extraClass = (this.stackItems === true) ? 'x-superboxselect-stacked' : ''; if(this.renderFieldBtns){ extraClass += ' x-superboxselect-display-btns'; } this.outerWrapEl = this.wrapEl.wrap({ tag : 'div', cls: 'x-form-text x-superboxselect ' + extraClass }); this.inputEl = this.el.wrap({ tag : 'li', cls : 'x-superboxselect-input' }); if(this.renderFieldBtns){ this.setupFieldButtons(); this.manageClearBtn(); } this.setupFormInterception(); }, setupFieldButtons : function(){ this.buttonWrap = this.outerWrapEl.createChild({ cls: 'x-superboxselect-btns' }); this.buttonClear = this.buttonWrap.createChild({ tag:'div', cls: 'x-superboxselect-btn-clear ' + this.clearBtnCls }); this.buttonExpand = this.buttonWrap.createChild({ tag:'div', cls: 'x-superboxselect-btn-expand ' + this.expandBtnCls }); this.initButtonEvents(); }, initButtonEvents : function() { this.buttonClear.addClassOnOver('x-superboxselect-btn-over'); this.buttonClear.on('click',function(e){ e.stopEvent(); if(this.disabled){ return; } this.clearValue(); this.el.dom.focus(); },this); this.buttonExpand.addClassOnOver('x-superboxselect-btn-over'); this.buttonExpand.on('click',function(e){ e.stopEvent(); if(this.disabled){ return; } if(this.isExpanded()){ this.multiSelectMode = false; }else if(this.pinList){ this.multiSelectMode = true; } this.onTriggerClick(); },this); }, removeButtonEvents : function() { this.buttonClear.removeAllListeners(); this.buttonExpand.removeAllListeners(); }, clearCurrentFocus : function(){ if(this.currentFocus){ this.currentFocus.onLnkBlur(); this.currentFocus = null; } }, initEvents : function(){ this.el.on("keydown", this.onKeyDownHandler, this); this.el.on("keyup", this.onKeyUpBuffered, this); this.el.on("click", function(){ this.clearCurrentFocus(); this.collapse(); this.autoSize(); }, this); this.el.on('focus', this.clearCurrentFocus,this); this.el.on("blur", function(){ this.clearCurrentFocus(); if(this.el.dom.value !== ''){ this.applyEmptyText(); this.autoSize(); } }, this); this.on('collapse',function(){ this.multiSelectMode = false; },this); this.on('expand',this.clearCurrentFocus,this); this.wrapEl.on('click', function(e){ e.stopEvent(); this.collapse(); this.el.dom.focus(); this.clearCurrentFocus(); }, this); this.outerWrapEl.on('click', function(e){ e.stopEvent(); this.collapse(); this.el.dom.focus(); this.clearCurrentFocus(); }, this); var el = this.el; Ext.apply(this.inputEl, { 'focus': function(){ el.focus(); } }); Ext.ux.form.SuperBoxSelect.superclass.initEvents.call(this); this.keyNav.tab = function(e){ if(this.fixFocusOnTabSelect && this.isExpanded()){ e.stopEvent(); this.el.blur(); this.onViewClick(false); this.focus(false,10); return true; } this.onViewClick(false); if(this.el.dom.value !== ''){ this.setRawValue(''); } return true; }; this.keyNav.down = function(e){ if(!this.isExpanded() && !this.currentFocus){ this.onTriggerClick(); }else{ this.inKeyMode = true; this.selectNext(); } }; this.keyNav.enter = function(e){ this.onViewClick(); this.delayedCheck = true; this.unsetDelayCheck.defer(10, this); return true; }; }, markInvalid : function(msg){ if(!this.rendered || this.preventMark){ // not rendered return; } this.outerWrapEl.addClass(this.invalidClass); msg = msg || this.invalidText; switch(this.msgTarget){ case 'qtip': this.el.dom.qtip = msg; this.el.dom.qclass = 'x-form-invalid-tip'; this.wrapEl.dom.qtip = msg; this.wrapEl.dom.qclass = 'x-form-invalid-tip'; if(Ext.QuickTips){ // fix for floating editors interacting with DND Ext.QuickTips.enable(); } break; case 'title': this.el.dom.title = msg; this.wrapEl.dom.title = msg; this.outerWrapEl.dom.title = msg; break; case 'under': if(!this.errorEl){ var elp = this.getErrorCt(); if(!elp){ // field has no container el this.el.dom.title = msg; break; } this.errorEl = elp.createChild({cls:'x-form-invalid-msg'}); this.errorEl.setWidth(elp.getWidth(true)-20); } this.errorEl.update(msg); Ext.form.Field.msgFx[this.msgFx].show(this.errorEl, this); break; case 'side': if(!this.errorIcon){ var elp = this.getErrorCt(); if(!elp){ // field has no container el this.el.dom.title = msg; break; } this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'}); } this.alignErrorIcon(); this.errorIcon.dom.qtip = msg; this.errorIcon.dom.qclass = 'x-form-invalid-tip'; this.errorIcon.show(); this.on('resize', this.alignErrorIcon, this); break; default: var t = Ext.getDom(this.msgTarget); t.innerHTML = msg; t.style.display = this.msgDisplay; break; } this.fireEvent('invalid', this, msg); }, clearInvalid : function(){ if(!this.rendered || this.preventMark){ // not rendered return; } this.outerWrapEl.removeClass(this.invalidClass); switch(this.msgTarget){ case 'qtip': this.el.dom.qtip = ''; this.wrapEl.dom.qtip =''; break; case 'title': this.el.dom.title = ''; this.wrapEl.dom.title = ''; this.outerWrapEl.dom.title = ''; break; case 'under': if(this.errorEl){ Ext.form.Field.msgFx[this.msgFx].hide(this.errorEl, this); } break; case 'side': if(this.errorIcon){ this.errorIcon.dom.qtip = ''; this.errorIcon.hide(); this.un('resize', this.alignErrorIcon, this); } break; default: var t = Ext.getDom(this.msgTarget); t.innerHTML = ''; t.style.display = 'none'; break; } this.fireEvent('valid', this); }, // private alignErrorIcon : function(){ if(this.wrap){ this.errorIcon.alignTo(this.wrap, 'tl-tr', [Ext.isIE ? 5 : 2, 3]); } }, expand : function(){ if(this.isExpanded() || !this.hasFocus){ return; } this.list.alignTo(this.outerWrapEl, this.listAlign); this.list.show(); this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac Ext.getDoc().on('mousewheel', this.collapseIf, this); Ext.getDoc().on('mousedown', this.collapseIf, this); this.fireEvent('expand', this); }, restrictHeight : function(){ var st = this.innerList.dom.scrollTop; this.innerList.dom.style.height = ''; var inner = this.innerList.dom; var pad = this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight; var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight); var ha = this.getPosition()[1]-Ext.getBody().getScroll().top; var hb = Ext.lib.Dom.getViewHeight()-ha-this.getSize().height; var space = Math.max(ha, hb, this.minHeight || 0)-this.list.shadowOffset-pad-5; h = Math.min(h, space, this.maxHeight); this.innerList.setHeight(h); this.list.beginUpdate(); this.list.setHeight(h+pad); this.list.alignTo(this.outerWrapEl, this.listAlign); this.list.endUpdate(); if(this.multiSelectMode){ this.innerList.dom.scrollTop = st; } }, validateValue: function(val){ if(this.items.getCount() == 0){ if(this.allowBlank){ this.clearInvalid(); return true; }else{ this.markInvalid(this.blankText); return false; } }else{ this.clearInvalid(); return true; } }, setupFormInterception : function(){ //intercept form.getValues to ensure that the input element is not included as an empty field var form; this.findParentBy(function(p){ if(p.getForm){ form = p.getForm(); } }); if(form){ var formGet = form.getValues; form.getValues = function(asString){ if(this.items.getCount() > 0){ this.el.dom.disabled = true; } var oldVal = this.el.dom.value; this.setRawValue(''); var vals = formGet.call(form, asString); this.el.dom.disabled = false; this.setRawValue(oldVal); return vals; }.createDelegate(this); } }, onResize : function(w, h, rw, rh){ this._width = w; ie8 = Ext.isIE && !Ext.isIE6 && !Ext.isIE7; var reduce = Ext.isIE6 ? 4 : Ext.isIE7 ? 1 : ie8 ? 1 : 0; this.outerWrapEl.setWidth(w-reduce); if(this.renderFieldBtns){ reduce += (this.buttonWrap.getWidth() + 20); this.wrapEl.setWidth(w - reduce); } Ext.ux.form.SuperBoxSelect.superclass.onResize.call(this, w, h, rw, rh); this.autoSize(); }, onEnable: function(){ Ext.ux.form.SuperBoxSelect.superclass.onEnable.call(this); this.items.each(function(item){ item.enable(); }); this.initButtonEvents(); }, onDisable: function(){ Ext.ux.form.SuperBoxSelect.superclass.onDisable.call(this); this.items.each(function(item){ item.disable(); }); this.removeButtonEvents(); }, clearValue : function(){ Ext.ux.form.SuperBoxSelect.superclass.clearValue.call(this); this.removeAllItems(); }, onKeyUp : function(e) { if (this.editable !== false && !e.isSpecialKey() && (!e.hasModifier() || e.shiftKey)) { this.lastKey = e.getKey(); this.dqTask.delay(this.queryDelay); } }, onKeyDownHandler : function(e,t) { if((e.getKey() === e.DELETE || e.getKey() === e.SPACE)&& this.currentFocus){ e.stopEvent(); var toDestroy = this.currentFocus; this.on('expand',function(){this.collapse();},this,{single: true}); var nextFocus, idx = this.items.indexOfKey(this.currentFocus.key); this.clearCurrentFocus(); if(idx < (this.items.getCount() -1)){ nextFocus = this.items.itemAt(idx+1); } toDestroy.preDestroy(true); if(nextFocus){ (function(){ nextFocus.onLnkFocus(); this.currentFocus = nextFocus; }).defer(200,this); } return true; } var val = this.el.dom.value, it; //ctrl+enter for new items if(e.getKey() === e.ENTER){ if (val !== "") { e.stopEvent(); if (e.ctrlKey) { this.collapse(); this.setRawValue(''); this.fireEvent('newitemdata', this, val); } else { if (!this.isExpanded()) { this.setRawValue(''); this.fireEvent('newitemdata', this, val); } else { this.onViewClick(); this.delayedCheck = true; this.unsetDelayCheck.defer(10, this); } } }else{ if(!this.isExpanded()){ return; } this.onViewClick(); this.delayedCheck = true; this.unsetDelayCheck.defer(10, this); } return true; } if(val !== '') { return; } //select first item if(e.getKey() === e.HOME){ e.stopEvent(); if(this.items.getCount() > 0){ this.collapse(); it = this.items.get(0); it.el.focus(); } return true; } //backspace remove if(e.getKey() === e.BACKSPACE){ e.stopEvent(); if(this.currentFocus) { var toDestroy = this.currentFocus; this.on('expand',function(){this.collapse();},this,{single: true}); var nextFocus, idx = this.items.indexOfKey(toDestroy.key); this.clearCurrentFocus(); if(idx < (this.items.getCount() -1)){ nextFocus = this.items.itemAt(idx+1); } toDestroy.preDestroy(true); if(nextFocus){ (function(){ nextFocus.onLnkFocus(); this.currentFocus = nextFocus; }).defer(200,this); } return; }else{ it = this.items.get(this.items.getCount() -1); if(it){ if(this.backspaceDeletesLastItem){ this.on('expand',function(){this.collapse();},this,{single: true}); it.preDestroy(true); }else{ if(this.navigateItemsWithTab){ it.onElClick(); }else{ this.on('expand',function(){ this.collapse(); this.currentFocus = it; this.currentFocus.onLnkFocus.defer(20,this.currentFocus); },this,{single: true}); } } } return true; } } if(!e.isNavKeyPress()){ this.multiSelectMode = false; this.clearCurrentFocus(); return; } //arrow nav if(e.getKey() === e.LEFT || (e.getKey() === e.UP && !this.isExpanded())){ e.stopEvent(); this.collapse(); //get last item it = this.items.get(this.items.getCount()-1); if(this.navigateItemsWithTab){ //focus last el if(it){ it.focus(); } }else{ //focus prev item if(this.currentFocus){ var idx = this.items.indexOfKey(this.currentFocus.key); this.clearCurrentFocus(); if(idx !== 0){ this.currentFocus = this.items.itemAt(idx-1); this.currentFocus.onLnkFocus(); } }else{ this.currentFocus = it; if(it){ it.onLnkFocus(); } } } return true; } if(e.getKey() === e.DOWN){ if(this.currentFocus){ this.collapse(); e.stopEvent(); var idx = this.items.indexOfKey(this.currentFocus.key); if(idx == (this.items.getCount() -1)){ this.clearCurrentFocus.defer(10,this) }else{ this.clearCurrentFocus(); this.currentFocus = this.items.itemAt(idx+1); if(this.currentFocus){ this.currentFocus.onLnkFocus(); } } return true; } } if(e.getKey() === e.RIGHT){ this.collapse(); it = this.items.itemAt(0); if(this.navigateItemsWithTab){ //focus first el if(it){ it.focus(); } }else{ if(this.currentFocus){ var idx = this.items.indexOfKey(this.currentFocus.key); this.clearCurrentFocus(); if(idx < (this.items.getCount() -1)){ this.currentFocus = this.items.itemAt(idx+1); if(this.currentFocus){ this.currentFocus.onLnkFocus(); } } }else{ this.currentFocus = it; if(it){ it.onLnkFocus(); } } } return; } }, reset : function(){ Ext.ux.form.SuperBoxSelect.superclass.reset.call(this); this.autoSize(); this.setRawValue(''); this.el.focus(); }, applyEmptyText : function(){ if(this.items.getCount() > 0){ this.el.removeClass(this.emptyClass); this.setRawValue(''); return; } if(this.rendered && this.emptyText && this.getRawValue().length < 1){ this.setRawValue(this.emptyText); this.el.addClass(this.emptyClass); } }, /** * Removes all items from the SuperBoxSelect component * @methodOf Ext.ux.form.SuperBoxSelect * @name removeAllItems */ removeAllItems: function(){ this.items.each(function(item){ item.preDestroy(true); },this); this.manageClearBtn(); }, resetStore: function(){ if(!this.removeValuesFromStore){ return; } this.usedRecords.each(function(rec){ this.store.add(rec); },this); this.sortStore(); }, sortStore: function(){ var ss = this.store.getSortState(); if(ss && ss.field){ this.store.sort(ss.field, ss.direction); } }, getCaption: function(dataObject){ if(typeof this.displayFieldTpl === 'string') { this.displayFieldTpl = new Ext.XTemplate(this.displayFieldTpl); } var caption, recordData = dataObject instanceof Ext.data.Record ? dataObject.data : dataObject; if(this.displayFieldTpl) { caption = this.displayFieldTpl.apply(recordData); } else if(this.displayField) { caption = recordData[this.displayField]; } return caption; }, addRecord : function(record){ var display = record.data[this.displayField]; var caption = this.getCaption(record); var val = record.data[this.valueField]; var cls = this.classField ? record.data[this.classField] : ''; var style = this.styleField ? record.data[this.styleField] : ''; if(this.removeValuesFromStore){ this.usedRecords.add(val,record); this.store.remove(record); } this.fireEvent('additem',this,val); this.addItemBox(val,display,caption,cls,style); }, createRecord : function(recordData){ if(!this.recordConstructor){ var recordFields = [ {name: this.valueField}, {name: this.displayField} ]; if(this.classField){ recordFields.push({name: this.classField}); } if(this.styleField){ recordFields.push({name: this.styleField}); } this.recordConstructor = Ext.data.Record.create(recordFields); } return new this.recordConstructor(recordData); }, /** * Adds an item to the SuperBoxSelect component if the {@link #Ext.ux.form.SuperBoxSelect-allowAddNewData} config is set to true. * @methodOf Ext.ux.form.SuperBoxSelect * @name addItem * @param {Object} newItemObject An object literal containing the property names and values for an item. The property names must match those specified in {@link #Ext.ux.form.SuperBoxSelect-displayField}, {@link #Ext.ux.form.SuperBoxSelect-valueField} and {@link #Ext.ux.form.SuperBoxSelect-classField} */ addItem : function(newItemObject){ var val = newItemObject[this.valueField]; if(this.disabled) { return false; } if(this.preventDuplicates && this.hasValue(val)){ return; } //use existing record if found var record; if(record = this.findRecord(this.valueField, val)){ this.addRecord(record); return; } //else it's a new item if(!this.allowAddNewData){ return; } var rec = this.createRecord(newItemObject); this.store.add(rec); this.addRecord(rec); return true; }, addItemBox : function(itemVal,itemDisplay, itemCaption, itemClass, itemStyle) { var parseStyle = function(s){ var ret = ''; if(typeof s == 'function'){ ret = s.call(); }else if(typeof s == 'object'){ for(p in s){ ret+= p +':'+s[p]+';'; } }else if(typeof s == 'string'){ ret = s + ';'; } return ret; }; var itemKey = Ext.id(null,'sbx-item'); var box = new Ext.ux.form.SuperBoxSelectItem({ owner: this, renderTo: this.wrapEl, cls: this.extraItemCls + ' ' + itemClass, style: parseStyle(this.extraItemStyle) + ' ' + itemStyle, caption: itemCaption, display: itemDisplay, value: itemVal, key: itemKey, listeners: { 'remove': function(item){ if(this.fireEvent('beforeremoveitem',this,item.value) === false){ return; } this.items.removeKey(item.key); if(this.removeValuesFromStore){ if(this.usedRecords.containsKey(item.value)){ this.store.add(this.usedRecords.get(item.value)); this.usedRecords.removeKey(item.value) this.sortStore(); if(this.view){ this.view.render(); } } } this.fireEvent('removeitem',this,item.value); }, destroy: function(){ this.collapse(); this.autoSize(); this.validateValue(); this.manageClearBtn(); }, scope: this } }); box.render(); box.hidden = this.el.insertSibling({ tag:'input', type:'hidden', value: itemVal, name: (this.hiddenName || this.name) },'before'); this.items.add(itemKey,box); this.applyEmptyText(); this.autoSize(); this.validateValue(); this.manageClearBtn(); }, manageClearBtn : function(){ if(!this.renderFieldBtns){ return; } var cls = 'x-superboxselect-btn-hide'; if(this.items.getCount() == 0){ this.buttonClear.addClass(cls); }else{ this.buttonClear.removeClass(cls); } }, findInStore : function(val){ var index = this.store.find(this.valueField, val.trim()); if(index > -1){ return this.store.getAt(index); } return false; }, /** * Returns a String value containing a concatenated list of item values. The list is concatenated with the {@link #Ext.ux.form.SuperBoxSelect-valueDelimiter}. * @methodOf Ext.ux.form.SuperBoxSelect * @name getValue * @return {String} a String value containing a concatenated list of item values. */ getValue : function() { var ret = []; this.items.each(function(item){ ret.push(item.value); }); return ret.join(this.valueDelimiter); }, /** * Returns an Array of item objects containing the {@link #Ext.ux.form.SuperBoxSelect-displayField}, {@link #Ext.ux.form.SuperBoxSelect-valueField} and {@link #Ext.ux.form.SuperBoxSelect-classField} properties. * @methodOf Ext.ux.form.SuperBoxSelect * @name getValueEx * @return {Array} an array of item objects. */ getValueEx : function() { var ret = []; this.items.each(function(item){ var newItem = {}; newItem[this.valueField] = item.value; newItem[this.displayField] = item.display; newItem[this.classField]= item.cls; ret.push(newItem); }); return ret; }, /** * Sets the value of the SuperBoxSelect component. * @methodOf Ext.ux.form.SuperBoxSelect * @name setValue * @param {String} value a String value containing a concatenated list of item values. The list should be concatenated with the {@link #Ext.ux.form.SuperBoxSelect-valueDelimiter */ setValue: function(value){ this.removeAllItems(); this.store.clearFilter(); this.resetStore(); values = value.split(this.valueDelimiter); Ext.each(values,function(val){ var record; if(record = this.findRecord(this.valueField, val)){ this.addRecord(record); } },this); }, /** * Sets the value of the SuperBoxSelect component, adding new items that don't exist in the data store if the {@link #Ext.ux.form.SuperBoxSelect-allowAddNewData} config is set to true. * @methodOf Ext.ux.form.SuperBoxSelect * @name setValue * @param {Array} data An Array of item objects containing the {@link #Ext.ux.form.SuperBoxSelect-displayField}, {@link #Ext.ux.form.SuperBoxSelect-valueField} and {@link #Ext.ux.form.SuperBoxSelect-classField} properties. */ setValueEx : function(data){ this.removeAllItems(); this.store.clearFilter(); this.resetStore(); if(!Ext.isArray(data)){ data = [data]; } Ext.each(data,function(item){ this.addItem(item); },this); }, /** * Returns true if the SuperBoxSelect component has a selected item with a value matching the 'val' parameter. * @methodOf Ext.ux.form.SuperBoxSelect * @name hasValue * @param {Mixed} val The value to test. * @return {Boolean} true if the component has the selected value, false otherwise. */ hasValue: function(val){ var has = false; this.items.each(function(item){ if(item.value == val){ has = true; return false; } },this); return has; }, onSelect : function(record, index) { var val = record.data[this.valueField]; if(this.preventDuplicates && this.hasValue(val)){ return; } this.setRawValue(''); this.lastSelectionText = ''; if(this.fireEvent('beforeadditem',this,val) !== false){ this.addRecord(record); } if(this.store.getCount() == 0 || !this.multiSelectMode){ this.collapse(); }else{ this.restrictHeight(); } }, onDestroy : function() { this.items.each(function(item){ item.preDestroy(true); },this); this.inputEl.removeAllListeners(); this.inputEl.remove(); if(this.renderFieldBtns){ this.buttonClear.removeAllListeners(); this.buttonClear.remove(); this.buttonExpand.removeAllListeners(); this.buttonExpand.remove(); this.buttonWrap.remove(); } this.wrapEl.removeAllListeners(); this.wrapEl.remove(); this.outerWrapEl.removeAllListeners(); this.outerWrapEl.remove(); Ext.ux.form.SuperBoxSelect.superclass.onDestroy.call(this); }, autoSize : function(){ if(!this.rendered){ return; } if(!this.metrics){ this.metrics = Ext.util.TextMetrics.createInstance(this.el); } var el = this.el; var v = el.dom.value; var d = document.createElement('div'); if(v === "" && this.emptyText && this.items.getCount() < 1){ v = this.emptyText; } d.appendChild(document.createTextNode(v)); v = d.innerHTML; d = null; v += " "; var w = Math.max(this.metrics.getWidth(v) + 24, 24); if(typeof this._width != 'undefined'){ w = Math.min(this._width, w); } this.el.setWidth(w); if(Ext.isIE){ this.el.dom.style.top='0'; } } }); Ext.reg('superboxselect', Ext.ux.form.SuperBoxSelect); /* * @private */ Ext.ux.form.SuperBoxSelectItem = function(config){ Ext.apply(this,config); Ext.ux.form.SuperBoxSelectItem.superclass.constructor.call(this); }; /* * @private */ Ext.ux.form.SuperBoxSelectItem = Ext.extend(Ext.ux.form.SuperBoxSelectItem,Ext.Component, { initComponent : function(){ Ext.ux.form.SuperBoxSelectItem.superclass.initComponent.call(this); }, onElClick : function(e){ this.owner.clearCurrentFocus(); this.owner.collapse(); if(this.owner.navigateItemsWithTab){ this.focus(); }else{ this.owner.el.dom.focus(); var that = this; (function(){ this.onLnkFocus(); this.owner.currentFocus = this; }).defer(10,this) } }, onLnkClick : function(e){ if(e) { e.stopEvent(); } this.preDestroy(); if(!this.owner.navigateItemsWithTab){ this.owner.el.focus(); } }, onLnkFocus : function(){ this.el.addClass("x-superboxselect-item-focus"); }, onLnkBlur : function(){ this.el.removeClass("x-superboxselect-item-focus"); }, enableElListeners : function() { this.el.on('click', this.onElClick, this, {stopEvent:true}); this.el.addClassOnOver('x-superboxselect-item x-superboxselect-item-hover'); }, enableLnkListeners : function() { this.lnk.on({ 'click': this.onLnkClick, 'focus': this.onLnkFocus, 'blur': this.onLnkBlur, scope: this }); }, enableAllListeners : function() { this.enableElListeners(); this.enableLnkListeners(); }, disableAllListeners : function() { this.el.removeAllListeners(); this.lnk.un('click', this.onLnkClick, this); this.lnk.un('focus', this.onLnkFocus, this); this.lnk.un('blur', this.onLnkBlur, this); }, //autoEl : 'li', onRender : function(ct, position){ Ext.ux.form.SuperBoxSelectItem.superclass.onRender.call(this, ct, position); if(this.el){ this.el.remove(); } this.el = ct.createChild({ tag: 'li' }, ct.last()); this.el.addClass('x-superboxselect-item'); var btnEl = this.owner.navigateItemsWithTab ? ( Ext.isSafari ? 'button' : 'a') : 'span'; var itemKey = this.key; Ext.apply(this.el, { 'focus': function(){ this.down(btnEl +'.x-superboxselect-item-close').focus(); }, 'preDestroy': function(){ this.preDestroy(); }.createDelegate(this) }); this.enableElListeners(); this.el.update(this.caption); var cfg = { 'tag': btnEl, 'class': 'x-superboxselect-item-close', tabIndex : this.owner.navigateItemsWithTab ? '0' : '-1' }; if(btnEl === 'a'){ cfg.href = '#'; } this.lnk = this.el.createChild(cfg); if(!this.disabled) { this.enableLnkListeners(); }else { this.disableAllListeners(); } this.on({ 'disable': this.disableAllListeners, 'enable': this.enableAllListeners, scope: this }); this.setupKeyMap(); }, setupKeyMap : function(){ new Ext.KeyMap(this.lnk, [ { key: [Ext.EventObject.BACKSPACE, Ext.EventObject.DELETE, Ext.EventObject.SPACE], fn: function(){ if(this.fireEvent('remove', this) !== false){ this.preDestroy(); this.on('expand',function(){this.collapse();},this,{single: true}); } }.createDelegate(this) }, { key: [Ext.EventObject.RIGHT,Ext.EventObject.DOWN], fn: function(){ this.moveFocus('right'); }.createDelegate(this) }, { key: [Ext.EventObject.LEFT,Ext.EventObject.UP], fn: function(){ this.moveFocus('left'); }.createDelegate(this) }, { key: [Ext.EventObject.HOME], fn: function(){ l = this.owner.items.get(0); l.el.focus(); }.createDelegate(this) }, { key: [Ext.EventObject.END], fn: function(){ this.owner.el.focus(); }.createDelegate(this) }, { key: Ext.EventObject.ENTER, fn: function(){ }.createDelegate(this) } ]).stopEvent = true; }, /* * @private */ moveFocus : function(dir) { var el; if(dir === 'left'){ el = this.el.prev(); } else { el = this.el.next(); } if(!el){ el = this.owner.el; } el.focus(); }, /* * @private */ preDestroy : function(supressEffect) { if(this.fireEvent('remove', this) === false){ return; } var actionDestroy = function(){ if(this.owner.navigateItemsWithTab){ this.moveFocus('right'); } this.hidden.remove(); this.hidden = null; this.destroy(); }; if(supressEffect){ actionDestroy.call(this); } else { this.el.hide({ duration: .2, callback: actionDestroy, scope: this }); } return this; }, onDestroy : function() { this.lnk.removeAllListeners(); this.lnk.remove(); this.el.removeAllListeners(); this.el.remove(); Ext.ux.form.SuperBoxSelectItem.superclass.onDestroy.call(this); } });