5
मेरे पास एक विंडो है जहां मैं शीर्ष पर एक टूलबार जोड़ना चाहता हूं, और शेष क्षेत्र में सामग्री लोड करने के लिए एक पैनल जोड़ना चाहता हूं। दुर्भाग्यवश, जब मैं सामग्री पैनल जोड़ता हूं तो टूलबार एक असमान आकार में फैलता है। मैंने आकार को हार्डकोड करने का प्रयास किया है, लेकिन ऐसा लगता है कि यह काम नहीं कर रहा है। मैं क्या गलत कर रहा हूं?ExtJS टूलबार सही ढंग से प्रतिपादन नहीं कर रहा है
प्रतिक्रिया के लिए अग्रिम धन्यवाद:
// Main application entry point
Ext.onReady(function() {
var loginWin;
var mainWin;
var content;
var form = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 70,
//url:'',
defaultType: 'textfield',
items: [{
fieldLabel: ' User Name',
name: 'username',
anchor:'100%' // anchor width by percentage
},{
inputType: 'password',
fieldLabel: ' Password',
name: 'password',
anchor: '100%' // anchor width by percentage
}]
});
content = new Ext.Panel({
baseCls: 'x-plain',
layout:'fit',
anchor:'90%',
height: 500,
items: [
{
title: 'blah',
html: '<div>hello</div>'
}
]
});
var tb = new Ext.Toolbar({
height: 100,
//renderTo: mainWin
});
tb.render('toolbar');
var toolbarPanel = new Ext.Panel({
layout:'fit',
anchor:'10%',
width:100,
items: tb
});
var menu = new Ext.menu.Menu({
id: 'mainMenu',
style: {
overflow: 'visible' // For the Combo popup
},
items: [
{ text: 'blah'
},
{ text: 'blah2'
}
]
});
tb.add(
{
text: 'Classes',
iconCls: 'bmenu',
handler: function(){ alert('blah'); }
},
{
text: 'GPA',
iconCls: 'bmenu',
handler: function(){ alert('blah'); }
},
{
text: 'Semester Schedule',
iconCls: 'bmenu',
handler: function(){
}
},
{
text: 'Help',
iconCls: 'bmenu', // <-- icon
handler: function(){ alert('blah'); }
}
);
tb.doLayout();
if(!mainWin){
mainWin = new Ext.Window({
applyTo:'main-win',
resizable: false,
modal: true,
layout:'fit',
width:'80%',
height:'100%',
y: 0,
closeAction:'hide',
plain: true,
items: [ toolbarPanel, content ]
});
}
if(!loginWin){
loginWin = new Ext.Window({
applyTo:'hello-win',
closable:false,
layout:'fit',
width:300,
height:130,
closeAction:'hide',
plain: true,
items: form,
buttons: [{
text:'Login',
handler: function(){
loginWin.hide();
mainWin.show();
}
},{
text: 'Close',
handler: function(){
loginWin.hide();
}
}]
});
loginWin.show(this);
}
})
एक आकर्षण की तरह काम किया, और स्पष्टीकरण के लिए धन्यवाद! – maximus