I have a list:
Ext.define('my.view.ProgramList', {
extend: 'Ext.dataview.List',
xtype: 'programlist',
...
}
I would like this list to be the starting point for two navigation views:
Ext.define("my.view.ProgramNavigationView", {
extend: 'Ext.navigation.View',
xtype: 'programnavigationview',
...
items: [{
xtype: 'programlist',
itemId: 'programlist'
}]
}
Ext.define("my.view.FacebookNavigationView", {
extend: 'Ext.navigation.View',
xtype: 'facebooknavigationview',
...
items: [{
xtype: 'programlist',
itemId: 'programlist'
}]
}
Question: How do I handle tap events in the controller and deal with the two separately? In my controller I have:
refs: {
programlist: 'programlist',
facebooknavigationview: 'facebooknavigationview',
programnavigationview: 'programnavigationview', ...
},
I have tried this:
control: {
programlist: {
initialize: 'initProgramData'
},
facebooknavigationview: {
itemtap: 'showFacebookGroup'
},
programnavigationview: {
itemtap: 'showProgramData'
},
hoping the itemtap would bubble up and I can deal with differently in the facebooknavigationview vs. the programnavigationview, but it doesn't. I can put the itemtap in the programlist and it fires, but then I can't tell the difference between the two navigation views; I don't know if I can search the hierarchy, but that seems sort of... ugly. What am I missing?
You can add ref that use the parent to help differentiate where the taps are coming from for example if you have the following views:
Ext.define("my.view.ProgramNavigationView", {
extend: 'Ext.navigation.View',
xtype: 'programnavigationview',
...
items: [{
xtype: 'programlist',
itemId: 'programlist'
}]
}
Ext.define("my.view.FacebookNavigationView", {
extend: 'Ext.navigation.View',
xtype: 'facebooknavigationview',
...
items: [{
xtype: 'programlist',
itemId: 'programlist'
}]
}
you could use the following refs:
refs: {
programlist: 'programlist',
facebooknavigationview: 'facebooknavigationview programlist',
programnavigationview: 'programnavigationview programlist', ...
},
control: {
programlist: {
initialize: 'initProgramData'
},
facebooknavigationview: {
itemtap: 'showFacebookGroup'
},
programnavigationview: {
itemtap: 'showProgramData'
},
Now the item taps are listening when they are displayed inside of the parent views.
Related
[Sencha Touch 2.4.0]
I have a problem where .setHtml and .setValue function called against the refrences of labels and textfields are not doing anything ie the change is not showcasing in UI as desired but after the line of code is executed If I run .getHtml or .getValue in the console of the browser the change is visible in the output of the console but nothing changes in the UI.
My scenario in this Test Application is I have 3 labels [lbl1,lbl2 and lbl3] and 3 textfields [txt1,txt2 and txt3] I access the lbl1,lbl3,txt1,txt3 via their refrences in the controller. I desire to change the content of the lbl1 and txt1 if user clicks the button in the same panel. I have another form [initial view] with only button. what It does is opens the panel with 3 labels, 3 textfields and a button as I have described above but before pushing this Panel I want to set lbl3 and txt3. In all the cases .setValue and .setHtml is not updating the UI. Can anyone help me what am I doing wrong in here? I have also attached the sencha architecture project in zip.
MainViewr (initial view)
Ext.define('MyApp.view.mainView', {
extend: 'Ext.navigation.View',
requires: [
'Ext.form.Panel',
'Ext.Button'
],
config: {
itemId: 'mynavigationview',
items: [
{
xtype: 'formpanel',
items: [
{
xtype: 'button',
itemId: 'mybutton1',
text: 'MyButton1'
}
]
}
]
}
});
2nd Panel
Ext.define('MyApp.view.MyFormPanel1', {
extend: 'Ext.form.Panel',
alias: 'widget.myformpanel1',
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.field.Text',
'Ext.Label'
],
config: {
itemId: 'myformpanel1',
scrollable: true,
items: [
{
xtype: 'panel',
docked: 'top',
height: '100%',
scrollable: true,
items: [
{
xtype: 'button',
itemId: 'mybutton',
text: 'MyButton'
},
{
xtype: 'textfield',
itemId: 'txt3',
label: 'Field'
},
{
xtype: 'textfield',
id: 'txt2',
itemId: 'txt2',
label: 'Field',
name: 'txt2'
},
{
xtype: 'textfield',
itemId: 'txt1',
label: 'Field'
},
{
xtype: 'label',
html: 'Name 3',
itemId: 'lbl3'
},
{
xtype: 'label',
html: 'Name 2',
id: 'lbl2',
itemId: 'lbl2'
},
{
xtype: 'label',
html: 'Name1',
itemId: 'lbl1'
}
]
}
]
}
});
Controller for the 1st View. Here I want to change the content of the label and textfield (lbl3 and txt3 which is on the 2nd view via thier refs) but setValue and setHtml or even calling other functions against their refs like hide() or setHidden(true) does not show on the UI but if I do getValue(), getHtml, getHidden in the browser's console thier hidden property and content is changed but it is not reflected on UI.
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
refs: {
mainView: 'navigationview#mynavigationview',
lbl3: 'label#lbl3',
txt3: 'textfield#txt3',
myFormPanel1: 'formpanel#myformpanel1'
},
control: {
"button#mybutton1": {
tap: 'btnlogin_click'
}
}
},
btnlogin_click: function(button, e, eOpts) {
var myformpanel1 = Ext.create('widget.myformpanel1');
lbl3 = this.getLbl3();
txt3=this.getTxt3();
mainView = this.getMainView();
txt3.setValue('Hello');
lbl3.setHtml('Hello');
mainView.push({
xtype: "myformpanel1",
title: "Dashboard"
});
}
});
Controller for 2nd View. As you can see I have tried to change the content of lbl1,lbl2,txt1 and txt2 in the button click but the content of only lbl2 and txt2 are changing because I have accessed them via their ID and not via reference.
Ext.define('MyApp.controller.MyController1', {
extend: 'Ext.app.Controller',
config: {
refs: {
lbl1: 'label#lbl1',
txt1: 'textfield#txt1'
},
control: {
"button#mybutton": {
tap: 'setText_Click'
}
}
},
setText_Click: function(button, e, eOpts) {
lbl1 = this.getLbl1();
txt1 = this.getTxt1();
Ext.getCmp('txt2').setValue("Hello");
Ext.getCmp('lbl2').setHtml("Hello");
txt1.setValue("Hello");
lbl1.setHtml("Hello");
}
});
Is accessing controls via their IDs is the only way? because I have read somewhere that accessing the controls via ID is not very good thing to do in Sencha Touch. What am I doing wrong in here so that my code changes the content and properties of the controls internally but not reflected on UI as desired.
I checked your code and found out that this problem is causing because of the navigation view. I don't know the reason for this weird problem but changing the navigation view to Container solved the problem.
Main View :-
Ext.define('MyApp.view.MainView', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
'Ext.form.Panel',
'Ext.Button'
],
config: {
itemId: 'mynavigationview',
items: [
{
xtype: 'button',
itemId: 'mybutton1',
text: 'MyButton1'
}
]
}
});
Set the form view on btnlogin_click like this:-
Ext.Viewport.setActiveItem(myformpanel1);
I built a view and I want to do some manipulation of the elements, after the view has been painted.
I am trying to use the "painted" event with no avail.
Any ideas why?
Ext.define('TestApp.view.phone.RegisterViewPhone', {
extend: 'Ext.Panel',
xtype: 'RegisterViewPhone',
config: {
items: [
{
xtype: 'Header'
},{
xtype: 'panel',
itemId: 'thePanel',
html: 'THIS WILL HOLD THE VIEWS CONTENT'
},{
xtype: 'Footer'
}
],
listeners: [
{
delegate: '#thePanel',
event: 'painted',
fn: 'onPainted'
}
]
},
onPainted: function () {
alert('hey!');
}
});
You can attach listeners to that particular element like
{
xtype: 'panel',
itemId: 'thePanel',
html: 'THIS WILL HOLD THE VIEWS CONTENT',
listeners: {
painted: function(){
alert('hey!');
}
}
}
As painted is not dependent on individual element and it acts on page scope also U can write it in views directly
items: [
],
listeners: {
painted: function () {
alert('hey!');
}
I have a simple list populated from json. When tapping one of the items i want a new view to appear. The List is inside an Ext.navigation.View.
My controller
Ext.define('Trainz.controller.StationListController', {
extend: 'Ext.app.Controller',
config: {
models: [
'Station'
],
stores: [
'Stations'
],
views: [
'Main'
],
control: {
"list": {
itemtap: 'onListItemTap'
}
}
},
onListItemTap: function(dataview, index, target, record, e, eOpts) {
console.log(record);
}
});
And here is the (now empty) view i want to push
Ext.define('Trainz.view.StationDetailView', {
extend: 'Ext.Panel',
config: {
}
});
Guessing i have to put something in the onListItemTap function but for the life of me I cant figure out what. Tried over four different code snippets from Google and just got errors back. Whats the proper way?
I'm using Sencha Architect if that makes any difference.
Here is the complete initial view for reference:
Ext.define('Trainz.view.Main', {
extend: 'Ext.tab.Panel',
config: {
tabBar: {
docked: 'bottom'
},
items: [
{
xtype: 'navigationview',
title: 'Stations',
iconCls: 'maps',
items: [
{
xtype: 'list',
title: 'Stations',
itemTpl: [
'<div>{Namn}</div><div style="float:right; margin-right: 1.5em;"></div>'
],
store: 'Stations',
grouped: true,
indexBar: true
}
]
}
]
}
});
You need need to retrieve your navigationview and then do
navigationView.push(yourNewView);
or
dataview.up('navigationview').push(yourNewView)
http://docs.sencha.com/touch/2.2.0/#!/api/Ext.navigation.View-method-push
Hope this helps
In my application, I'm using a tab panel with 5 items in it. Each item holds around 6 panels added in card layout. When I'm at the last panel inside a tab item, I need to get back to the initial panel by clicking on the bottom tab panel (somewhat similar to a normal tab view controller in iOS). I have came across some solutions I found here, but it seems to work only when I switch between the tabs. In fact I want to listen to the click event on the same tab icon. How can I do this?
I have worked on your problem. I think this is exactly what you want. Hope this helps. If not so, please leave a comment.
1). View (MyTabPanel1.js)
Ext.define('MyApp.view.MyTabPanel1', {
extend: 'Ext.tab.Panel',
config: {
scrollable: 'vertical',
items:
[
{
xtype: 'panel',
id:'cardpanel1',
title: 'Tab1',
layout: 'card',
items: [
{
html: "First Item",
items:
[
{
xtype: 'button',
text: 'Forward',
handler: function() {
Ext.getCmp('cardpanel1').setActiveItem(1);
console.log('Going to Second Item');
}
}
]
},
{
html: "Second Item",
items:
[
{
xtype: 'button',
ui: 'confirm',
text: 'Go back',
handler: function() {
Ext.getCmp('cardpanel1').setActiveItem(0);
console.log('Going to First Item');
}
}
]
}
]
},
{
xtype: 'panel',
title: 'Tab2',
scrollable: true,
items: [
{
xtype: 'button',
margin: 10,
ui: 'action',
text: 'Tab2'
}
]
},
{
xtype: 'panel',
title: 'Tab3',
scrollable: true,
items: [
{
xtype: 'button',
margin: 10,
ui: 'action',
text: 'Tab3'
}
]
}
]
}
});
2). Controller (MainController.js)
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
config: {
control: {
"tabpanel #ext-tab-1":{ //ext-tab-1 is the id for the 1st tab generated by Sencha
tap: 'ontap'
}
}
},
ontap: function (){
console.log('inside controller');
Ext.getCmp('cardpanel1').setActiveItem(0);
}
});
I would give a much simpler solution
This is my view called Viewport which is a TabPanel:
Ext.define('Sencha.view.iphone.Viewport',{
extend: 'Ext.TabPanel',
xtype: 'newviewport',
alias: 'widget.newTabPanel',
Now in my controller file:
Ext.define('Sencha.controller.iphone.main', {
extend: 'Ext.app.Controller',
config:
{
refs: {
theMainTabPanelTabbarTab: 'newTabPanel > tabbar > tab', //this the tab of the tabpanel, if we listen to it that way we will know of tab panel tap.
},
control: {
theMainTabPanelTabbarTab:{
tap: 'onTapMainTabPanel'
}
}
This is a working code and works fine. Hopefully this will help you.
Is it possible to link to a tab.Panel view and have the second or third (not the first) tabItem be selected?
Currently i have a view that's linking to a tab.Panel that looks like this:
Ext.define("app.view.MyView", {
extend: 'Ext.tab.Panel',
xtype: 'myview',
alias: 'widget.myview',
requires: [
'Ext.TitleBar',
'dev.view.1',
'dev.view.2',
'dev.view.3',
'dev.view.4',
'dev.view.5',
],
config: {
tabBarPosition: 'bottom',
title: 'My Title',
ui: 'neutral',
items: [
{
xtype: 'xtype-of-view-1'
},
{
xtype: 'xtype-of-view-2'
},
{
xtype: 'xtype-of-view-3'
},
{
xtype: 'xtype-of-view-4'
},
{
xtype: 'xtype-of-view-5'
}
]
}
});
As of now when i load in the view, 'xtype-of-view-1' is set as the active tab.
But is it possible to load in the tab.Panel view but having one of the other tabs active and pressed?
Ext.define("app.view.MyView", {
extend: 'Ext.tab.Panel',
xtype: 'myview',
alias: 'widget.myview',
requires: [
'Ext.TitleBar',
'dev.view.1',
'dev.view.2',
'dev.view.3',
'dev.view.4',
'dev.view.5',
],
config: {
tabBarPosition: 'bottom',
title: 'My Title',
ui: 'neutral',
items: [
{
xtype: 'xtype-of-view-1'
},
{
xtype: 'xtype-of-view-2'
},
{
xtype: 'xtype-of-view-3'
},
{
xtype: 'xtype-of-view-4'
},
{
xtype: 'xtype-of-view-5'
}
]
},
initialize: function() {
var items = this.getItems(),
itemIdx,
Ext.each(items, function(item, idx) {
if (item.xtype == 'xtype-of-view-2') {
itemIdx = idx;
return false;
}
});
this.setActiveItem(itemIdx);
}
});
you could also watch the awesome video guide http://docs.sencha.com/touch/2-0/#!/video/tabs-toolbars
You have to add a controller to you app. in controller add a reference
refs: {
myview: 'myview',
list: 'anotherview list'
},
control : {
list: {
itemtap: 'onListItemTap'
}
},
onListItemTap: function (ct) {
var myview = this.getMyview();
myview.setActiveItem(1)
}
Please get read the sencha tutorial if you have no clue about MVC in sencha touch. Eg. http://docs.sencha.com/touch/2-0/#!/guide/controllers
you cand add bello config in to tab.panel
activeItem :2
for active third item insted of first