What is the proper way to change the back button text?
Ext.define('myapp.view.post.PostDetail', {
extend: 'Ext.Panel',
alias: 'widget.postdetailpage',
xtype: 'postdetailpage',
config: {
navigationBar: {
config: {
//change the back button text?
defaultBackButtonText: 'Go Back',
useTitleForBackButtonText: false
}
},
scrollable: 'vertical',
styleHtmlContent: true,
tpl: ['{content}'],
}
});
The backbutton text is set in the navigation view before displaying the detailed view.
Ext.define('mimo.view.PostPanel', {
extend: 'Ext.NavigationView',
xtype: 'postPanel',
requires: [
'mimo.view.post.PostList'
],
config: {
title: 'Blog',
iconCls: 'home',
// set the back button text here
defaultBackButtonText: 'Volver',
items:[{
title: 'Las entradas de blog',
xtype: 'postlist'
}]
}
});
</pre>
You are extending Ext.Panel. Ext.Panel does not accept the navigationBar configuration, you probably want to use Ext.navigation.View. Then on that view you can pass the defaultBackButtonText property. Otherwise if you want to customize the button further, inside of navigationBar object you want to specify a button object with button properties.
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'm trying to add a button (right aligned) on the toolbar of a nestedlist. Here is my code :
Ext.define('Test.view.NestedList', {
extend: 'Ext.Panel',
requires: ['Ext.dataview.NestedList'],
xtype: 'mynestedlist',
config: {
modal: true,
centered: true,
layout:'fit',
width:'80%',
height:'80%',
items: [{
xtype: 'nestedlist',
fullscreen: true,
title: 'Groceries',
displayField: 'text',
store: 'MyTreeStore',
initialize: function(){
console.log("Add the button on the toolbar");
this.getToolbar().add({xtype: 'spacer'});
this.getToolbar().add({xtype: 'button', iconCls: 'compose', ui: 'plain', action: ''});
}
}]
}
});
The button does not align to the right of the toolbar but appears to the left.
Does anyone have an idea to make this ?
Thank you
One thing you can do is try adding a titlebar to your nestedlist and then align the button right.
I'm usign Sencha Touch 2.1 so this code should work (link I used for inspiration):
defaultBackButtonText: null,
useTitleForBackButtonText: false,
backButton: {
// ui: 'toolbar-back',
// align : 'left',
iconCls: 'back',
iconMask: true
},
But I can still see icon and text as well.
Thanks a lot.
I use an empty string instead of null for defaultBackButtonText, and it removes the text (also using ST 2.1):
defaultBackButtonText: '',
EDIT: To clarify, this is an example of the full config for a nav view with a back button using an icon with no text:
Ext.define('MyApp.view.GroupNavView', {
extend: 'Ext.navigation.View',
xtype: 'groupnavview',
config: {
defaultBackButtonText: '',
navigationBar: {
backButton: {
iconCls:'arrow_left',
iconMask: true,
ui: 'dark',
cls: 'backButton'
}
},
items: [
{
xtype: 'mylist'
}
]
}
});
I think there is no "back" iconCls available in the default theme. Try using some other icon like "home". Also, you missed the navigationBar config. It should be like this:
defaultBackButtonText : null,
navigationBar: {
backButton : {
align : 'left',
iconCls: 'home',
iconMask: true,
ui : 'plain'
}
},
As I tested, I see only home icon there - nothing else.
I used this link to get started with Sencha: http://www.sencha.com/learn/getting-started-with-sencha-touch-2/
My Main.js is as follows:
Ext.define("epiduo_ped.view.Main",
{
extend: 'Ext.Carousel',
requires:
[
'Ext.TitleBar',
'Ext.Video'
],
config:
{
tabBarPosition: 'bottom',
items:
[
{
xtype: 'homepanel'
},
{
xtype: 'page1panel'
}
]
}
});
I modified my pages to extend Ext.Carousel instead of Ext.Panel. This worked as far as allowing swiping, however, now I don't have a nav bar on the bottom with buttons to toggle between the pages, which makes sense because I'm not extending Ext.tab.panel anymore. Is there a built in way in Sencha to have both or is this custom where I have to add my own html to add a nav bar on the bottom? Either way I'm not sure how to do this.
In other words: I need a carousel with 3 pages so the user can swipe between them AND at the same time add the ability for the user to use buttons on the tabBar to toggle between the pages in the carousel.
Just keep your Ext.tab.Panel and add the carousel within :
Ext.define("epiduo_ped.view.Main",
{
extend: 'Ext.tab.Panel',
requires:
[
'Ext.TitleBar',
'Ext.Video'
],
config:
{
tabBarPosition: 'bottom',
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},{
title: 'Contact',
iconCls: 'user',
xtype:'carousel',
items: [{
html : 'Item 1',
},{
html : 'Item 2',
},{
html : 'Item 3'
}]
}]
}
});
Hope this helps.
Ok I wanted to post the answer for anyone else who was struggling with this task. Basically its a carousel with toolbar docked at the bottom:
http://www.sencha.com/forum/showthread.php?228733-Control-Carousel-with-Tabbar&s=3e485e109a9b06e351a1429469603273
You would just need to style your toolbar and icons with Sencha "theming"
http://docs.sencha.com/touch/2-0/#!/guide/theming
When I create a toolbar like below the title is misplaced to the right of the last button, any ideas how to fix it?
{
xtype: 'toolbar',
docked: 'top',
title: 'Chat',
items: [{
xtype: 'button',
text: 'Places',
ui: 'back',
id: 'backToPlaces'
},
{
xtype: 'spacer'
},
{
xtype: 'button',
text: 'People',
ui: 'forward',
id: 'toProfiles'
}
I was also fighting with the toolbar. Then I discovered the navigationbar.
The title is in the center. With a button aligned left and right. (see align property)
{
docked: 'top',
xtype: 'navigationbar',
title: 'Chat',
items: [
{
xtype: 'button',
ui: 'back',
action: 'back',
text:'BACK',
itemId: 'backButton'
},
{
xtype: 'button',
ui: 'decline',
action: 'cancel',
text:'Cancel',
itemId: 'cancelButton',
align : 'right'
}
]
}
just after answered this, i found the "centered" attribute and looked at creation of title element of sencha, so just forget this above and use in your config:
var myToolbar = new Ext.Toolbar({
docked : 'top',
title: {
title: 'my Title',
centered: true
},
items : []
});
In Sencha 2 there is no "special" title element, it is created as simple element in the "items". So i future, you can just add it at right place direcly by placing the config to your docked bar:
var myToolbar = new Ext.Toolbar({
docked : 'top',
items : [{
xtype: 'spacer',
},{
xtype: 'title',
title : 'Hello World'
},{
xtype: 'spacer',
}]
});
Only with spacer it is in the middle.
It is clearly stated in the docs that NavigationBar is a private class for internal use by the framework http://docs.sencha.com/touch/2-0/#!/api/Ext.navigation.Bar and the centered attribute metioned by anj does not work as expected (at least in the latest release).
According to this post http://www.sencha.com/forum/showthread.php?161082-PR3-Toolbar-title-position-broken-when-spacers-control-button-positioning&p=691928 it is simply a bug that the title is not centered and we should wait for next release. In the meantime you might use navigationbar if you need to.
If you want to leverage something similar to how titles in Toolbar behaves of Ext.navigation.Bar. see the Ext.TitleBar http://docs.sencha.com/touch/2-0/#!/api/Ext.TitleBar
This class handles things like long titles for you by automatically adding ellipses and the title is always centered horizontally.
There is no longer a NavigationBar component which is public. It is simply used internally by NavigationView. You should never use this.
Instead, you should use Ext.TitleBar. This allows you to center the title config and also use the align property on items (normally buttons) to align them to the left or right.
It also has built in support when the title is too long, or any items are too wide. It will automatically limit the length of all items to a certain width, and add ellipse to the title if needed.
Here is a simple example:
var titleBar = Ext.create('Ext.TitleBar', {
docked: 'top',
title: 'Navigation',
items: [
{
iconCls: 'add',
iconMask: true,
align: 'left'
},
{
iconCls: 'home',
iconMask: true,
align: 'right'
}
]
});
Ext.Viewport.add(titleBar);