PDA

View Full Version : Adding an Image to a Panel in 3.4



mlawson85
6 Sep 2012, 9:40 PM
Hi, I am new to ExtJS as we are using it in my web development class.

I am trying to add an image to a panel at the top of my page and I am getting no where.

I have been searching these forums and trying the "fixes" listed but nothing is working.

Here is what I have so far. can anyone help?


Ext.onReady(function(){ Ext.QuickTips.init();



var topPanel = new Ext.Panel ({
region: 'north',
html: "<img src=messageconnection.gif>"
});

var leftPanel = new Ext.Panel ({
region: 'west',
html: 'Left Panel'
});

var typeStore = new Ext.data.SimpleStore({
fields: ['id', 'name'],
data: [['inbox', 'Inbox'], ['sent', 'Sent']]
});

var typeCombo = new Ext.form.ComboBox({
fieldLabel: 'Location',
store: typeStore,
mode: 'local',
valueField: 'id',
displayField: 'name',
editable: false,
width: 143,
triggerAction: "all"
});


var infoFieldSet = new Ext.form.FieldSet ({
title: 'Profile Information',
items: [typeCombo]
});

var topCenterPanel = new Ext.Panel ({
layout: 'form',
autoScroll: true,
hideBorders: true,
anchor: '100% 40%'
});

var bottomCenterPanel = new Ext.Panel ({
anchor: '100% 60%'
});

var receiveButton = new Ext.Button ({
text: 'Click Me!',
listeners:{
click: function(){

}
}
});

var newButton = new Ext.Button ({
text: 'New',
listeners:{
click: function(){

}
}
});

var replyButton = new Ext.Button ({
text: 'Reply',
listeners:{
click: function(){

}
}
});

var deleteButton = new Ext.Button ({
text: 'Delete',
listeners:{
click: function(){

}
}
});

var clickMeToolbar = new Ext.Toolbar ({
items: [[typeCombo],['->', '-', receiveButton, '-', newButton, '-', replyButton, '-', deleteButton, '-']]
});

var centerPanel = new Ext.Panel ({
layout: 'anchor',
title: 'Messaging',
region: 'center',
tbar: clickMeToolbar,
items: [topCenterPanel, bottomCenterPanel]
});


var userStore = new Ext.data.Store ({
autoLoad: false,
url: '../../../demo/inc/action.php?action=get-users',
reader: new Ext.data.JsonReader({
root: 'users',
id: 'id',
fields: ['id', 'fname', 'lname', 'type', 'active']
})
});

var tabPanel = new Ext.TabPanel ({
region: 'center',
activeTab: 0,
items: [centerPanel]
});

var mainViewport = new Ext.Viewport ({
layout: 'border',
items: [topPanel, tabPanel]
});
});




I am trying to add the image to the topPanel fyi.

evant
6 Sep 2012, 9:53 PM
1) Wrong forum, this is for 4.x. Moving.

2) Give the north panel a height.

3) Your markup for the image is invalid, though the browser will probably still parse it.

sword-it
6 Sep 2012, 11:06 PM
Hi,

you can give height to the toppanel which is in north region it will show the image