PDA

View Full Version : What happen? I couldn't align on title.



jsveron23
21 Nov 2011, 10:38 PM
2947229473

like that. title didnt place to center bcoz buttons... sorry for my bad english.

r_honey
22 Nov 2011, 1:03 AM
Hi if you want precise management of title positioning, then I would suggest not using the title configuration but use an item of type title in your toolbar items, e.g.



{
xtype: 'toolbar',
items: [
{
xtype: 'button',
iconCls: 'refresh'
iconMask: true
},
{
xtype: 'spacer'
width: 50,
},
{
xtype: 'title',
html: 'ABCD'
},
{
xtype: 'spacer'
},
{
xtype: 'button',
iconCls: 'add',
iconMask: true
}
]
}


This way you can control title positioning much more accurately.

jsveron23
22 Nov 2011, 5:50 AM
Hi if you want precise management of title positioning, then I would suggest not using the title configuration but use an item of type title in your toolbar items, e.g.



{
xtype: 'toolbar',
items: [
{
xtype: 'button',
iconCls: 'refresh'
iconMask: true
},
{
xtype: 'spacer'
width: 50,
},
{
xtype: 'title',
html: 'ABCD'
},
{
xtype: 'spacer'
},
{
xtype: 'button',
iconCls: 'add',
iconMask: true
}
]
}


This way you can control title positioning much more accurately.

ah~ thx a lot!

rdougan
22 Nov 2011, 10:30 AM
We actually made a component which does exactly what you want.

http://docs.sencha.com/touch/2-0/#!/api/Ext.NavigationBar

r_honey
22 Nov 2011, 1:59 PM
We actually made a component which does exactly what you want.

http://docs.sencha.com/touch/2-0/#!/api/Ext.NavigationBar

Well how would you distinguish between a Toolbar and a NavigationBar Robert?

rdougan
22 Nov 2011, 4:19 PM
The title configuration is always centered, no mater what other content you have in there. you can also give items of a NavigationBar an 'align' configuration of left/right which will dock them to the left/right.

r_honey
22 Nov 2011, 10:38 PM
The title configuration is always centered, no mater what other content you have in there. you can also give items of a NavigationBar an 'align' configuration of left/right which will dock them to the left/right.
Thanks, I wonder did we really needed a component when the same was easily achievable with items. Moreover, the Toolbar title configuration can be enhanced to accept a string or an object. For string, it would be centrally aligned like we have today and for object, well whatever the object says.

dotBomb
9 Feb 2012, 10:01 AM
Hi,

Wondering if Navigationbar is off-limits? I noticed it is a private member of Navigationview and the link posted above is dead.

Dan

rdougan
11 Feb 2012, 12:26 PM
This 'navigation bar' was renamed to 'TitleBar'. You can view it in the documentation here: http://docs.sencha.com/touch/2-0/#!/api/Ext.TitleBar

dimitri.fedorov
12 Feb 2012, 12:45 AM
It seems now its broken other way around - I can't align title to the right or to the left. Tried on NestedList and Panel components - no luck.

Because of some reason title is always placed in x-centered div, making any alignment other than center impossible.

Can someone provide a working example of toolbar with title aligned to, let's say, to the left?

p.s. Okay, figured that out. I have to create Title manually, like this:


items:[
{
xtype: 'toolbar', docked: 'top',
items: [
{ xtype: 'title', title: 'My title' }
]
}]

Any attempt to specify 'title' variable outside of 'title' xtype will force automatic title creation, and its alignment to the center. This approach will work on Panel, but with NestedList it will cause creation of two titles simultaneously. Thus, if its possible to align title in NestedList is still unclear.

rdougan
12 Feb 2012, 10:32 AM
That functionality isn't available in NestedList right now, but you could get it to work doing an override like this:


Ext.define('Ext.overrides.nestedlist.TitleAlignment', {
overrides: 'Ext.dataview.NestedList',

updateToolbar: function(newToolbar, oldToolbar) {
var me = this;
if (newToolbar) {
// create a new title component and add it to the toolbar
me.titleComponent = newToolbar.add({
xtype: 'title',
title: me.getTitle()
});

if (!newToolbar.getParent()) {
me.add(newToolbar);
}
}
else if (oldToolbar) {
oldToolbar.destroy();
}
},

updateTitle: function(newTitle) {
var me = this,
toolbar = me.getToolbar();

if (toolbar) {
if (me.getUpdateTitleText()) {
// Update the title component title instead of the toolbar title
me.titleComponent.setTitle(newTitle);
}
}
}
});

Notice in updateToolbar I'm adding a titleComponent into the new toolbar and save a reference to it. See I'm giving it an xtype just like you did above, and then give it the current title of the nested list.

Then in updateTitle, instead of updating the title of the toobar component, we update the title of the titleComponent we just created.

Ideally you shouldn't use this override though, you should extend NestedList for your custom view, and then override those methods in that class. But either way should work.

Hopefully this makes sense for you. Let me know if you have any issues. :)