PDA

View Full Version : Issue with Layout



14 Sep 2009, 6:40 AM
Hi,

I am newbie, trying to create simple layout for home page.

this is my home.js

// application main entry point

Ext.onReady(function() {

var north = new Ext.Panel({
id:'north',
region:'north',
height:100,
html:'North',
border:false,
title:'North'

});


var center = new Ext.Panel({
id:'center',
region:'center',
height:100,
html:'Center',
border:false,
title:'Center'

});

var south = new Ext.Panel({
id:'south',
region:'south',
height:100,
html:'South',
border:false,
title:'South'

});

?
var viewPort = new Ext.Viewport({
layout:'border',
border:false,
items: [north, center, south]
});

});


this is my topToolbar.js

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

var prizeButton = new Ext.Toolbar.SplitButton({
text: 'Prize',
handler: onButtonClick,
tooltip: {text:'Manage Prize'},
iconCls: 'blank',
menu : {
items: [
{text: 'Get All Prize', iconCls: 'blank', handler: onItemClick},
{text: 'Create Prize', iconCls: 'blank', handler: onItemClick}
]
}
})

var toolbar = new Ext.Toolbar({
region: 'north',
height: 30,
items: [prizeButton]
});

function onButtonClick(btn){
alert(btn.text);

}

function onItemClick(item){
alert(item.text);
}

});

and this is my home.html

<html>

<head>

<link rel="stylesheet" type="text/css" href="/iwe/js/ext-3.0.0/resources/css/ext-all.css" />

<script type="text/javascript" src="/iwe/js/ext-3.0.0/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="/iwe/js/ext-3.0.0/ext-all.js"></script>

<script type="text/javascript" src="/iwe/js/ext-3.0.0/ext-all-debug.js"></script>
<script type="text/javascript" src="/iwe/js/iwe/home/home.js"></script>

</head>

<body>
<script type="text/javascript" src="/iwe/js/iwe/home/topToolbar.js"></script>
</body>
</html>


i have region:'north' in topToolbar but it is not working.

am i missing something

Thanks a lot
T

14 Sep 2009, 6:42 AM
first off, use CODE tags to wrap your code snippets in the future.

14 Sep 2009, 6:43 AM
try adding the toolbar as a tbar property of the NORTH panel. Remove the region param for the Toolbar. Likewise, remove height, unless you really want to control height.

14 Sep 2009, 7:06 AM
This did not work for me
here is the change i made

// modify topToolbar.js


var toolbar = new Ext.Toolbar({
items: [prizeButton]
});


// modify home.js


var north = new Ext.Panel({
id:'north',
region:'north',
height:100,
html:'North',
border:false,
title:'North',
tbar:toolbar
});


i have two other files prize.html


<html>
<head>
<link rel="stylesheet" type="text/css" href="/iwe/js/ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="/iwe/js/ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/iwe/js/ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="/iwe/js/ext-3.0.0/ext-all-debug.js"></script>
<script type="text/javascript" src="/iwe/js/iwe/home/home.js"></script>
</head>
<body>
<div id="adsense-center" class="adsense" style="margin:4px">
<script type="text/javascript" src="/prizes.js">
</script>
</div>
</body>
</html>


and prize.js



var store = new Ext.data.JsonStore({
root: 'prizes',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: ['id', 'description'],
proxy: new Ext.data.HttpProxy({
url: '/getPrizes'
})
});

var grid = new Ext.grid.GridPanel({
region:'center',
width:700,
height:500,
title:'Prizes',
store: store,
loadMask: true,
columns:[{id: 'id', header: "Id", dataIndex: 'id', align: 'right', sortable: true },
{id: 'description', header: "Description", dataIndex: 'description', sortable: true }],
scope: this
}
},
frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
title: 'Prizes',
iconCls: 'icon-grid'
});


when i click on menu inside toolbar i want this prize.html to be render inside center panel, so i assiged region: 'center' inside grid.

i think i might be missing some basic stuff

Thanks a lot for your help

14 Sep 2009, 7:10 AM
OK, is the toolbar reference actually in global space? Why not just move it to the Home.js file??

14 Sep 2009, 7:19 AM
That should not be a problem, i made that change and it works, Thanks

I am still having issue with : while click on a menu in toolbar, prize.html should be open in center panel!

14 Sep 2009, 7:24 AM
Prize.html? You're loading Ext JS twice on the same page?

14 Sep 2009, 7:31 AM
then how will i open some other page in center panel? when home page is loading, i have some static text in center panel. and when user click on a menu inside a topToolbar, i want to load prize.js or in other cases i want to display some jsp over in center panel, how would i be able to do that!