PDA

View Full Version : Problem with editorgrids in tabpanel



davisty
12 Jan 2011, 5:32 AM
Hello,

New to extJS. Total newbie question. Im new to tabpanels and I have a form with three textfields and a tabpanel that includes three editorpanels. The textfields are used to position database(s).

Nothing is rendering. I have used formpanels and all such so I have a basic understanding. But somehow my formpanel isnt rendering. Im sure it's my definitions.

Can someone just take a cursory look, and see if Im totally out on a tangent ... The project is not fully defined yet, Just trying for now to get it rendered. Thank You in advance ...



/$top
Content-type: text/html
Expires: 0

<html>
<head>
<title>Maritime</title>

<link rel="stylesheet" type="text/css" href="/js/ext-all.css" />
<link rel="stylesheet" type="text/css" href="http://www.extjs.com/deploy/dev/examples/grid/grid-examples.css"/>
<link rel="stylesheet" type="text/css" href="http://www.extjs.com/deploy/dev/examples/shared/examples.css"/>
<link rel="stylesheet" type="text/css" href="http://www.extjs.com/deploy/dev/examples/ux/css/RowEditor.css"/>
<script type="text/javascript" src="/JS/ext-base-debug.js"></script>
<script type="text/javascript" src="/JS/ext-all-debug.js"></script>
<script type="text/javascript" src="/JS/RowEditor.js"></script>

<script type="text/javascript">

Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '/images/s.gif';
Ext.QuickTips.init();

// create the hdr data store
var StoreMH = new Ext.data.JsonStore({
url: 'EXTJSHDR.PGM',
autoLoad: false,
root: 'MDBHDR',
fields: [
'MHVESL',
'MHVOYG',
'MHBLNO',
'MHBKNG',
'MHSCOD',
'MHCCOD',
'MHNCOD',
'MHFCOD'
]
});
// StoreMH.load();

// create the com data store
var StoreMI = new Ext.data.JsonStore({
url: 'EXTJSCOM.PGM',
autoLoad: false,
root: 'MDBCOM',
fields: [
'MIVESL',
'MIVOYG',
'MIRTIT',
'MIBLNO',
'MICMDC',
'MINPKS',
'MITKWT',
'MITCBM',
'MITPWT',
'MITCBF'
]
});

// create the cnt data store
var StoreMC = new Ext.data.JsonStore({
url: 'EXTJSCNT.PGM',
autoLoad: false,
root: 'MDBCNT',
fields: [
'MCVESL',
'MCVOYG',
'MCRTIT',
'MCBLNO',
'MCCONT',
'MCSEAL',
'MCSIZE',
'MCTYPE',
'MCTCBF'
]
});

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update',
cancelText: 'Cancel'
});

// Column Model MDBHDR
var colsMH = [
{header: "Vess", dataIndex: 'MHVESL'},
{header: "Voyg", dataIndex: 'MHVOYG'},
{header: "BlNo", dataIndex: 'MHBLNO'},
{header: "Shipper", dataIndex: 'MHSCOD'},
{header: "Consign", dataIndex: 'MHCCOD'},
{header: "Notify", dataIndex: 'MHNCOD'},
{header: "Foward", dataIndex: 'MHFCOD'},
{header: "Booking", dataIndex: 'MHBKNG'}
];

// Column Model MDBCOM
var colsMI = [
{header: "Vess", dataIndex: 'MIVESL'},
{header: "Voyg", dataIndex: 'MIVOYG'},
{header: "BlNo", dataIndex: 'MIBLNO'},
{header: "Item", dataIndex: 'MIRTIT'},
{header: "Comm", dataIndex: 'MICMDC'},
{header: "#Pkgs", dataIndex: 'MINPKS'},
{header: "Kilos", dataIndex: 'MITKWT'},
{header: "Meters", dataIndex: 'MITCBM'},
{header: "Pounds", dataIndex: 'MITPWT'},
{header: "Feet", dataIndex: 'MITCBF'}
];

// Column Model MDBCNT
var colsMC = [
{header: "Vess", dataIndex: 'MCVESL'},
{header: "Voyg", dataIndex: 'MCVOYG'},
{header: "BlNo", dataIndex: 'MCBLNO'},
{header: "Item", dataIndex: 'MCRTIT'},
{header: "Cont", dataIndex: 'MCCONT'},
{header: "Seal", dataIndex: 'MCSEAL'},
{header: "Size", dataIndex: 'MCSIZE'},
{header: "Type", dataIndex: 'MCTYPE'},
{header: "Qty", dataIndex: 'MCQNTY'}
];

// declare the HDR source Grid
var gridMH = new Ext.grid.EditorGridPanel({
id : gridMH,
store : StoreMH,
columns : colsMH,
loadMask : true,
width : 250,
stripeRows : true,
plugins : [editor],
bodyStyle : 'padding: 10px; background-color: #DFE8F6',
selModel : new Ext.grid.RowSelectionModel({singleSelect : true})
});

// declare the COM source Grid
var gridMI = new Ext.grid.EditorGridPanel({
store : StoreMI,
columns : colsMI,
loadMask : true,
width : 250,
stripeRows : true,
plugins : [editor],
bodyStyle : 'padding: 10px; background-color: #DFE8F6',
selModel : new Ext.grid.RowSelectionModel({singleSelect : true})
});

// declare the CNT source Grid
var gridMC = new Ext.grid.EditorGridPanel({
store : StoreMC,
columns : colsMC,
loadMask : true,
width : 250,
stripeRows : true,
plugins : [editor],
bodyStyle : 'padding: 10px; background-color: #DFE8F6',
selModel : new Ext.grid.RowSelectionModel({singleSelect : true})
});

// Declare the text fields.
var scvesl = new Ext.form.TextField({
fieldLabel : 'Vesl:',
name : 'scvesl'
});

var scvoyg = new Ext.form.TextField({
fieldLabel : 'Voyg:',
name : 'scvoyg'
});

var scblno = new Ext.form.TextField({
fieldLabel : 'Blno:',
name : 'scblno'
});

// Setup the form panel
var formPanel = new Ext.form.FormPanel({
region : 'center',
renderTo : 'panel',
title : 'Bill Of Ladings',
bodyStyle : 'padding: 10px; background-color: #DFE8F6',
labelWidth : 50,
width : 150,
items : [{
xtype : 'form',
border : false,
items : [{
scvesl,
scvoyg,
scblno
}]
},{
xtype : 'tabpanel',
activeTab: 0,
plain : true,
deferredRender: false,
items:[{
title: 'Headers',
xtype: 'editorgrid',
items: [editorMH]
},{
title: 'Commodities',
xtype: 'editorgrid',
items: [editorMI]
},{
title: 'Containers',
xtype: 'editorgrid',
items: [editorMC]
}]

}];
}];
});
</script>
</head>
<body>
<div id="panel"></div>
<h3>MariTime</h3>
<input type="hidden" name="VESSF" value="/%VESSF%/">
<input type="hidden" name="VESSL" value="/%VESSL%/">
<input type="hidden" name="VOYGF" value="/%VOYGF%/">
<input type="hidden" name="VOYGL" value="/%VOYGL%/">
<input type="hidden" name="BLNOF" value="/%BLNOF%/">
<input type="hidden" name="BLNOL" value="/%BLNOL%/">
</body>
</html>