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!');
}
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 have a button at the top right of every page that I want to link to a certain page within my application. Is there a way to give each instance of this button the same behaviour? and if so where would the code sit so that it affects every page? Many thanks in advance.
View:
items: [
{
title: '<span class="logo"></span>',
xtype: 'titlebar',
docked: 'top',
items: [
{
xtype: 'button',
align: 'right',
iconAlign: 'right',
id: 'buytickets',
text: 'Buy Tickets'
}
]
}
]
Controller (specific to one page):
config: {
refs: {
main: 'ListNav'
},
control: {
"button#buytickets": {
tap: 'buytickets'
}
}
},
buytickets: function(button, e, eOpts) {
this.getMain().push({
xtype: 'buyticketspanel'
});
},
You could just put the button at the top of your Viewport, in the app.js file:
Ext.application({
name: 'MyApp',
requires: [],
views: [/*Views*/],
controllers: [/*Controllers*/],
viewport: {
layout: 'vbox'
},
launch: function() {
var me = this;
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add([
{
title: '<span class="logo"/>',
xtype: 'titlebar',
docked: 'top',
items: [
{
xtype: 'button',
align: 'right',
iconAlign: 'right',
id: 'buytickets',
text: 'Buy Tickets',
handler: me.doBuyTickets
}
]
},
Ext.create('MyApp.view.Main', {flex: 1})
]);
},
doBuyTickets: function() {
//do stuff
}
});
****EDIT****:
However, you won't be able to re-purpose that bar as the title bar for a NestedView. If you need to have that, then you might be best served with a utils file that has a method to add a button to a toolbar, and just reuse that in the init function of any NestedView components.
Utils.js:
Ext.define("MyApp.util.Utils", {
singleton: true,
addBuyButton: function(toolbar)
{
toolbar.add({
text: 'Buy Tickets',
align: 'right',
handler: function() {
//do stuff
}
});
}
});
Controller:
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
refs: {
nestedList: 'nestedlist'
},
control: {
app-page: {
initialize: 'initAppPage'
}
}
},
initAppPage: function()
{
MyApp.utils.addBuyButton(this.getNestedList().getNavigationBar());
}
});
I currently have a list that is coming through a store fine, and the itemTpl is putting a div inside each list item with a specific ID. What I want to do know is use a controller to execute different functions on each specific list item when it is tapped. I have a controller set up but it doesn't seem to be referencing it.
Any help would be great
View:
Ext.define('tourApp.view.TourInfo', {
extend: 'Ext.List',
xtype: 'TourInfo',
config: {
navigationBar: {
hidden: true
},
title: 'Tour Info',
iconCls: 'MyTourInfoIcon nav-schedule',
items: [
{
docked: 'top',
xtype: 'toolbar',
title: '<span class="logo"></span>'
},
{
xtype: 'list',
store: 'TourInfoList',
id: 'lolol',
itemTpl: '<div id="TIList{id}" class="TIList"><div class="TIListTitle">{title}</div></div>'
}
]
}
});
Controller:
Ext.define('tourApp.controller.TourInfo', {
extend: 'Ext.app.Controller',
config: {
refs: {
Tdetails: 'TourInfo',
main: 'TourInfo'
},
control: {
"TourInfo list #TIList1": {
tap: 'test'
}
}
},
test: function() {
console.log('Success');
}
});
Use the select event for this..
control: {
'TourInfo list': {
select: function(list, record, eOpts) { console.log('test'); }
}
}
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.
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.