PDA

View Full Version : How do I add my grid to the viewport?



FanOfExt
15 Mar 2011, 4:07 PM
I'm new to extJs and Ive managed to layout my viewport according to what I'd like to see in terms of the UI.

I can't seem to add my grid to the viewport. I've tried a dozen methods from various examples on the internet. I've highlighted my attempts below in bold.

My code is below. Any help is appreciated.





<!-- Do NOT put any DOCTYPE here unless you want problems in IEs. -->
<html>

<!-- Each valid html page must have a head; let's create one. -->
<head>
<!-- The following line defines content type and utf-8 as character set. -->
<!-- If you want your application to work flawlessly with various local -->
<!-- characters, just make ALL strings, on the page, json and database utf-8. -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- Ext relies on its default css so include it here. -->
<!-- This must come BEFORE javascript includes! -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">

<!-- Include here your own css files if you have them. -->

<!-- First of javascript includes must be an adapter... -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>

<!-- ...then you need the Ext itself, either debug or production version. -->
<script type="text/javascript" src="ext/ext-all-debug.js"></script>

<!-- Include here your extended classes if you have some. -->

<!-- Include here you application javascript file if you have it. -->

<!-- Set a title for the page (id is not necessary). -->
<title id="page-title">App</title>

<!-- You can have onReady function here or in your application file. -->
<!-- If you have it in your application file delete the whole -->
<!-- following script tag as we must have only one onReady. -->
<script type="text/javascript">

Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';


function buildGrid() {

var arrayData = [
['Jay Garcia', 'MD'],
['Aaron Baker', 'VA'],
['Susan Smith', 'DC'],
['Mary Stein', 'DE'],
['Bryan Shanley', 'NJ'],
['Nyri Selgado', 'CA']
];

var store = new Ext.data.ArrayStore({
data : arrayData,
fields : ['fullName', 'state']
});

var cm = new Ext.grid.ColumnModel([ // 1
{
header : 'Full Name',
sortable : true,
dataIndex : 'fullName' // 2
},
{
header : 'State',
dataIndex : 'state'
}
]);

var gridView = new Ext.grid.GridView(); // 3
var selModel = new Ext.grid.RowSelectionModel({ // 4
singleSelect : true
});

var grid = new Ext.grid.GridPanel({ // 5
title : 'Our first grid',
//render: Ext.get('center-region'),
//renderTo : document.getElementById('main-panel'),
//render : 'gridArea',
//renderTo : Ext.getBody(),
autoHeight : true,
width : 250,
height : 300,
store : store, // 6
view : gridView, // 7
colModel : cm, // 8
selModel : selModel
});


//grid.render(gridArea);
//Ext.reg('gridArea', grid);

var gridPanel = Ext.get('gridArea');
gridPanel.add(grid);
gridPanel.doLayout();

}




// Main application entry point
Ext.onReady(function() {


var viewport = new Ext.Viewport({
renderTo: Ext.getBody(),
layout:'border',
items:[{
title:'Left Nav',
region:'west',
id:'leftArea',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'2 0 2 2',
cmargins:'2 0 2 2'
},{
region:'center',
id: 'mainArea',
margins:'2 2 2 0',
layout:'border',
defaults: {
collapsible: false,
split: false,
bodyStyle: 'padding:15px'
},

items:[{
title: 'Toolbar',
region:'north',
id:'toolbarArea',
margins: '0 0 0 0',
height: '20px',
collapsible: false,
html: '< ----- Toolbar area ----- >',
xtype: 'container'
},{
title: 'Main Grid',
region:'center',
id:'centerArea',
margins: '0 0 0 0',
collapsible: false,
xtype: 'container',
layout: 'border',
defaults: {
collapsible: false,
split: true,
bodyStyle: 'padding:15px'
},
items:[{
title: 'Main',
region:'center',
id:'gridArea',
cmargins: '0 0 0 0',
collapsible: false,
autoScroll:true,
xtype: 'panel'
},
{
title: 'Additional Information',
region: 'south',
id:'infoArea',
height: 300,
cmargins: '0 0 0 0',
collapsible: false,
autoScroll:true,
xtype: 'panel'
}]
}]

}]
});



//create grid
buildGrid();

});




</script>

<!-- Close the head -->
</head>

<!-- You can leave the body empty in many cases, or you write your content in it. -->
<body></body>

<!-- Close html tag at last -->
</html>

17 Mar 2011, 7:18 PM
I made some changes marked in black.



<!-- Do NOT put any DOCTYPE here unless you want problems in IEs. -->
<html>

<!-- Each valid html page must have a head; let's create one. -->
<head>
<!-- The following line defines content type and utf-8 as character set. -->
<!-- If you want your application to work flawlessly with various local -->
<!-- characters, just make ALL strings, on the page, json and database utf-8. -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- Ext relies on its default css so include it here. -->
<!-- This must come BEFORE javascript includes! -->
<link rel="stylesheet" type="text/css" href="lib/ext3/css/ext-all.css">

<!-- Include here your own css files if you have them. -->

<!-- First of javascript includes must be an adapter... -->
<script type="text/javascript" src="lib/ext3/js/ext-base.js"></script>

<!-- ...then you need the Ext itself, either debug or production version. -->
<script type="text/javascript" src="lib/ext3/js/ext-all-debug.js"></script>

<!-- Include here your extended classes if you have some. -->

<!-- Include here you application javascript file if you have it. -->

<!-- Set a title for the page (id is not necessary). -->
<title id="page-title">App</title>

<!-- You can have onReady function here or in your application file. -->
<!-- If you have it in your application file delete the whole -->
<!-- following script tag as we must have only one onReady. -->
<script type="text/javascript">

Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';


function buildGrid() {

var arrayData = [
['Jay Garcia', 'MD'],
['Aaron Baker', 'VA'],
['Susan Smith', 'DC'],
['Mary Stein', 'DE'],
['Bryan Shanley', 'NJ'],
['Nyri Selgado', 'CA']
];

var store = new Ext.data.ArrayStore({
data : arrayData,
fields : ['fullName', 'state']
});

var cm = new Ext.grid.ColumnModel([ // 1
{
header : 'Full Name',
sortable : true,
dataIndex : 'fullName' // 2
},
{
header : 'State',
dataIndex : 'state'
}
]);

var gridView = new Ext.grid.GridView(); // 3
var selModel = new Ext.grid.RowSelectionModel({ // 4
singleSelect : true
});

grid = new Ext.grid.GridPanel({ // 5
title : 'Our first grid',
//render: Ext.get('center-region'),
//renderTo : document.getElementById('main-panel'),
//render : 'gridArea',
//renderTo : Ext.getBody(),
autoHeight : true,
width : 250,
height : 300,
store : store, // 6
view : gridView, // 7
colModel : cm, // 8
selModel : selModel
});


//grid.render(gridArea);
//Ext.reg('gridArea', grid);

// var gridPanel = Ext.get('gridArea');
// gridPanel.add(grid);
// gridPanel.doLayout();

}




// Main application entry point
Ext.onReady(function() {
//create grid
buildGrid();

var viewport = new Ext.Viewport({
renderTo: Ext.getBody(),
layout:'border',
items:[{
title:'Left Nav',
region:'west',
id:'leftArea',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'2 0 2 2',
cmargins:'2 0 2 2'
},{
region:'center',
id: 'mainArea',
margins:'2 2 2 0',
layout:'border',
defaults: {
collapsible: false,
split: false,
bodyStyle: 'padding:15px'
},

items:[{
title: 'Toolbar',
region:'north',
id:'toolbarArea',
margins: '0 0 0 0',
height: '20px',
collapsible: false,
html: '< ----- Toolbar area ----- >',
xtype: 'container'
},{
title: 'Main Grid',
region:'center',
id:'centerArea',
margins: '0 0 0 0',
collapsible: false,
xtype: 'container',
layout: 'border',
defaults: {
collapsible: false,
split: true,
bodyStyle: 'padding:15px'
},
items:[{
title: 'Main',
region:'center',
id:'gridArea',
cmargins: '0 0 0 0',
collapsible: false,
autoScroll:true,
xtype: 'panel',
items: grid

},
{
title: 'Additional Information',
region: 'south',
id:'infoArea',
height: 300,
cmargins: '0 0 0 0',
collapsible: false,
autoScroll:true,
xtype: 'panel'
}]
}]

}]
});





});




</script>

<!-- Close the head -->
</head>

<!-- You can leave the body empty in many cases, or you write your content in it. -->
<body></body>

<!-- Close html tag at last -->
</html>