I'm working on a events board app. Events are displayed in columns at the height matching the start time and pack into the space if there is more then one overlapping. Each event is a view and I want to have a div next to the view that shows and hides on hover.
I know how to bind to mouseEnter and mouseLeave to show and hide part of the template but I want to show something adjacent to my view/template not within it.
I've already got some computed properties on the view to place the event with the correct height and width so I don't want to add the popover inside the view.
Here is something to mess with http://jsbin.com/osoner/1/edit
Seems like something simple but I want to make sure I'm doing things the Ember way.
After messing a little with your provided jsbin, here the results.
Basically what I've done was adding a new popup css declaration wich do position the popup so that it appears outside the parent view, and also moved the {{#if...}} helper into the originating view.
If you want to go more fancy, checkout this jsfiddle wich uses the twitter boostrap popover.
Hope it helps.
Related
I have a multiple view SDI project. One of the views has to be split, probably with CSplitterWnd or CSplitterWndEx. But the other views should not be split, and should not have the split buttons and scrollbars. I tried various combinations using CSplitterWnd and some classes derived from it which I found online, but I can't get what I need. So here are the constraints:
One view is CViewUnsplit, without splitter
The second view displays initially only CViewSplitLeft
A command allows the user to split/unsplit and add or remove CViewRight.
It should work in the following way.
The first is CViewUnsplit is just the way a simple SDI application comes up.
The second switched view can be easily achived in just swapping the view. This is well documented.
The basics are shown here in this sample with two views
http://msdn.microsoft.com/en-us/library/s199bks0.aspx
The third is a little tricky. Just create the splitter and place the CViewSplitLeft with SetParent into the left splitter part. The right view can always stay in the splitter. Again here the splitter is just hidden in the main window. When you switch back to another view just Use SetParent again and move the CViewSplitLeft to the CMainFrame.
Always just hide all unneeded views.
Take care about the IDs of the views as shown in the sample. Otherwise the resizing will not work.
I have a computed property that acts as formatter. Example fiddle to show basic functionality here
, http://jsfiddle.net/mlienau/xSkyd/2/.
I haven't implemented this functionality in the example, but the end user of this can remove terms by dragging them out, using draggable from jquery-ui . I was accomplishing this using a jquery live on mouseover of the element, but on ipad it doesn't work. Adding touchstart to live event is a hack because the user has to touch it once, before they can drag it out.
So my main question is: Is there a way to determine when a computed property has been inserted into the DOM like there is with view and didInsertElement, so I can set up the draggable handle there? Also, I am aware of some non-ideal ember practices in the example. Thanks!
I want to implement a ‘modal’ view like the ‘search’ view of the AppStore on the iPad.
When shown, it should:
Still show the tab bar. Selecting any of the items should take you to their view as normal.
No tab bar item is highlighted (because the search view is ‘modal’).
The closest I’ve come, with existing APIs, is:
On the ‘search’ view controller, set the UIModalPresentationCurrentContext modal presentation style.
Show ‘search’ view controller modal from the active view controller inside the tab bar controller (not from the tab bar controller itself).
However, this does not seem to be the right path:
View controller is shown underneath the status bar. I can work around that from -[UIViewController viewDidAppear:], but when changing the orientation of the device, this leads to all sorts of drawing issues and the controller, again, tucks itself underneath the status bar.
Tab bar item is still highlighted.
to keep showing the search bar just trim the modal view's hight so that it doesn't cover the tab bar.
For orientation changes, you just need to handle that by changing the view size and making sure the modal view is always brought to the front of all the views. You can modify that view's frame and contents programmatically or you can just create nibs for the orientations you want to support and load them up when it changes. Also note if you do change the view's frame programmatically you will probably need to resize/reposition fields as well.
For dealing with the tab bar, you should be able to turn off the highlighted item. So when you pop up the modal also make sure to turn off the highlighted item. If you want to interact with the toolbar from the modal view you can do that with delegates, passing an instance of the parent view (or just accessing parent view... I think you get that for free)
I have an overlay that has a toolbar as a dockedItem and a Ext.List as an item.
This overlay is shown as the user drags the slider to show the important things in each card I have in a carousel. Each card has its own store with data I want to show in the overlay.
I am able to change the toolbar's title while I drag:
this.overlayTb.setTitle(cards[index].categoryName);
but when I try to change the store that feeds my list view, it does work.
this.myList.store = cards[index].store;
It just keeps showing the data of the initial store I set up instead of changing, like the toolbar title does.
I have tried calling doLayout() on myList and Ext.StoreMgr.get('newsStore').load(); as suggested in this answer, but no good came out of that. And if I try:
this.myList.update();
it stops showing the data of the store, and I can only see a blank panel
While debugging, I can see that this.myList.store changes to the store I need, but the view is not updating.
I hope you can help me
Use the bindStore(cards[index].store) method of the Ext.List which properly destroys and cleans up after the old store and binds the new store to the List's events.
I have a list, I want to open a View/Panel when "itemtap" event is fired (i.e. when a list item is selected). How to do it? Shall I use NestedList and getDetailCard() for it?
Thanks
EDIT : I think I should use CardLayout for it.
It depends on your situation.
If the new content you are trying to display is supposed to be replacing content on the screen, that yes using the CardLayout is the best option. This would be akin to emulating something like the UISplitViewController in the iOS world, where you have a list on the left and a main view on the right in which additional content is slid onto the screen based on actions to the right list.
So, on response to 'itemtap' events in the list you would do a 'setActiveItem' call to the panel that has a layout of card layout, and a series of children panels. You could also lazily create the panels in response to the list actions and add them on the event.