auto scroll to the bottom of container in sencha touch 2 - sencha-touch-2

I have a view that contains 2 parts:
+ Part 1: an ADD button
+ Part 2: a container LIST that has scroll attribute is auto.
When user clicks on button ADD, the system will add a container to container LIST. User can add as much as they want.
But my container LIST has limit height so I want to scroll to new container that added to container LIST when user clicks ADD button.
Anyone help me. Thanks

I tried to use:
var scroller = pan.getScrollable().getScroller();
scroller.scrollToEnd(true);
But it's not working.
Then I tried another way:
var scroller = pan.getScrollable().getScroller();
scroller.scrollTo(x,y,true);// y = 100000000000
It's work :)

var scroller = myListObject.getScrollable().getScroller();
scroller.scrollToEnd();

Related

How to access ScrollRect items and get it selected and clicked?

I am using Myo so my inputs are not the same as keypress and mouse.
I am trying to access items in the scroll UI Panel. Here is a snapshot of my Unity3D hierarchy.
http://imgur.com/f0cIJWl
As you can see, I have
-StoreMenu
-ScrollPanel
-ScrollRect
-ShopItems (list of items)
How can I possibly scroll and highlight the list of item. And on certain input gesture, get it selected ?
I'ved only managed this far:
scrollpanel = GameObject.Find("ScrollPanel");
scrollRect = scrollpanel.GetComponent<ScrollRect>();
scrollRect.GetComponent<ScrollRect>();
scrollRect.verticalNormalizedPosition = 0.5f;
I can get the scrollrect, move to certain position in the scroll but items are not highlighted.
Thanks in advance.
TRY THIS : http://docs.unity3d.com/462/Documentation/ScriptReference/EventSystems.EventSystem.SetSelectedGameObject.html
This can be used to Set the object as selected

Sencha Touch 2.1 calling another view based on MVC

Using ST 2.1 and MVC I am trying to call another view. Shouldn't I have a view and a controller for each panel? If needed of course. I think a static about page will not need a controller.
So my layout would be.
app
controller
Main.js
Contact.js
view
Main.js
Contact.js
About.js
resources
css
images
app.js
index.html
Here is my overall project structure.
My app.js calls Main.js. This is my main view and controller. My Main view extends Container. On the Main view I have created a titlebar with left and right buttons and a title. Then I created a panel that holds my main buttons. Then I created a toolbar at the bottom that just has an image.
I want my Main container to change the panel in the middle but keep the top and bottom bars. Each of my views is a panel with various things on them. I can get the overall screen to change but it takes my titlebar and toolbar with it.
I hope this is enough info. Thanks, Donnie
If you want to change just the panel you have to put that panel as item into parent panel. When you want to change this panel with other panel or anything else just get reference of parent panel and remove existing content before adding new panel.
var p = Ext.getCmp("myPanel");
var pp = Ext.getCmp("parentPanel");
var newPanel = Ext.create('Ext.panel', {html : "some content"});
pp.remove(p, true);
pp.add(newPanel);
PS - I haven't tested this code, its just guideline.

Sencha Touch: After scrolling a panel using a button tap it back to initial position again when scroll end

I am trying to scroll a panel using button tap, and the panel is scrolling as I want. But my problem is that,
After scroll end it back again to its initial position, doesn't stick to its new position.
Why this behavior and how can I get leave from this?
Code I used (working just fine)
var container = this.getDealdetails();
container.getScrollable().getScroller().scrollTo(x , y, true);
The scrollable container will scroll back if the scroll to position is greater than the height of the container.
This is best demonstrated with an example. Run this fiddle: http://www.senchafiddle.com/#8Qnt8
Make your browser window smaller in height and note how it behaves. Hope this makes sense.
var panel= Ext.getCmp('iObserveCreateRecords');
panel.getScrollable().getScroller().scrollTo(0, 0, true);
//iObserveCreateRecords is panel id

sencha touch:dynamically add/remove components to panels

i extended a panel containing
-Panel
-Toolbar with button
and i registered it as a xtype using Ext.reg().There is one more panel in which i want to add the registered xtype and did it. How can i add/remove a component/html content dynamically to the outer panel on button click.
Thanks in advance.
I hope it will help you :
var component = ...;
var position = 0;
component.insert(position, new Ext.Panel({html : "inserted"}));
component.doComponentLayout();
While an older question, you can use .add or .addDocked
http://docs.sencha.com/touch/1-1/#!/api/Ext.Panel-method-add
This is far simpler since it allows the panel to add the element and manage the height ect.

Reload carousel items

I need to reload the items from my carousel (I clicked on an item and a panel gets destroyed, then when I try to go back, I need to rebuild the carousel)
For this I am removing the items of the carousel by doing:
var len = cards.length;
for(var c = 0; c < len;c++)
this.myCarousel[0].items.remove(cards[0]);
then I set the cards again and set the carousel items again:
this.myCarousel[0].items.append(cards);
this.doLayout();
but after doing this, the cards dont get set right, they just get written on top of each other, no carousel effect gets done. Also the cards start being drawn under the carousel's toolbar, instead of starting below the toolbar.
The first time when I load the cards it works perfectly (when I build the carousel from scratch), but if I delete the previous cards and add them again, they don't get displayed properly, I hope someone can help me.
Thank you in advance
Do the adding and removing on the carousel itself as it has methods to do this:
this.myCarousel.removeAll();
var items = [];
for (...) {
items.push(<item def>);
}
this.myCarousel.add(items);
this.carousel.doLayout(); // Force the carousel to re-render
this.myCarousel.scrollToCard(0); // This will send the user back to the first card
If the user was at a different card when you run the above (say, if you put this into an orientation check) then you should return them to the correct card like so:
var curIndex = this.myCarousel.items.items.indexOf(this.myCarousel.layout.activeItem);
// Now do removing and adding
this.myCarousel.scrollToCard(this.myCarousel.items.items[curIndex]);
You have to use the index as the item will be removed.
id should only be used for debugging. There are better ways to resolve a component than use id that can get you into trouble.