Hello,
If you are using Sencha touch 2 beta 3, you might have encounter this issue. If you have a view that you pushing in navigation view you can set title there. This title will be used as a title of navigation bar when this view is activated. See the following code.
config: {
autoDestroy: false,
title: 'Bill'
}
What if you have requirement of setting this dynamically. For example you have a list from which you selected a category.
-Category 1
-Category 2
-Category 3
Based on selected record you will load sub category in next view and you want to display Category 1 as a title in next screen. To load next view you will create it first and push it.
if (!this.menuSubCategory) {
this. menuSubCategory = Ext.create('Application.view.SubCategory');
}
this.getMain().push(this. menuSubCategory);
Here you can set title if you want when you are first creating item. After that you can set it as you already have view. Either you can destroy view every time and create new one else you apply following trick.
This is how next view is loaded. Now if you have set title in config of above view. It will be applied by default. So to dynamically set it you need to do some tweak. First you need to override a base function. See the following code.
Ext.override(Ext.navigation.Bar, {
getNavigationBarProxyProperties: function () {
return {
title: {
left: this.proxy.titleComponent.renderElement.getLeft()
},
backButton: {
left: this.proxy.backButton.renderElement.getLeft(),
width: this.proxy.backButton.renderElement.getWidth()
}
};
}
});
Create an overrides file and add it after sencha touch js file. This is necessary else title width will be less compared to title
Now add the following code after you pushed your view to navigation view.
this.getMain().query('#navBar')[0].titleComponent.setWidth(100);
this.getMain().query('#navBar')[0].titleComponent.setTitle('categoryName');
That's it and you have dynamic title in navigation view. Please note this trick you need to apply if you are using Sencha touch 2 beta 3 version.
If you are using Sencha touch 2 beta 3, you might have encounter this issue. If you have a view that you pushing in navigation view you can set title there. This title will be used as a title of navigation bar when this view is activated. See the following code.
config: {
autoDestroy: false,
title: 'Bill'
}
What if you have requirement of setting this dynamically. For example you have a list from which you selected a category.
-Category 1
-Category 2
-Category 3
Based on selected record you will load sub category in next view and you want to display Category 1 as a title in next screen. To load next view you will create it first and push it.
if (!this.menuSubCategory) {
this. menuSubCategory = Ext.create('Application.view.SubCategory');
}
this.getMain().push(this. menuSubCategory);
Here you can set title if you want when you are first creating item. After that you can set it as you already have view. Either you can destroy view every time and create new one else you apply following trick.
This is how next view is loaded. Now if you have set title in config of above view. It will be applied by default. So to dynamically set it you need to do some tweak. First you need to override a base function. See the following code.
Ext.override(Ext.navigation.Bar, {
getNavigationBarProxyProperties: function () {
return {
title: {
left: this.proxy.titleComponent.renderElement.getLeft()
},
backButton: {
left: this.proxy.backButton.renderElement.getLeft(),
width: this.proxy.backButton.renderElement.getWidth()
}
};
}
});
Create an overrides file and add it after sencha touch js file. This is necessary else title width will be less compared to title
Now add the following code after you pushed your view to navigation view.
this.getMain().query('#navBar')[0].titleComponent.setWidth(100);
this.getMain().query('#navBar')[0].titleComponent.setTitle('categoryName');
That's it and you have dynamic title in navigation view. Please note this trick you need to apply if you are using Sencha touch 2 beta 3 version.
Thanks for this information.
ReplyDeleteI've adapted the code to not require the override:
var bar = this.getMain().getNavigationBar();
if (bar.titleComponent.element) bar.titleComponent.element.setWidth('auto');
bar.titleComponent.setTitle(title);
bar.refreshProxy();
seems to be a nice technique.
DeleteThe first time that apply, the title is small width, can i help me please?
ReplyDeletethis.getMain().query('#navBar')[0].titleComponent.setWidth(100); You can set big number here for more width.
ReplyDeleteThank you!
ReplyDeleteI just wrote my own 'setTitle'-Function:
Ext.define('myApp.view.NavView', {
extend: 'Ext.NavigationView',
alias: 'widget.navview',
id: 'navview',
setTitle: function(title) {
var bar = this.getNavigationBar();
if (bar.titleComponent.element) bar.titleComponent.element.setWidth('auto');
bar.titleComponent.setTitle(title);
bar.refreshProxy();
},
......
Now you can call setTitle on your NavigationBar-Instance.
thanks for your code,i found a better way in sencha touch 2.2.1
DeleteExt.NavigationView.getNavigationBar() will return a object of Ext.ToolBar,which has a function setTitle()
so,my code is:
setTitle: function(title) {
var bar = this.getNavigationBar();
bar.setTitle(title);
}
in fact if you are in a Ext.navigation.View class, you can directly call:
Deletethis.getNavigationBar().setTitle("My title");
Hiren, after overriding getNavigationBarProxyProperties, the back button is only tapped when I tap the left half of the button. I can change the returned title.left to a greater number, but it causes the title to be shifted to the right. Any idea how to fix it? thanks
ReplyDeleteThanks
ReplyDeletethank's for this code. but i don't understand what does mean menuSubCategory
ReplyDelete