Ext.dataview.component.DataItem descendant with a complex UI - sencha-touch-2

I am creating a custom DataItem that will raise events when tapped.
The example on page http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2 is pretty ok but I couldn't find a way to create a complex ui for the item. The sample has an hbox layout and creates the controls in it. My dataitem also has an hbox layout but on the far right I have to lay three buttons in a vbox layout. Do I have to create another control for the vbox and the buttons in it?
I dont' want to catch DOM events, I want to do it the Sencha Touch way.
Thanks.

I've added a demo to sencha fiddle. It might give you an idea on how to proceed. Here is the link.

Related

dijit toolbar on the left side instead on top

so I didn't find something in the dijit Toolbar API I'll try it here.
Is it possible to place a dijit toolbar to another place than on top?
I'd like to create a Toolbar declarativly on the left side inside a contentpane so the toolbar is from top left, to bottom left.
Is there a way to do it?
Well if you go with declarative approach for widget creation, you can write custom css for each of them .
So getting a custom layout doesnt seem to be a tough task. You can write some div container's with a fix width , break line after each menu item and get the required layout.
check this for example:
https://jsfiddle.net/GfB2B/2/

Simple XAML-only Animation to Change Image Opacity on Button Click

I'm trying to create a simple animation example on the Windows Phone 8, but I imagine this should apply for WPF, WinRT, etc. anywhere XAML is used.
How do you animate the opacity of an to change from 0 to 1 when a 's click event is fired?
I've seen many examples of animations, but the button is always animating it's own properties, not the properties of a different control. I know I'm missing something small but I'm stumped -- no matter what I try I get XAML parse exceptions. I can get this to work with C#, but not with XAML.
Here is easy way to handle storyboard animation on any component and control by another component
http://msdn.microsoft.com/en-us/library/windows/apps/dn263220.aspx

Creating draggable panels

I want to create a panel which has three child panels which can be dragged to left side only. when they are fully visible( when they are completely appear on the parent panel), the parent panel should be desabled ( I used modal config, but the child panel overlay on one another and they resized to the html content inside them). When three child panels were dragged to the left side, the parent panel should be enabled. User may again drag those child panels right to the initial position, then the parent panel again should be desabled. I could only create the child panels with the sliding effect, but don't know how to acheive other requirements, coz i am new to sencha touch and extjs. Are there any other resources to learn more about sencha and ExtJs?
And other thing is, as an example, Sencha docs dont explain more about Draggable object's 'constraint' ,'direction' ..etc. where can I find more details about Those classed which are not fully described in their docs.
I have attached two images( initial look of the panels and how it should look when child panels are dragged), Can anyone give me few hints how to achieve my task?. Thank you very much!!

Do I have to use buttons?

I am making an app. It is kind of a hide and go seek. I was thinking about sectioning off separate areas and having the app say something different as to where you touched the screen. It will give you clues to where on the screen you need to touch next. So, these are my questions:
What is the easiest way? Would I want to make a grid of roundrectbuttons-placing each one and making an outlet for each - or can I make grid of buttons some other on the screen.If I place each button I will have a 9x12 of buttons making 108 buttons. Then I need to have a way to choose a random button as to where the location of the thing is question is. Would I use buttons at all or is there an easier way?
108 buttons is far too many to place in a xib :) If you wanted to use buttons then I would create them programatically in viewDidLoad in your controller.
Hoewever, I wouldn't use buttons at all!
I would use a TapGestureRecognizer attached to your background view. When you recieve a tap, take a look at where it was (use locationInView:self.view) and use that to work out what to do with the press.

Sencha Touch Ext.List disappearing behind a wrapped toolbar

I have written an MVC Sencha Touch app to query a database via JSON and then return the list in an Ext.List
The idea here is to have an iPhone-style UINavigationController effect that slides in for the results list.
To achieve this I use an Ext.Panel that loads 2 cards, one is my query (Ext.Form) the other is the results wrapper Ext.Panel (I use the wrapper to display a toolbar at the top since Ext.List is not capable of this)
I use the forms filter to trigger a 'search" method in the wrapper that then loads an instance of my Ext.List.
This all works quite well, except the results list fills the whole screen, and therefore sits "behind" the wrappers toolbar instead of below it.
The results don't even display at all unless the Ext.List has fullscreen:true.
Any suggestions most welcome.