PDA

View Full Version : items between tbar and title



kenny_mk
24 Jun 2010, 1:57 AM
Good Morning

can i create a Item between a panel tbar and the title of the tbar of this panel?

thanks for help greets Kenny

wm003
24 Jun 2010, 2:05 AM
What kind of item do you want? Have you considered bbar instead?

kenny_mk
24 Jun 2010, 2:10 AM
ich want load some header graphics
i think a seperate panel with html code is the target

no i don't but i test it now.

thanks for the tips @the dynamic menu it works ^^

greets Kenny

kenny_mk
24 Jun 2010, 2:15 AM
the bbar is nice ... but in the bottom of the panel that i can't use for this problem i think.

i want.... :

title of the panel

graphic

tbar menu

content

perhaps bbar...


i hope you understand me

greets kenny

wm003
24 Jun 2010, 2:19 AM
Try using an Ext.ViewPort having a north-region with your desired header-gfx and a center-region with your toolbar (as tbar then) and some content. Should work.

kenny_mk
24 Jun 2010, 3:07 AM
ok i try the ViewPort (it is a nice thing....) but it is wrong:

it's create :

gfx

title of the panel

tbar

content...


new idea?

greets kenny

wm003
24 Jun 2010, 3:30 AM
Same as before, just add


title: 'my beautiful title'

into the center-region config and you are done :)

kenny_mk
24 Jun 2010, 3:39 AM
so here is my code it dosen't work...
where is my fault?


var viewhead = new Ext.Viewport({

region:'north',
title: "TEST TEST TEST",
html :"TEST TEST TEST"
});

var panel_all = new Ext.Panel({
title: "Verbandsseite",

tbar: mytbar,
items: [
[
viewhead
],
[
login_form
],

[
content
],

[
news
]



],
renderTo: Ext.getBody()

});


greets Kenny

Condor
24 Jun 2010, 3:42 AM
Who says a tbar can only contain a toolbar? Why not a container with an image and a toolbar?

tbar: {
xtype: 'container',
layout: 'anchor',
autoHeight: true,
defaults: {anchor: '0'},
items: [{
xtype: 'box',
autoEl: {tag: 'img', src: 'header.gif'}
},{
xtype: 'toolbar',
items: [...]
}]
}

kenny_mk
24 Jun 2010, 4:32 AM
great it works :-)

thanks for the idea condor :-)

can i load a other Panel in this box ?

greets kenny

Animal
24 Jun 2010, 6:20 AM
You need a Panel which is layout: 'vbox'

Take this free kick-start and get going...



Ext.getBody().update('');
new Ext.Panel({
height: 200,
width: 400,
title: 'Title of Panel',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'box',
autoEl: {
style: {
'text-align': 'center'
},
cn: {
tag: 'img',
src: 'http://www.sencha.com/assets/images/logo-sencha-sm.png'
}
},
onRender: function(i) {
this.constructor.prototype.onRender.apply(this, arguments);
this.el.child('img').on({
load: function() {
i.ownerCt.doLayout();
}
});
}
}, {
border: false,
tbar: [{
text: 'Button'
}],
html: 'Content',
flex: 1
}],
renderTo: document.body
})

wm003
24 Jun 2010, 10:13 AM
Who says a tbar can only contain a toolbar? Why not a container with an image and a toolbar?


Excellent! Never tried that until now. Thanks :)

kenny_mk
25 Jun 2010, 12:17 AM
good morning

ok i read this last post... and i don't understand @animal
i want create a panel ... :
something like that :


var topheader=new Ext.Panel({
title: "ÜBERSCBRIEFT",
width: "100%",
html:"<h1>HEADER</h1>"

});


and this one i want to show in the box ...
in the top of my tbar ...

greets Kenny

Condor
25 Jun 2010, 12:51 AM
Animal meant:


{
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
title: 'ÜBERSCBRIEFT',
html: '<h1>HEADER</h1>'
},{
flex: 1,
tbar: [...],
...
}]
}

kenny_mk
25 Jun 2010, 1:21 AM
wow

i'm confused about this post...
i need a step by step instruction.

greets kenny

kenny_mk
29 Jun 2010, 1:33 AM
so this is my new and old construction site is here...

so i think i need a vbox in place of of my box
{xtype: 'box',autoEl: {tag: 'img', src: './img/kopf-slide1.jpg'}} ?

and how i create a vbox?

greets kenny

(i'm very happy to show you the hole projekt ^^ when it is done... )

Animal
29 Jun 2010, 1:39 AM
It's the layout of its owning Container which decides whether to arrange the boxes vertically or horizontally ('vbox' or 'hbox')

kenny_mk
29 Jun 2010, 3:05 AM
ok i think i undestand your post...

i think it works ^^
thanks for the greats tips :-)
greets kenny

p.s. here are my solution



{xtype: 'container',
layout: 'anchor',
autoHeight: true,
defaults: {
anchor: '0',
type:'hbox'
},
items:[
{ html : "<table><tr><td><img src='img/kopf-slide1.jpg' /></td></tr></table>"},

Animal
29 Jun 2010, 3:19 AM
OK, but that will create a Panel.

Basically {...} in the items array means a Panel. That's heavy, you should use xtype: 'box' as shown.

And why wrap in a single cell table?

PS. You should be strict about formatting your code to Ext standards with 4 space indents.

It is VERY important to be able to understand nesting structures when visually scanning code.

kenny_mk
29 Jun 2010, 3:38 AM
ok i make it so :


var panel_all = new Ext.Panel({
title :page_title,
bbar : [{
text:bbar_1
},{
text:bbar_2
}],
tbar: {
xtype: 'container',
layout: 'anchor',
autoHeight: true,
defaults: {
anchor: '0',
type:'hbox'
},
items:[
{
html : show_graphic()
},
{
xtype: 'toolbar',items:[{....
}
]
},
items: [
[
....
],
renderTo: Ext.getBody()
});



the 2nd question
i test it ... the header are two parts later...
the first one is fixed and the 2nd one change about some time like a slide... (have extjs some slide function ^^? )

can you read my code now?

sorry i try format my code better ^.-

Animal
29 Jun 2010, 3:44 AM
But I told you



{
html : show_graphic()
}


That's a Panel. A heavyweight class. Don't you see the buildup of Panel border lines everywhere when you indiscriminately use Panels?

No, that code format is not good, I pasted your code in above, and it's bad. Study Ext's code.

kenny_mk
29 Jun 2010, 3:58 AM
ok i look at the examples of extjs an format the code then ...

what is wrong to load the html code in this panel with some function?

what is the better way in your opinion?

greets Kenny

Animal
29 Jun 2010, 5:04 AM
Personally I don't use HTML at all.

kenny_mk
29 Jun 2010, 5:50 AM
ok,
but how can i create this panel (with slide on the one side) without html ? ?