这是我的Ext Panel和Ext Window 这是编辑器网格面板
voiceListingEditorGrid = new Ext.grid.EditorGridPanel({
id: 'voiceListingEditorGrid',
store: voiceDataStore,
cm: voiceColumnModel,
enableColLock:false,
resize: false,
autoload: true,
clicksToEdit:2,
sm: colSM,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
tbar: [
{
text: 'Add a site',
tooltip: 'Add a new site',
iconCls:'add',
handler: displayFormWindow
}, '-', {
text: 'Delete selection',
tooltip: 'Select a record from table and delete',
handler: confirmDeleteSite, // Confirm before deleting
iconCls:'remove'
}]
});
这是Ext.Window
voiceListingWindow = new Ext.Window({
id: 'voiceListingWindow',
title: 'Sites',
draggable : false,
resizable: false,
closable: false,
width:805,
height:500,
plain:true,
layout: 'fit',
items: voiceListingEditorGrid
});
数据存储
voiceDataStore = new Ext.data.Store({
id: 'voiceDataStore',
proxy: new Ext.data.HttpProxy({
url: 'database.php',
method: 'POST'
}),
// these parameters are passed for any HTTP request
baseParams:{
task: "VOICELISTING",
user_id : user_id_param
},
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'queue_code', type: 'string', mapping: 'queue_code'},
{name: 'site_name', type: 'string', mapping: 'site_name'} ,
{name: 'queue_id', type: 'int' , mapping: 'queue_id'}
]),
sortInfo:{field: 'queue_id', direction: "ASC"}
});
模特
voiceColumnModel = new Ext.grid.ColumnModel(
[
/*{
header: 'ID',
dataIndex: 'queue_id'
},*/
colSM,
{
header: 'Site Name',
dataIndex: 'site_name',
width:330,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
regex: /[a-zA-Z0-9]+/
})
},{
header: 'Site Number',
dataIndex: 'queue_code',
width:310,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([0-9\s]+)$/ ,
regex: /[0-9]/
})
},{
header: 'Add Call Queue',
align: 'center',
width: 124,
sortable: false,
//renderer: function(val){ return '<input type="button" onclick="redirect();" value="Add Call Queue" id="'+val+'"/>'; },
renderer: function(val){ return '<input type="image" alt="Add Call Queue" id="'+val+'" src="images/plus.png" name="Add Call Queue" onclick="redirect();" >' ; },
dataIndex: 'user_id'
}
]
);
这是PHP文件
<?php
session_start();
if(!isset($_SESSION['validuser'])){
header( "Location: http://localhost/vcc" );
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>VCC</title>
<link rel="stylesheet" type="text/css" href="customeStyle.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="voicesite.js"></script>
<script type="text/javascript" >
function goBack(){
//history.back();
window.location ="http://didyouwonder.com/vcc/users.php";
}
</script>
</head>
<body>
<div id="contianerVoice">
<div id="logoffbtn1">
<a href="logout.php" ><img src="images/signout.gif" alt="Logout" /></a>
</div>
<h1>Account Name: <?php echo $_GET['account_name']?></h1>
<div id="footerVoice">
<div id="left-footer">
<a href="#" onclick="goBack();" ><img src="images/back1.png" alt="Back" /></a>
</div>
<div id="right-footer">
<div id="rdiv">
<ul>
<li><img src="images/plus.png"/><span> Add Voice Site</span></li>
<li><img src="images/enable.png"/><span> Enable</span></li>
<li><img src="images/disable.png"/><span> Disable</span></li>
</ul>
</div>
<div id="ldiv">
<ul>
<li><img src="images/add.gif"/><span> Add</span></li>
<li><img src="images/delete.gif"/><span> Delete</span></li>
<li> Double click to Edit</span></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
请参阅附图，然后阅读以下说明
页面加载时页面布局很好 See this Image
当打开firebug窗口并刷新页面时会发生这种情况。 See this image
加载页面时网格显示为OK。问题是当我打开firebug窗口并刷新页面时，Grid会出现在顶部，当我在Mac上打开页面时会发生同样的事情。我不知道如何处理这个问题，因为这是我第一次使用Ext。
请提出建议。
