I am trying to add a tooltip(Ext.tip.ToolTip) to the title of the message box(Ext.MessageBox)
I am using
Ext.MessageBox.show(
{
title: 'Title',
subtitle: 'Subtitle',
message: 'Message'
});
How can I add an Ext.tip.ToolTip to the title of the Message Box?
THis is for the modern toolkit. May be similar for classic.
Ext.MessageBox has a header config. This can be a config object. The header is a Ext.panel.Header and this object has a tooltip config.
Related
I am working in Extjs. I have fileuploadfield. It shows default browser tooltip as 'no files chosen' in chrome and 'no files selected'in firefox.
I want to disable or hide this tooltip. So how to perform this in extjs. Please help me.
You can add a buttonConfig to your filefield object and specify these settings to get around the default for Chrome. I haven't yet been able to find a way to get rid of it in Firefox.
{
xtype: 'filefield',
buttonConfig: {
xtype: 'filebutton',
text: 'MyButton',
tooltip: ' ',
tooltipType: 'title'
}
}
I need to write a component that does file upload (restrict the upload file types to PDF only).
I have seen CQ has its own dialogs to upload files, but I am not sure, whether I could resuse them.
Please let me know, if I could use out of the box xtypes "smartfile",
"fileuploadfield", "html5fileuploadfield", or "uploaddialogbutton"
with restriction to PDF files.
OR Do I need to write custom component extending one of the xtypes?
I appreciate all the help.
EDIT
<div id='fi-form'></div>
<script>
CQ.Ext.onReady( function(){
var card = new CQ.Ext.Panel({
renderTo: 'fi-form',
title: 'Example Wizard',
layout:'card',
activeItem: 0, // make sure the active item is set on the container config!
bodyStyle: 'padding:15px',
defaults: {
// applied to each contained panel
border:false
},
// the panels (or "cards") within the layout
items: [{
id: 'card-0',
xtype: 'fileuploadfield',
emptyText: 'Select a PDF',
fieldLabel: 'Photo',
name: 'photo-path'
},{
id: 'card-1',
html: '<p>Step 2 of 3</p>'
},{
id: 'card-2',
html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
}]
});
});
</script>
The following is the output
Could some one please tell me the what is this "Browse" button there ?
Thank you,
Sri
If you are talking about providing upload options in your dialog, then it is possible.
You can use the html5smartfile xtype and then add the mimeTypes property to specify the type of files that are allowed for uploading. You can also configure the ddAccept property to restrict the type of files that can be dragged and dropped from the content finder.
Sample configuration would be as follows
<upload jcr:primaryType="cq:Widget"
fieldDescription="Accepts PDF files."
fieldLabel="Upload"
mimeTypes="application/pdf"
mimeTypesDescription="PDF Files"
name="./file"
sizeLimit="100"
xtype="html5smartfile"/>
Additionally you can use the sizeLimit property to specify the maximum file size that can be uploaded and the mimeTypesDescription to specify the type of files allowed in the error message that pops up when a file with invalid mime type is uploaded.
Refer to Widgets API to know more about available configurations.
Please help understanding why the commented code below does not work on ExtJs 3.4:
var mywin=new Ext.Window({
width : 200,
height: 150,
title : 'Accordion',
layout: 'accordion',
border: false,
items: [
panel1,
panel2
]
}).show();
<!--Ext.getCmp('mywin').add({ - THIS DOES NOT WORK ,while below works-->
mywin.add({
title: 'Appended panel',
id: 'addedPanel',
html : 'Add Me!'
});
mywin.doLayout();
mywin is a reference to a window object that you created. This is just a normal JS construct using variable assignment.
Ext.getCmp('mywin') attempts to look up a component that has an id property of mywin. It's typically a good idea to avoid using Ext.getCmp unless you'll only ever be creating once instance of the component, since it must be globally unique.
Ext.getCmp('x') works only if x is id of some component(Panel or window whatever you want to use). Just provide an id field(id:'component_Id') and use Ext.getCmp on the id of component.
In many scenarios you can also use lookupReference, please check extjs docs for it.
You can try using the following for getting the reference to your window (although you already have it in your mywin variable):
var winInstance = Ext.ComponentQuery.query('mywin')[0];
winInstance.add({
title: 'Appended panel',
id: 'addedPanel',
html : 'Add Me!'
});
But the problem was you were trying to reference your window component using the name of the variable, so like it's mentioned in previous answers, you would need to use an itemId: 'mywin' or id: 'mywin', since as it stands there is really no component with an itemId or id with that name.
Team,
We are facing one issue where we are not able to define default value for file upload field. Basically we want to show one helper text like "Upload file" before user uploads the file.
xtype: 'textfield'
,inputType: 'file'
,fieldLabel: 'File Upload'
,value:'File Upload'
,autoCreate: { tag: 'input', type: 'text', size: '20', autocomplete: 'off', multiple: 'multiple' }
,name:'import_filename'
, id:'import_filename'
I also met this issue and setRawValue() works.
you can render component in listeners.
listeners : {
render : function(comp){
comp.setRawValue(fileName);
}
}
I think you are talking about emptyText. This config shows a text when there is no value in the field.
Note: If you use inputType:'file', emptyText is not
supported and should be avoided.
I'm trying to set up an Extensible Calendar Pro in my ExtJs 4.1 application, but I still get a name is undefined error.
EDIT:
I solved the original problem, but directly went in another.
Updated code:
Ext.define('ZeuS.view.panels.ZeusMainPanel',{
extend: 'Ext.panel.Panel',
id : 'zeusMainPanel',
alias : 'widget.zeus',
requires : [
'Extensible.Extensible',
'Extensible.calendar.CalendarPanel',
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.data.EventModel',
'Extensible.calendar.view.*'
],
autoShow : true,
layout : 'border',
border : false,
initComponent : function(){
this.items = [{
/*
* Some other Ext Elements
*/
}, {
region : 'east',
xtype : 'extensible.calendarpanel',
name : 'zeus-calendar',
width : 500,
eventStore: Ext.create('Extensible.calendar.data.EventStore', {
data: Ext.create('Extensible.calendar.data.EventModel',{
StartDate: '2101-01-12 12:00:00',
EndDate: '2101-01-12 13:30:00',
Title: 'My cool event',
Notes: 'Some notes'
})
})
}
];
this.callParent(arguments);
}
});
Now it loads all classes correctly when the Extensible singleton is included, but nothing works. I just have a white screen and no functions in the controller or anywhere else are called. When I remove it from the requires list it comes up with this error: Extensible.log is not a function
Do I use the plugin at all right?
Any advice?
Extensible.log is defined on the Extensible singleton, so it should always be available if your dependencies and includes are set up correctly. You really should post in the Extensible forums with additonal details (Ext version, Extensible version, script include markup) as this is basically a product support question.
EDIT: By the way, there is no such thing as Extensible.Extensible, which might be part of your problem. Also you cannot use wildcard requires statements for non-Sencha classes. You might try getting a basic example working first before trying to create a complex layout with it.