I'm trying to figure out how layers in Ext work. The documentation is very concise and I can't find a lot about them anywhere else, other than a forum thread where Jack Slocum says they're very simple.
I have a working tree panel, and what I'm now trying to do is put that in a layer so it floats over the page (it's meant as a helper dialog that pops up next to a form element). I've only gotten as far as creating a simple layer with a <div> element in it, but can't get it to contain more advanced stuff. Looking at the Combo source, which uses a Layer for the option list, also didn't make me much wiser.
So, can someone with a little more experience on this subject please tell me: how are you really supposed to use Ext.Layer? Or am I "doing it wrong"? :)
An Ext.Layer is an extension of Ext.element, rather than being an extension of Ext.Component.
Ext.Element doesn't benefit from all the component config options and methods that say an Ext.Panel does, and so you're going to have a much harder time adding a tree panel to an Ext.Layer than if you added the tree panel to an Ext.Window which already benefits from shim and shadow (the two main reasons you would want to use an Ext.Layer).
But before I would resort to using Ext.Window to wrap the tree panel, I would take a look at the shadow config option in tree panel which should provide the 'floating' effect you want...
true (or a valid Ext.Shadow Ext.Shadow.mode value) to display a shadow behind the panel, false to display no shadow (defaults to 'sides'). Note that this option only applies when floating = true.
Related
Lets say I have a website where I have some components and main panel. The idea is to take components and add them to the main panel (like a website builder of some sort). And the question is how do I know if I have one component on top of another? Also it would be perfect if i'd know the coverage area size
Note: I dont like the idea of checking positions for every element on this panel. If it can be done with getters or something similar i'd be happy
you can always use "inspect element" option in Google. There are so much option for developers.
and of course if you are developing something you would have an assumption about the initial position, so this is not a problem while doing.
I'll try to describe what I'd like to have.
At the moment, I have custom control Desk with:
an Accordion Container (dojo)
several Accordion Panes, of which
one contains custom control Agenda
In custom control Agenda, there's nothing really special, expect for
custom control Tiles
In custom control Tiles, I display meeting info in a nice way, as tiles. There can be multiple tiles on one row. In order to make things looking perfect, I have to spread these tiles over the full line, justified, using CSS (that part works, 99%). What doesn't work is that when the accordion is hidden when the page loads, I have no details on the size of each tile so I can't do my calculations (i.e. offsetWidth==0).
So I have to delay the calculations to when the accordion is activated and onShow is triggered. But how to pass this on downwards, all the way to the custom control Tiles?
Tiles is used in other places too, so it cannot be a fixed reference. It doesn't even know that it's inside an accordion...
Question:
How can I call/trigger a function that's inside the Tiles custom control from the top custom control, Desk, in a transparent way?
NB A code example, even an illustrative one, would be very complicated to make (I think).
Could someone give me a push into the right direction? Events and triggers maybe? Pass accordion id down to the Tiles cc and then do something brilliant?
Thanks!!
I have a solution right now, but it isn't exactly a beautiful and transparent one.
I gave the Tiles a styleClass="Tiles", and then I can find these Tiles using getElementsByClassName. It's not the proper way, but it's a way, the pragmatic one.
Good day!
I have a page with a vertical menu off to the left and a box to the right of it. Currently I am able to drag a ghost of a menu item and let go of it. It doesn't actually drop anything, so there is no actual change to the menu. When I drop the ghost, it calls a method.
What I'd like to be able to do is to create an object with JQuery or plain javascript or whatever and instantiate it.
This object would have the following properties:
- Have its parent be the div box that its dropped on.
- Be contained by its parent, yet draggable within it.
- Have the ability to be a parent of another object of the same type when its dragged into it from the menu
- Have a title based on the menu item that it was dragged from
- Store whatever text values are assigned to it.
I'm not asking anyone to do this (although you can if you want), but I would love to know if its possible and if anyone can provide a link to some sample of an object or widget being built that can be assigned properties and events.
Thanks so much,
Carlos
http://jqueryui.com/sortable/
This is really by far your best option. I have seen others, but this does exactly what your are describing. Most of the time sortable does everything you want, but if it gets really complicated, say you want to have the item your currently on light up or not be easily contained in an option you can still use draggable and droppable to do w/e you want.
I found something that will work for me. Instead of reinventing the wheel, I will just modify the Jquery-UI's dialog widget. its alomst exactly what I need out of the box. There's an interesting article on it here: http://www.erichynds.com/jquery/tips-for-developing-jquery-ui-widgets/
Thanks much for the help, all.
I have nested tab panels, (outer tab panel groups inner tabs), like the outer panel is Contacts, and then inside it you have a tab panel for each open contact item, another outer panel is Opportunities and in it you have a tab panel for each open opportunity.
This is confusing to users at first, so I would like to add some styling to tab panels, so users can differentiate and give meaning to outer and inner tabs.
I had zero success tough with syling a tabPanel, what is the right way to do it? bodyCfg, tbar, tbarCls, baseClass???? I never dealt with styling a widget in ExtJS and I'm struggling for half a day with no success.
Any pointers on how styling works especially for TabPanels is appreciated.
thanks,
Hazım
I find more than often you need to get your hands dirty with CSS when it comes to styling ExtJS controls.
This is the general strategy that I follow that's been working for me so far.
you need chrome debugger or similar that allows you to view HTML and change CSS styles on the fly.
look at the HTML for the widget in chrome debugger and manually tweak the styles until you find the exact DOM node that you need to style.
Look for a config variable in the widget that allows you to style that node you found in step 2. Most of the variables are named "xxxCls". This takes experience, there is no short cut, for example what you could do is set the "baseCls" and look at the resulted HTML to see where in the DOM tree that class is inserted.
quite often you will find there is no config variable available to style the thing you want (for example the line-height of the header bar in most panels). In this case you will have to overwrite the default ExtJS CSS class to the value you want. Standard good CSS practice applies.
I'm looking for a javascript/css tooltip that can do the following:
Shows up when you hover over some page element (such as a help icon.)
Repositions itself based on the browser window (for example if it's on the far right of the page, it will show itself to the left of the page element, otherwise it'll show to the right of it. That way it won't go off of the page.)
You can hover over the tooltip and it won't disappear. This way you can select text or click on a hyperlink within the tooltip.
I'm using dojo but their dijit tooltip seems to be very inflexible, as it can only spawn off of another dijit element, most commonly a dijit button. I'd rather not having to reference a whole other javascript framework like jquery or prototype so hopefully someone has a way to do this using just one basic script.
Unfortunately for you, the tooltip style plugins available for Dojo are nowhere near the other frameworks (namely: jQuery). Because of this, you have three options:
Reinvent the wheel. Take what you learned from other tooltip scripts and build your own from scratch. This option takes the longest development time (and in the inevitable maintenance of cross-browser bugs).
Extend an existing plugin. You can take a current tooltip plugin for dojo (or perhaps a library agnostic plugin) and extend its functionality by adding your own scripts to it.
Use jQuery. This has already been said twice by others, but let me say it again. jQuery has a thriving plugin ecosystem, and if development/maintenance times are truly important to you, then jQuery should definitely be considered.
Again, assuming that you don't mind using jQuery (it's awesome!!) I played around with a few tooltips and found this one the best: http://flowplayer.org/tools/tooltip/index.html
Extensible with good documentation. Check out the 'position' config option and see if that does what you need.
Good luck!
If you do decide to use jQuery, qTip is a nice jQuery plugin that is very configurable and will probably meet your needs. http://craigsworks.com/projects/qtip/
I have been using several jQuery plugins, including jQuery TOOLS, Beauty Tips and Cluetip. I think all three meet your requirements.
If instead of a black box you want to know what's going on, I recommend this tutorial:
http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/
(and take a look at the comments section)
The dijit.Tooltip documentation gives two simple examples, the first attaching a tooltip to simple DOM nodes seems to meet your needs. The second happens to wire up the tooltip to another dijit-based widget (a button). Note that the property connectId takes a dom node reference or string id. Note that dijit may be used either programmatically or using a markup-based declaration.
Different tooltip implementations may have different functionality. Among other things, dijit.Tooltip provides ARIA accessibility for screen readers, keyboard access, bidi enablement, and automatic positioning around a node but within the boundaries of the screen.