I have successfully added a dropdownlist(flextras) but its not working properly. Whenever I touch the dropdown, the list that pops up goes under the textboxes(which are placed below the dropdownlist). Therefore I'm not being able to select the item from list on top of the textbox, as the focus passes to the text box.
Pleased read this blog post on the subject.
The relevant quote:
The default skin for a TextInput in Flex 4.6 uses the
StyleableStageText. StageText is always drawn above the Flash
Display List, which is why the drop down's popup appears to be under
it. To quote the Adobe docs on StageText:
[start doc quote] Native text input fields cannot be clipped by other Flex content and
are rendered in a layer above the Stage. Because of this limitation,
components that use StageText-based skin classes will always appear to
be on top of other Flex components. Flex popups and drop-downs will
also be obscured by any visible native text fields. Finally, native
text fields' relative z-order cannot be controlled by the application. [end doc quote]
There are two possible solutions for this. The first is to architect
your mobile application so that popups never display above a
TextInput. This may be tough if you're building for multiple devices
with different screen sizes.
The second is to use the Flex 4.5 skin class for your TextInputs:
<textInput skinClass="spark.skins.mobile.TextInputSkin" />
Related
Can anyone tell me how I might add buttons, or other components, to a title/tool bar without using the items array? For months I've been struggling to find a way to make the bar on all my views contain the same user buttons and icons.
It's a struggle mostly on List item detail views where only a back button shows. I want the back button but also own buttons on the same bar. This is so my app has a uniform look and accessible functionality across the entire build.
Toolbar and TitleBar extend Ext.Container.
In Sencha Touch containers always store their components inside the items array.
If you want to have a toolbar that always look the same just create your own by extending Ext.Toolbar. Use the initialize method of such extended Toolbar to add the buttons/icons.
To use it with a list you can create a wrapping container, which contains the extended toolbar and the list.
I wanted to know if it is possible to add a checkbox in the accordion control.
The main idea is to have a list of selectable items (like selecting various items for checkout) and each of them should have an option to display additional information (the accordion panel).
So basically, 3 questions:
Can I have a checkbox in the accordion header?
Can I have all the panels closed from the start? So the user chooses which panel to open, and not start with one panel displayed.
Can I have multiple panels opened at the same time?
Some notes:
- I tried a header renderer option, but the checkbox was the same for all accordion headers, so it was useless.
- It would be great to avoid the use of libraries or external controls. I am aware of some of the limitations of Flex controls though.
Thanks for any help or information you can provide ! :)
If you're not dead set on using mx controls, I'd give the 4.6 list/item renderer skinning method a try.
I'd use the sparks list control and create a custom item render that's comprised of checkbox control, several nested group/border-container wrappers depending on your design/creative requirements and whatever as3 logic would be necessary to expand and contract the item renderer keyed off of the checkbox's click event or change events-- that's some of the beauty of skinning item renderers in flex 4, you can encapsulate all that dope-ass logic within renderer itself.
In any case, here's some links you might find helpful:
http://www.adobe.com/devnet/flex/articles/flex4_skinning.html
http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/
http://saturnboy.com/2009/09/flex4-component-states-skin-states/
hope this helps!
Attached is the screenshot of the UI that I would like to have in my app. When I click on the listitems on the fragment on the left side I see a arrow pointing(question mark in red) on the list item which was clicked, I would like to know how can we achieve this in UI layout. Any special settings to be set?
I was looking at the same feature.
To implement similar, I'd suggest showing an image on the selected item in the list, this would require code rather than Layout XML, It would be controlled by the list fragment when an item is selected. That way you get the visual effect that the two fragments are related via the arrow image.
Did you end up giving it a go for yourself?
I'm creating a facebook application in flex.
I'm actually working on the friends component that shows your friends who are using the application. now, each friend has a profile image.
I created the component using a s:List element.
In the Skin Class of the element i configured the requestedColumnCount to 3, which means it shows 3 friends. i added buttons to scroll left and right in the list.
Whenever I scroll to see a different friend, for a half of a second i see no image because the List component is loading the image in order to view it.
is there a way to make the list preload all the elements so i won't have this kind of problem ?
You can set useVirtualLayout on the List to false, which means it will no longer "recycle" the item renderers. You may still have a lag when the item renderers initially load the images. Hope that helps.
Our product team has requested custom cursors during drag/drop operations. They have provided me with three images to implement:
Open-Hand-Grabber.png: displays when a user hovers over an item that they can drag
Closed-Hand-Grabber.png: item is being dragged
Closed-Hand-Grabber-No-Drop: item dragged over an area where it cannot be dropped
I have embedded these images into the Flex application and I am now trying to implement the desired behavior.
My first thought was to listen to the drag/drop events and set the cursors using the CursorManager.setCursor() method. This solution seems very code intensive and I feel that there must be an easier way to skin the various drag/drop cursor states.
Any ideas?
Check out the various cursor styles available on the DragManager class:
copyCursor
defaultDragImageSkin
linkCursor
moveCursor
rejectCursor
http://livedocs.adobe.com/flex/3/langref/mx/managers/DragManager.html