How to set tooltip to Ext.form.TextField where input type is file?
I am new to extjs, and I want to set tooltip to field lable of Ext.form.TextField with input type file.
I try to do this by follwing code but its not working.
Ext.override(Ext.form.Field, {
afterRender : Ext.form.Field.prototype.afterRender.createSequence(function(){
var qt = this.qtip;
if (qt) {
Ext.QuickTip.register ({
target: this,
title: '',
text: qt,
enabled: true,
showDelay: 20
})
}
})
});
this.myTestComponent = new Ext.form.TextField({
fieldLabel: 'My Field lable',
qtip: 'My Field Tooltip',
name: 'field1',
scope: this,
inputType: 'file',
width: 150
})
extjs extjs3
add a comment |
I am new to extjs, and I want to set tooltip to field lable of Ext.form.TextField with input type file.
I try to do this by follwing code but its not working.
Ext.override(Ext.form.Field, {
afterRender : Ext.form.Field.prototype.afterRender.createSequence(function(){
var qt = this.qtip;
if (qt) {
Ext.QuickTip.register ({
target: this,
title: '',
text: qt,
enabled: true,
showDelay: 20
})
}
})
});
this.myTestComponent = new Ext.form.TextField({
fieldLabel: 'My Field lable',
qtip: 'My Field Tooltip',
name: 'field1',
scope: this,
inputType: 'file',
width: 150
})
extjs extjs3
What exactly is not working? And are you using ExtJS 3? Thanks.
– Zhorov
Nov 27 '18 at 8:42
Yes I am using ExtJs 3, qtip: 'My Field Tooltip' is not working. I want to set tooltip to field lable. but my TextField's type is file, its not working
– Amita Patil
Nov 27 '18 at 8:45
add a comment |
I am new to extjs, and I want to set tooltip to field lable of Ext.form.TextField with input type file.
I try to do this by follwing code but its not working.
Ext.override(Ext.form.Field, {
afterRender : Ext.form.Field.prototype.afterRender.createSequence(function(){
var qt = this.qtip;
if (qt) {
Ext.QuickTip.register ({
target: this,
title: '',
text: qt,
enabled: true,
showDelay: 20
})
}
})
});
this.myTestComponent = new Ext.form.TextField({
fieldLabel: 'My Field lable',
qtip: 'My Field Tooltip',
name: 'field1',
scope: this,
inputType: 'file',
width: 150
})
extjs extjs3
I am new to extjs, and I want to set tooltip to field lable of Ext.form.TextField with input type file.
I try to do this by follwing code but its not working.
Ext.override(Ext.form.Field, {
afterRender : Ext.form.Field.prototype.afterRender.createSequence(function(){
var qt = this.qtip;
if (qt) {
Ext.QuickTip.register ({
target: this,
title: '',
text: qt,
enabled: true,
showDelay: 20
})
}
})
});
this.myTestComponent = new Ext.form.TextField({
fieldLabel: 'My Field lable',
qtip: 'My Field Tooltip',
name: 'field1',
scope: this,
inputType: 'file',
width: 150
})
extjs extjs3
extjs extjs3
edited Nov 27 '18 at 6:34
Amita Patil
asked Nov 27 '18 at 6:27
Amita PatilAmita Patil
2342414
2342414
What exactly is not working? And are you using ExtJS 3? Thanks.
– Zhorov
Nov 27 '18 at 8:42
Yes I am using ExtJs 3, qtip: 'My Field Tooltip' is not working. I want to set tooltip to field lable. but my TextField's type is file, its not working
– Amita Patil
Nov 27 '18 at 8:45
add a comment |
What exactly is not working? And are you using ExtJS 3? Thanks.
– Zhorov
Nov 27 '18 at 8:42
Yes I am using ExtJs 3, qtip: 'My Field Tooltip' is not working. I want to set tooltip to field lable. but my TextField's type is file, its not working
– Amita Patil
Nov 27 '18 at 8:45
What exactly is not working? And are you using ExtJS 3? Thanks.
– Zhorov
Nov 27 '18 at 8:42
What exactly is not working? And are you using ExtJS 3? Thanks.
– Zhorov
Nov 27 '18 at 8:42
Yes I am using ExtJs 3, qtip: 'My Field Tooltip' is not working. I want to set tooltip to field lable. but my TextField's type is file, its not working
– Amita Patil
Nov 27 '18 at 8:45
Yes I am using ExtJs 3, qtip: 'My Field Tooltip' is not working. I want to set tooltip to field lable. but my TextField's type is file, its not working
– Amita Patil
Nov 27 '18 at 8:45
add a comment |
2 Answers
2
active
oldest
votes
Try it like this:
{
xtype:'textfield',
name: 'field1',
fieldLabel:'Label Descr',
inputType: 'file',
width: 250,
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'My tooltip'
});
}
}
}
It gives error - TypeError: c.label is undefined target : c.label.dom,
– Amita Patil
Nov 28 '18 at 5:59
if i not mistaken,the 'textfield' must be inside a panel with 'form' layout to create the label.
– Fabio Barros
Nov 28 '18 at 12:22
yes, its inside panel
– Amita Patil
Nov 28 '18 at 12:47
Take a look at this fiddle, see if it helps: fiddle.sencha.com/#view/editor&fiddle/2o20
– Fabio Barros
Nov 28 '18 at 13:03
Thank you sir, but it still gives same error, TypeError: c.label is undefined target : c.label.dom,
– Amita Patil
Nov 28 '18 at 14:04
|
show 1 more comment
Solution:
I'll answer exactly to your question - if you want to add a tooltip, you can use this:
Ext.onReady(function() {
Ext.QuickTips.init();
var textFieldStreet = new Ext.form.TextField({
fieldLabel: 'My Field lable',
//renderTo: Ext.getBody(),
name: 'field1',
inputType: 'file',
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'Label tooltip'
});
new Ext.ToolTip({
target : c.getEl(),
html: 'Field tooltip'
});
}
}
});
var form = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
items: [textFieldStreet]
});
})
Notes:
Tested with ExtJS 3.4.
Config fieldLabel
is only used when textfield
is rendered by a container which has been configured to use the FormLayout layout manager.
One disadvantage is the default "No file chosen" tooltip in Chrome and Mozilla.
You can see this fiddle.
Thank you sir, I used your code. But still its not working
– Amita Patil
Nov 27 '18 at 10:45
@AmitaPatil I've updated the answer with working fiddle.
– Zhorov
Nov 27 '18 at 11:29
it adds fieldLabel: 'fieldLabel' 3 times, and hides brows button and fileName field
– Amita Patil
Nov 27 '18 at 11:47
@AmitaPatil See updated answer and fiddle. Thanks.
– Zhorov
Nov 29 '18 at 9:23
Hello sir, it works but it shows both tooltips on brows button
– Amita Patil
Nov 29 '18 at 13:01
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53493929%2fhow-to-set-tooltip-to-ext-form-textfield-where-input-type-is-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try it like this:
{
xtype:'textfield',
name: 'field1',
fieldLabel:'Label Descr',
inputType: 'file',
width: 250,
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'My tooltip'
});
}
}
}
It gives error - TypeError: c.label is undefined target : c.label.dom,
– Amita Patil
Nov 28 '18 at 5:59
if i not mistaken,the 'textfield' must be inside a panel with 'form' layout to create the label.
– Fabio Barros
Nov 28 '18 at 12:22
yes, its inside panel
– Amita Patil
Nov 28 '18 at 12:47
Take a look at this fiddle, see if it helps: fiddle.sencha.com/#view/editor&fiddle/2o20
– Fabio Barros
Nov 28 '18 at 13:03
Thank you sir, but it still gives same error, TypeError: c.label is undefined target : c.label.dom,
– Amita Patil
Nov 28 '18 at 14:04
|
show 1 more comment
Try it like this:
{
xtype:'textfield',
name: 'field1',
fieldLabel:'Label Descr',
inputType: 'file',
width: 250,
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'My tooltip'
});
}
}
}
It gives error - TypeError: c.label is undefined target : c.label.dom,
– Amita Patil
Nov 28 '18 at 5:59
if i not mistaken,the 'textfield' must be inside a panel with 'form' layout to create the label.
– Fabio Barros
Nov 28 '18 at 12:22
yes, its inside panel
– Amita Patil
Nov 28 '18 at 12:47
Take a look at this fiddle, see if it helps: fiddle.sencha.com/#view/editor&fiddle/2o20
– Fabio Barros
Nov 28 '18 at 13:03
Thank you sir, but it still gives same error, TypeError: c.label is undefined target : c.label.dom,
– Amita Patil
Nov 28 '18 at 14:04
|
show 1 more comment
Try it like this:
{
xtype:'textfield',
name: 'field1',
fieldLabel:'Label Descr',
inputType: 'file',
width: 250,
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'My tooltip'
});
}
}
}
Try it like this:
{
xtype:'textfield',
name: 'field1',
fieldLabel:'Label Descr',
inputType: 'file',
width: 250,
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'My tooltip'
});
}
}
}
answered Nov 27 '18 at 13:48
Fabio BarrosFabio Barros
94929
94929
It gives error - TypeError: c.label is undefined target : c.label.dom,
– Amita Patil
Nov 28 '18 at 5:59
if i not mistaken,the 'textfield' must be inside a panel with 'form' layout to create the label.
– Fabio Barros
Nov 28 '18 at 12:22
yes, its inside panel
– Amita Patil
Nov 28 '18 at 12:47
Take a look at this fiddle, see if it helps: fiddle.sencha.com/#view/editor&fiddle/2o20
– Fabio Barros
Nov 28 '18 at 13:03
Thank you sir, but it still gives same error, TypeError: c.label is undefined target : c.label.dom,
– Amita Patil
Nov 28 '18 at 14:04
|
show 1 more comment
It gives error - TypeError: c.label is undefined target : c.label.dom,
– Amita Patil
Nov 28 '18 at 5:59
if i not mistaken,the 'textfield' must be inside a panel with 'form' layout to create the label.
– Fabio Barros
Nov 28 '18 at 12:22
yes, its inside panel
– Amita Patil
Nov 28 '18 at 12:47
Take a look at this fiddle, see if it helps: fiddle.sencha.com/#view/editor&fiddle/2o20
– Fabio Barros
Nov 28 '18 at 13:03
Thank you sir, but it still gives same error, TypeError: c.label is undefined target : c.label.dom,
– Amita Patil
Nov 28 '18 at 14:04
It gives error - TypeError: c.label is undefined target : c.label.dom,
– Amita Patil
Nov 28 '18 at 5:59
It gives error - TypeError: c.label is undefined target : c.label.dom,
– Amita Patil
Nov 28 '18 at 5:59
if i not mistaken,the 'textfield' must be inside a panel with 'form' layout to create the label.
– Fabio Barros
Nov 28 '18 at 12:22
if i not mistaken,the 'textfield' must be inside a panel with 'form' layout to create the label.
– Fabio Barros
Nov 28 '18 at 12:22
yes, its inside panel
– Amita Patil
Nov 28 '18 at 12:47
yes, its inside panel
– Amita Patil
Nov 28 '18 at 12:47
Take a look at this fiddle, see if it helps: fiddle.sencha.com/#view/editor&fiddle/2o20
– Fabio Barros
Nov 28 '18 at 13:03
Take a look at this fiddle, see if it helps: fiddle.sencha.com/#view/editor&fiddle/2o20
– Fabio Barros
Nov 28 '18 at 13:03
Thank you sir, but it still gives same error, TypeError: c.label is undefined target : c.label.dom,
– Amita Patil
Nov 28 '18 at 14:04
Thank you sir, but it still gives same error, TypeError: c.label is undefined target : c.label.dom,
– Amita Patil
Nov 28 '18 at 14:04
|
show 1 more comment
Solution:
I'll answer exactly to your question - if you want to add a tooltip, you can use this:
Ext.onReady(function() {
Ext.QuickTips.init();
var textFieldStreet = new Ext.form.TextField({
fieldLabel: 'My Field lable',
//renderTo: Ext.getBody(),
name: 'field1',
inputType: 'file',
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'Label tooltip'
});
new Ext.ToolTip({
target : c.getEl(),
html: 'Field tooltip'
});
}
}
});
var form = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
items: [textFieldStreet]
});
})
Notes:
Tested with ExtJS 3.4.
Config fieldLabel
is only used when textfield
is rendered by a container which has been configured to use the FormLayout layout manager.
One disadvantage is the default "No file chosen" tooltip in Chrome and Mozilla.
You can see this fiddle.
Thank you sir, I used your code. But still its not working
– Amita Patil
Nov 27 '18 at 10:45
@AmitaPatil I've updated the answer with working fiddle.
– Zhorov
Nov 27 '18 at 11:29
it adds fieldLabel: 'fieldLabel' 3 times, and hides brows button and fileName field
– Amita Patil
Nov 27 '18 at 11:47
@AmitaPatil See updated answer and fiddle. Thanks.
– Zhorov
Nov 29 '18 at 9:23
Hello sir, it works but it shows both tooltips on brows button
– Amita Patil
Nov 29 '18 at 13:01
|
show 2 more comments
Solution:
I'll answer exactly to your question - if you want to add a tooltip, you can use this:
Ext.onReady(function() {
Ext.QuickTips.init();
var textFieldStreet = new Ext.form.TextField({
fieldLabel: 'My Field lable',
//renderTo: Ext.getBody(),
name: 'field1',
inputType: 'file',
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'Label tooltip'
});
new Ext.ToolTip({
target : c.getEl(),
html: 'Field tooltip'
});
}
}
});
var form = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
items: [textFieldStreet]
});
})
Notes:
Tested with ExtJS 3.4.
Config fieldLabel
is only used when textfield
is rendered by a container which has been configured to use the FormLayout layout manager.
One disadvantage is the default "No file chosen" tooltip in Chrome and Mozilla.
You can see this fiddle.
Thank you sir, I used your code. But still its not working
– Amita Patil
Nov 27 '18 at 10:45
@AmitaPatil I've updated the answer with working fiddle.
– Zhorov
Nov 27 '18 at 11:29
it adds fieldLabel: 'fieldLabel' 3 times, and hides brows button and fileName field
– Amita Patil
Nov 27 '18 at 11:47
@AmitaPatil See updated answer and fiddle. Thanks.
– Zhorov
Nov 29 '18 at 9:23
Hello sir, it works but it shows both tooltips on brows button
– Amita Patil
Nov 29 '18 at 13:01
|
show 2 more comments
Solution:
I'll answer exactly to your question - if you want to add a tooltip, you can use this:
Ext.onReady(function() {
Ext.QuickTips.init();
var textFieldStreet = new Ext.form.TextField({
fieldLabel: 'My Field lable',
//renderTo: Ext.getBody(),
name: 'field1',
inputType: 'file',
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'Label tooltip'
});
new Ext.ToolTip({
target : c.getEl(),
html: 'Field tooltip'
});
}
}
});
var form = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
items: [textFieldStreet]
});
})
Notes:
Tested with ExtJS 3.4.
Config fieldLabel
is only used when textfield
is rendered by a container which has been configured to use the FormLayout layout manager.
One disadvantage is the default "No file chosen" tooltip in Chrome and Mozilla.
You can see this fiddle.
Solution:
I'll answer exactly to your question - if you want to add a tooltip, you can use this:
Ext.onReady(function() {
Ext.QuickTips.init();
var textFieldStreet = new Ext.form.TextField({
fieldLabel: 'My Field lable',
//renderTo: Ext.getBody(),
name: 'field1',
inputType: 'file',
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'Label tooltip'
});
new Ext.ToolTip({
target : c.getEl(),
html: 'Field tooltip'
});
}
}
});
var form = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
items: [textFieldStreet]
});
})
Notes:
Tested with ExtJS 3.4.
Config fieldLabel
is only used when textfield
is rendered by a container which has been configured to use the FormLayout layout manager.
One disadvantage is the default "No file chosen" tooltip in Chrome and Mozilla.
You can see this fiddle.
edited Nov 30 '18 at 8:36
answered Nov 27 '18 at 9:50
ZhorovZhorov
3,9042518
3,9042518
Thank you sir, I used your code. But still its not working
– Amita Patil
Nov 27 '18 at 10:45
@AmitaPatil I've updated the answer with working fiddle.
– Zhorov
Nov 27 '18 at 11:29
it adds fieldLabel: 'fieldLabel' 3 times, and hides brows button and fileName field
– Amita Patil
Nov 27 '18 at 11:47
@AmitaPatil See updated answer and fiddle. Thanks.
– Zhorov
Nov 29 '18 at 9:23
Hello sir, it works but it shows both tooltips on brows button
– Amita Patil
Nov 29 '18 at 13:01
|
show 2 more comments
Thank you sir, I used your code. But still its not working
– Amita Patil
Nov 27 '18 at 10:45
@AmitaPatil I've updated the answer with working fiddle.
– Zhorov
Nov 27 '18 at 11:29
it adds fieldLabel: 'fieldLabel' 3 times, and hides brows button and fileName field
– Amita Patil
Nov 27 '18 at 11:47
@AmitaPatil See updated answer and fiddle. Thanks.
– Zhorov
Nov 29 '18 at 9:23
Hello sir, it works but it shows both tooltips on brows button
– Amita Patil
Nov 29 '18 at 13:01
Thank you sir, I used your code. But still its not working
– Amita Patil
Nov 27 '18 at 10:45
Thank you sir, I used your code. But still its not working
– Amita Patil
Nov 27 '18 at 10:45
@AmitaPatil I've updated the answer with working fiddle.
– Zhorov
Nov 27 '18 at 11:29
@AmitaPatil I've updated the answer with working fiddle.
– Zhorov
Nov 27 '18 at 11:29
it adds fieldLabel: 'fieldLabel' 3 times, and hides brows button and fileName field
– Amita Patil
Nov 27 '18 at 11:47
it adds fieldLabel: 'fieldLabel' 3 times, and hides brows button and fileName field
– Amita Patil
Nov 27 '18 at 11:47
@AmitaPatil See updated answer and fiddle. Thanks.
– Zhorov
Nov 29 '18 at 9:23
@AmitaPatil See updated answer and fiddle. Thanks.
– Zhorov
Nov 29 '18 at 9:23
Hello sir, it works but it shows both tooltips on brows button
– Amita Patil
Nov 29 '18 at 13:01
Hello sir, it works but it shows both tooltips on brows button
– Amita Patil
Nov 29 '18 at 13:01
|
show 2 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53493929%2fhow-to-set-tooltip-to-ext-form-textfield-where-input-type-is-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What exactly is not working? And are you using ExtJS 3? Thanks.
– Zhorov
Nov 27 '18 at 8:42
Yes I am using ExtJs 3, qtip: 'My Field Tooltip' is not working. I want to set tooltip to field lable. but my TextField's type is file, its not working
– Amita Patil
Nov 27 '18 at 8:45