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
Related
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.
I'm using ExtJS 5 and am having some issues with tooltip positioning. Specifically, when I have a button in the bottom right corner of the page, the tooltip covers the entire button itself.
I've tried using the anchorTo property but it doesn't seem to affect anything. Trying to figure out how I can position the tooltip above the button instead of right on top of it. I'm sure there's an easy solution - any help would be greatly appreciated. Thanks.
See fiddle here: https://fiddle.sencha.com/#fiddle/j94
You can try by adding this attribute -
tooltipType: 'title'
here..
bbar: {
items: ['->', {
text: 'My Button',
tooltip: 'tooltip positioned on top of button',
tooltipType: 'title'
}]
}
Here's what it says in the doc - http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.button.Button-cfg-tooltipType
qtip will work if you've more space below the button, in your fiddle there is no space available to draw your qtip over the button. You can check it by changing the layout to form -
layout: 'form'
or by adding padding as
padding: '20 20 20 20',
to your fit layout
I was able to get it to work by inspecting the inner workings for the tooltip mechanism and adding a 'mouseOffset' array:
tooltip: {
text: 'tooltip positioned on top of button',
mouseOffset: [0,-60]
}
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 have a toolbar like this:
tbar : {
xtype: 'toolbar',
tooltip: 'Right click to clear',
items: [
{
xtype: 'form',
padding: 2,
height:25
}]
}
My tooltip does not show up. I have done QuickTips.init(). Also, is it possible to include some dynamic text in the tooltip?
In your code, you are attempting to put a toolbar inside of a toolbar. Are you sure that is really what you are trying to do?
Your tooltip probably does not work because tooltip is not a valid property of the toolbar object.
As for dynamically altering the tooltip text, you have the getText(string) method.
According to the ExtJS API documentation, Toolbar does not have a tooltip property. In order to use the tooltip, you'll need to apply the tooltip directly to an HTML element, or use the tooltip on a valid, supported object.
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