I've been looking at adding a simple calendar to an ExtJS app and like the features of the tui-calendar.
I've started with just trying to display a month in a panel. I've tried various layouts, length and width configs, but the calendar never fully displays. Here's a fiddle showing the results.
Any ideas what I'm missing?
Thanks in advance,
Gordon
You can use layout: 'fit' on the panel and set the div's width and height to 100% with html style, like <div id="calendar" style="width:100%;height:100%"></div>. This way you:
tell the panel (which has a fixed size) that it will have one child that should occupy all available area,
tell the div which contains the calendar to use 100% of the available place horizontally and vertically.
Ext.create('Ext.panel.Panel', {
renderTo: document.body,
height: 600,
width: 600,
layout: 'fit',
tbar: [{
xtype: 'button',
text: 'Display Calendar',
handler: function (button) {
const container = document.getElementById('calendar');
calendar = new tui.Calendar(container, options);
calendar.setDate('2023-03-01');
}
}],
items: [{
html: '<div id="calendar" style="width:100%;height:100%"></div>',
xtype: 'component'
}]
});
I'd like to note that I am not sure that this way ExtJS will manage the life cycle of the calendar object. I would recommend to keep track of the created calendar object and destroy it when the panel is destroyed. To do so, add a destroy listener event to the panel and destroy the calendar object there.
Related
I'm trying my hands on extjs 4 by trying to recreate some component I have in an old extjs 2 project.
One of the component was creating a floating toolbox (like you get with photoshop) with a thin border and no title or min/max/close buttons. Like so..
In ext4 , I can't seem to be able to reproduce that same result. Here's what the same code looks like in ext 4:
This is the code I had:
app.Toolbox = Ext.extend(Ext.Window, {
,initComponent : function()
{
Ext.apply(this,{
closable:false,
border:false,
width:345,
height:60,
onEsc:Ext.emptyFn,
resizable:false,
x:20,
y:20,
items:[
/* icons (a html items) */
]
});
app.Toolbox.superclass.initComponent.call(this, arguments);
}
/* handlers, methods, etc */
});
Is there any way to get a similar result in ext 4?
I tried using some css to hide some elements like the title bar, but ext 4 always calculates the height of the window as if the element was visible, which looks even weirder.
Any idea?
Ext.panel.Header is just an extended Ext.container.Container so you can do as you wish to it.
I think the closest you're going to get is by applying frame: true which kind of forces the content to fill the window frame.
However, it doesn't seem to work if you have a Close button in the top right.
Ext.create('Ext.window.Window', {
height: 60,
width: 345,
closable: false,
layout: 'fit',
frame: true,
items: {
html: '<p>hello</p>'
}
}).show();
You're still going to have to style it a little, but its far closer to what you need.
i was trying to drag and drop an image inside a panel of extjs. but it didnt work.
Just want to drag and drop elements like in the draggable demos of jquery. Is there an easy solution cause i didn't found.
thanks in advance,
cheers,
Thomas
I am sorry ChrisR, forgot the code. Well i tried it in that way:
panel(with html code of an image) inside a panel. dreagable = true. But i cant drag an drop it like to position XY.
Ext.createWidget('panel', {
renderTo: 'panel1',
width: 500,
height: 500,
items: [
{
xtype: 'panel',
title: 'My Panel',
width: 150,
height: 150,
draggable: true,
html: '<img id="resizeImg" src="avus_gtr.jpg" style="width: 100%; height: 100%;"></img>'
}]
You realize you are adding an image into a panel which is draggable and insert that panel again into your main panel? It isn't the image you are making draggable, it's the panel that the image sits in which is draggable but still the code you posted looks totally wrong.
I suggest you read up on ExtJS DD first to grasp the concepts of Drag and Drop in ExtJS and how that is implemented in default Components like Panels. The way of using DD on an Ext Panel is totally different than making an image draggable. A Panel is an Ext Component with alot of built in features like DD but an image is just a DOM element on which you should implement your DD behaviour yourself.
Check the following links, they have some good info on DD in ExtJS
http://rowen.javaeye.com/blog/479133
http://examples.extjs.eu/?ex=freedrag
http://www.extensions.extjs.com/learn/Tutorial:Advanced_Custom_Drag_and_Drop_Part_1
And ofcourse the docs for Ext.dd: http://dev.sencha.com/deploy/dev/docs/?class=Ext.dd.DragDrop
i'm creating my personal extjs webdesktop , i have a tab panel with a tab where i wrote html code for iframe that load a aspx page.
When i resize window tabpanel iframe contents doesn't resize like a browser does and i see just scroll bars,is it possible autoresize iframe contents also?
here there is my code:
items: [{
title: 'Tab Text 1',
html : '<p><iframe src ="newadmin.aspx" width="100%" height="100%" frameborder=0></ iframe></p>'
}
Ext.create('Ext.panel.Panel', {
title: 'TITLE',
width: 450,
height:190,
renderTo: 'remotecontrol',
layout:'fit',
constrain:true,
items:[{
xtype : "component",
autoEl:{
tag:'iframe',
src :'Your URL'
}
}]
});
constrain:true this will helps to auto resize
Are all the elements dimensions inside newadmin.aspx defined as 'x%' ?
That iframe cannot be resized by its ExtJS parent component, because Ext positioning and sizing is not as simple as you think.
But instead of learning a lot of Ext internals, you could simply use the following UX (user extension) which handles your particular problem (among other things): Ext.ux.ManagedIframe
I have a combobox inside of a ext.panel, inside of an ext.window. When I click the down arrow to show the possible SELECT options, the options pop up at the top-left of the browser window, instead of below the SELECT box. The funny thing is if I attach the drugDetailsPanel (see code below) to a div on the page (instead of inside an ext.window), the combobox works correctly. This also happens when I change ext.panel to ext.form.formpanel, by the way.
Any ideas?
My code:
drugDetailsPanel = new Ext.Panel({
layout:'form',
id:'drug-details-panel',
region:'center',
title:'Drug Details',
height:200,
collapsed:false,
collapsible:false,
items:[
new Ext.form.ComboBox({
fieldLabel:'What is the status of this drug?',
typeAhead:false,
store:drugStatusStore,
displayField:'lookup',
mode:'remote',
triggerAction:'all',
editable:false,
allowBlank:false,
emptyText:'Select a status..',
name:'/drug/drug-status',
id:'drug-status'
})
]
});
newDrugWindow = new Ext.Window({
title: 'Add Drug',
closable:true,
width:650,
height:650,
//border:false,
plain:true,
layout: 'border',
items: [drugDetailsPanel],
closeAction:'hide',
modal:true,
buttons: [
{
text:'Close',
disabled:false,
handler: function(){
newDrugWindow.hide();
}
},
{
text:'Save Drug',
handler: function(){
newDrugDialog.hide();
}
}]
});
Try to add shim: true to combo-box control.
Older versions of Ext had issues like this in certain browsers (FF 2.x) in certain situations dealing with nested positioning, the specifics of which escape me now. If that's the case, search the Ext forums for more info. If not, then I'm not sure...
This forum thread helped me: http://www.sencha.com/forum/showthread.php?177677-IE-displays-combobox-dropdown-in-the-top-left-corner-of-browser-window
Just give the combobox a (unique) name. Giving the combobox an inputId should also help
Seems like IE does not respect the position of the element if it does not have an explicit name/inputId. This thread goes more deeply into it: http://www.sencha.com/forum/showthread.php?154412-Combo-Box-options-appears-in-Top-Left-Corner-in-IE-9
I've created a panel bundled with an Ext.Template. This panel is contained in another panel that starts its life collapsed.
id: 'myPanel',
title: 'My Title',
layout: 'border',
collapsible: true,
collapsed: true,
hideCollapseTool:true,
bodyBorder: false,
height: 300,
bodyStyle: 'background:#F9F9F9;',
items: [{
id: 'myDisplayPanel',
bodyStyle: 'background:transparent;',
width: 300,
border: false,
margins: '5 5 5 5',
region: 'west',
tpl: new Ext.Template([
'some template'
])
},
{
id: 'myForm',
xtype: 'form',
bodyStyle: 'background:transparent;',
border: false,
margins: '5 5 5 5',
region: 'center',
[...]
This template-panel is supposed to be updated as the result of a row select in a neighbouring grid. But I get an error the first time I call .update(data); on the myDisplayPanel, as it contains no body element.
myGridSelectionModel: new Ext.grid.RowSelectionModel({
singleselect: true,
listeners: {
rowselect: function(sm,rowIdx,r) {
Ext.getCmp('myDisplayPanel').update(r.data);
Ext.getCmp('myPanel').expand(true);
}
}
}),
The call to myDisplayPanel.update() causes an error when Ext tries to call the template.overwrite function with myDisplayPanel.body as the first param.
function(b,a,c){b=Ext.getDom(b);b.innerHTML=this.applyTemplate(a);
Is it possible somehow to force Ext to generate a body element for this hidden panel before it is beeing shown? I've tried to expand the element prior to updating it, but this has now effect...
I know this thread is 2 months old, so I'm not sure if you ever found a solution. However, I just ran into the same thing and came across your thread while looking for an answer. This is what I ended up doing:
Where you're currently running panel.update(content), try this:
if(panel.rendered) panel.update(content);
else panel.contentToLoad = content;
Set up a listener for the render event to run:
if(this.contentToLoad) panel.update(this.contentToLoad);
That way, if the panel isn't rendered, it will store the content somewhere and the render listener will load whatever is there when the panel IS rendered.
Collapsed panels (and hidden containers in general) by default do not layout their children until they first become visible. You can override this behavior by setting forceLayout: true on the collapsed container. As the name suggests, this will force the container to perform its layout whether it is visible or not. Note that in your case this would be myPanel that would need this configuration, not myDisplayPanel.
You might try Panel's elements config, which from the docs is "A comma-delimited list of panel elements to initialize when the panel is rendered." So e.g.,
elements: ['header','body']
However it already defaults to 'body' only, so it may just be that the panel is truly not rendered yet when you are updating it. Try reversing the order of your calls so that the container is expanded first (should force the child panel to render) then update it.