Ext

R.J · #1 11-05-2009, 05:29 AM

Dear All,

I am new to Extjs and want to create a grid panel into a tabpanel which is in center region of border layout.

Below is my code. can any give me the correct code to do the needful.
Thanks in Advance.

<html>
<head><style>
.milton-icon {
background: url(\lib\ext-3.0.0\resources\images\default\window\icon-warning.gif) no-repeat;
}
</style>
<title>Getting Started Example</title>
<link rel="stylesheet" type="text/css"
href="lib/ext-3.0.0/resources/css/ext-all.css" />
<script src="/lib/ext-3.0.0/adapter/ext/ext-base.js"></script>
<script src="/lib/ext-3.0.0/ext-all-debug.js"></script>
<script>

Ext.onReady(function(){

var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'north',
xtype: 'panel',
html: 'North',
frame:true
},{
region: 'west',
xtype: 'panel',
split: true,
width: 200,
html: 'West'
},{
region: 'center',
xtype: 'tabpanel',
activeTab: 1,
width:'auto',
items:[{xtype :'gridpanel',
title:'tab1'
},{
xtype:'panel',
items: [grid]
}]

},{
region: 'south',
xtype: 'panel',
html: 'South'
}]
});

});

var grid = new Ext.grid.GridPanel({
renderTo: document.body,
//frame:true,
title: 'Movie Database',
//height:800,
//width:500,
store: store,
columns: [
{header: 'Cover', dataIndex: 'coverthumb', renderer:cover_image},
{header: 'Title', dataIndex: 'title', renderer: title_tagline},
{header: "Director", dataIndex: 'director'},
{header: "Released", dataIndex: 'released',
renderer: Ext.util.Format.dateRenderer('m/d/Y')},
{header: "Genre", dataIndex: 'genre'},
{header: 'Tagline', dataIndex: 'tagline', hidden: true}
]

//----------
});
var store = new Ext.data.Store({
data: [
[
1,
"Office Space",
"Mike Judge",
"1999-02-19",
1,
"Work Sucks",
"19.95",
1
],[
3,
"Super Troopers",
"Jay Chandrasekhar",
"2002-02-15",
1,
"Altered State Police",
"14.95",
1
]
//...more rows of data removed for readability...//
]
,
reader: new Ext.data.ArrayReader({id:'id'}, [
'id',
'title',
'director',
{name: 'released', type: 'date', dateFormat: 'Y-m-d'},
'genre',
'tagline',
'price',
'available'
]

)
});

function cover_image(val){
return '<img src=\lib\ext-3.0.0\resources\images\default\window\icon-warning.gif/>';
}

function title_tagline(val, x, store){
return '<b>'+val+'</b><br>'+store.data.tagline;
}

</script>
</head>
<body>
<div id='my_id'
style='width:200px;height:200px;'>test</div>

</body>
</html>

Animal · #2 11-05-2009, 07:46 AM

Two things.

DO NOT wrap any grid inside a Panel to add it to a TabPanel. Just ADD it to the TabPanel.

Create "grid" before you attempt to do ANYTHING with it!

Animal · #3 11-05-2009, 07:46 AM

And format any code you post in [code]...[/code] tags!

Ext

Ext JS

Ext GWT

Ext Core

Support Subscriptions

Training

Community

Ext Solutions

Ext JS

Ext GWT

Help