PDA

View Full Version : ToolTip Issue in Ext Window.....



sankarbaluz
23 Aug 2011, 9:42 PM
Hi,
I am Sankar.I am wondering to see that the tooltip that I am giving inside the Ext window is hiding.It is going back to the window.The code is working fine without a window(It works fine in formPanel).I am attaching the screenshots and code with this message.I know that the change would be made in target of the tip.But dont know what to give.Please help me out.



Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var btn = new Ext.Button({
renderTo: Ext.getBody(),
text:'Submit',
handler:function(){
new Ext.Window({
width:600,
height:500,
items:[formPanel]
}).show();

}
})
var formPanel = Ext.widget('form', {

width: 350,
bodyPadding: 10,
title: 'Account Registration',

defaults: {
anchor: '100%'
},

/*
* Listen for validity change on the entire form and update the combined error icon
*/
listeners: {
fieldvaliditychange: function() {
this.updateErrorState();
},
fielderrorchange: function() {
this.updateErrorState();
}
},

updateErrorState: function() {
var me = this,
errorCmp, fields, errors;

if (me.hasBeenDirty || me.getForm().isDirty()) { //prevents showing global error when form first loads
errorCmp = me.down('#formErrorState');
fields = me.getForm().getFields();
errors = [];
fields.each(function(field) {
Ext.Array.forEach(field.getErrors(), function(error) {
errors.push({name: field.getFieldLabel(), error: error});
});
});
errorCmp.setErrors(errors);
me.hasBeenDirty = true;
}
},

items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'User Name',
allowBlank: false,
minLength: 6
}],

dockedItems: [{
xtype: 'container',
dock: 'bottom',
layout: {
type: 'hbox',
align: 'middle'
},
padding: '10 10 5',

items: [{
xtype: 'component',
id: 'formErrorState',
baseCls: 'form-error-state',
flex: 1,
validText: 'Form is valid',
invalidText: 'Form has errors',
tipTpl: Ext.create('Ext.XTemplate', '<ul><tpl for="."><li><span class="field-name">{name}</span>: <span class="error">{error}</span></li></tpl></ul>'),

getTip: function() {
var tip = this.tip;
if (!tip) {
tip = this.tip = Ext.widget('tooltip', {
target: this.el,
title: 'Error Details:',
autoHide: false,
anchor: 'top',
mouseOffset: [-11, -2],
closable: true,
constrainPosition: false,
cls: 'errors-tip'
});
tip.show();
}
return tip;
},

setErrors: function(errors) {
var me = this,
baseCls = me.baseCls,
tip = me.getTip();

errors = Ext.Array.from(errors);

// Update CSS class and tooltip content
if (errors.length) {
me.addCls(baseCls + '-invalid');
me.removeCls(baseCls + '-valid');
me.update(me.invalidText);
tip.setDisabled(false);
tip.update(me.tipTpl.apply(errors));
} else {
me.addCls(baseCls + '-valid');
me.removeCls(baseCls + '-invalid');
me.update(me.validText);
tip.setDisabled(true);
tip.hide();
}
}
}]
}]
});

});