i follow this tutorial to learn sencha touch 2. in chapter 3 when i want to active second view, it's undefined:
var newPage = this.getNewPageContainer();
Ext.Viewport.animateActiveItem(newPage, this.slideRightTransition); // noting happend.
console.log(this.getNewChallangeContainer()); // print "undefined"
i also set it on config, refs:
refs: {
// We're going to lookup our views by xtype.
pagecontainer: "pagecontainer",
newPageContainer: "newpagecontainer"
}
Thanks :)
Related
I am new to sencha and would like to have the indexBar option to a listview which is launched by the selectfield. Tried with
defaultTabletPickerConfig:
{
listeners:
{
painted: function(panel)
{
var list = panel.down('list');
list.setIndexBar(true);
}
}
}
But this code doesn't work, please help.
If you new to sencha please do not use defaultTabletPickerConfig setting.
Please describe more what you want to get, share more code you have written.
I'd like to be able to hide and show certain buttons in a navigation view bar when a view is push and popped onto the view stack. Shame I can't control that from the view config itself (but I'll save that moan for another time).
I wanted to know which events I should be using when a view is push/popped on a navigation view. The docs sometimes lie and I've been told many times not too trust it, so I'm not! Come on Sencha, Microsoft wouldn't get away with this!
So Any ideas? When I try to print out all the events for a view I get very unreliable behaviour:
What I've found:
When I push a view I get:
initialize
hide
show
When I pop a view I get:
hide
show
What the flip is going on?!?
The code to show events happening:
control: {
myViewRef: {
initialize: function() { console.log("initialize") },
activated: function() { console.log("activated") },
deactivated: function() { console.log("deactivated") },
painted: function() { console.log("painted") },
show: function() { console.log("show") },
hide: function() { console.log("hide") }
},
}
The code to actually push/pop a view:
onInBoxListViewItemTap: function(scope, index, item, record) {
console.log("onInBoxListViewItemTap");
var detailsView = this.getEnquiryDetailsViewRef();
// push view
var navview = this.getMyInboxViewRef();
navview.push(detailsView);
}
Does this stuff actually work properly i.e. Are there concrete events which are guaranteed to fire when a view is pushed and popped?
First of all - you have a typo in your code. You need to reference activate and deactivate not activate_d and deactivate_d.
Second, I would try to subscribe to push and pop events of navigation view and see if it would get you what you want.
I have the same problem.I use painted handler to solve it.
You can't handle 'painted' event in controller
the painted event description
I've seen this code in the Sencha Touch documentation. If autoCreate was set false what would happen to the infopanel view? Not sure I understand why autoCreate has to be specified. Could it not do this behind the scenes anyway if the object type ref is used instead of the simple type?
refs: {
main: '#mainTabPanel',
loginButton: '#loginWindow button[action=login]',
infoPanel: {
selector: 'infopanel',
xtype: 'infopanel',
autoCreate: true
}
}
I just replaced a few lines of code in one of my project to use autoCreate.
This is what I used to do :
refs: {
detailsView: 'detailsview'
},
...
var view = (!this.getDetailsView()) ? Ext.create('App.view.DetailsView') : this.getDetailsView();
nav.push(view);
I used to check if the view was created by calling the getter this.getDetailsView(). If it was not created, I created it, otherwise I just used the reference to it.
Now, I'm using autoCreate and this is what I do :
refs: {
detailsView: {
selector: 'detailsview',
xtype: 'detailsview',
autoCreate: true
}
},
...
var view = this.getDetailsView()
nav.push(view);
Calling the getter this.getDetailsView() will either use the reference to the already created component or create it.
Hope this helps
In Sencha Touch 2, I have a formpanel with a selectfield to pick from a large store of models. I can choose between an Ext.Picker or an Ext.List as the picker component by setting the usePicker property on the selectfield. But how do I configure the Ext.List?
I tried setting defaultPhonePickerConfig and defaultTabletPickerConfig, but that doesn't seem to work. Specifically, I want to set { grouped: true, indexBar: true } to help my users navigate the long list of options. I used the JavaScript debugger to trace the showPicker() method and verified that the instantiated Ext.List has those two properties set in its config property. But the list overlay still doesn't show the group headings or the index bar. Any idea what I could be doing wrong?
The solution is to defer configuration until after the panel component is painted:
usePicker: false,
defaultTabletPickerConfig: {
listeners: {
painted: function(panel) {
var list = panel.down('list');
list.setGrouped(true);
list.setIndexBar(true);
}
}
}
This is dumb.
I am designing an app in sencha touch2. I have a panel object in my JS file. I need to dynamically set the text/html for this component. The store for this component is defined at the application level. Following is the thing I worked out:
Ext.define('class_name',{
....
config : {
pnlObj : null,
...
}
initialize : function() {
this.config.pnlObj = Ext.create('Ext.Panel');
var store = Ext.data.Storemanager.lookup('some_store');
store.on('load',this.loadStore,this);
this.setItems([{
//some items here
{
flex : 2,
// id : 'somepnl',
config : this.config.pnlObj
}
}]);
},
loadStore : function(store, rec) {
var text = rec.get('text');
var panel = this.config.pnlObj;
// var panel = Ext.getCmp('somepanl');
panel.setHtml(text);
}
});
When I inspect the inspect the element using Firebug console, I can find the panel added there. But I am not able to set the html dynamically. no html text is set there. I tried adding it using panel.add() & panel.setItems() method which doesn't work. If I give an id to that panel(somepanel here) and try to access it using Ext.getCmp('smpanel') then in that case it works fine. I have found that using Ext.getCmp() is not a good practice and want to avoid it as it might somewhere break my code in the future.
I guess the way I am instantiating the panel object is creating some issue. Can someone suggest the best way of doing it?
The recommended way to manipulate your components in Sencha Touch 2 is using controller, through refs and control configs. For example, your panel has a config like this: xtype:'myPanel', then in your controller:
refs: {
myPanel: 'myPanel'
}
control:{
myPanel: {
on_an_event: 'set_html_for_my_panel'
}
}
Lastly, define your function:
set_html_for_my_panel: function()
{
this.getMyPanel().setHtml('my_updated_html');
}
P/S: Behind the scene, Sencha Touch 2 uses Ext.ComponentQuery for refs in controllers