Extjs Ext Js面板对齐问题

Extjs Ext Js面板对齐问题,extjs,Extjs,这是我的外部面板和外部窗口 这是编辑器网格面板 voiceListingEditorGrid = new Ext.grid.EditorGridPanel({ id: 'voiceListingEditorGrid', store: voiceDataStore, cm: voiceColumnModel, enableColLock:false, resize: false, autoload: true, clicksToEdit:2, sm: co

这是我的外部面板和外部窗口 这是编辑器网格面板

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'
  }]
});
这是分机窗口

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'
    }               
]
);
voiceColumnModel=新的Ext.grid.ColumnModel(
[
/*{
标题:“ID”,
dataIndex:'队列\u id'
},*/
colSM,
{
标题:“站点名称”,
dataIndex:'站点名称',
宽度:330,
编辑器:新建Ext.form.TextField({
allowBlank:false,
最大长度:20,
正则表达式:/[a-zA-Z0-9]+/
})
},{
标题:“站点编号”,
dataIndex:'队列\u代码',
宽度:310,
编辑器:新建Ext.form.TextField({
allowBlank:false,
最大长度:20,
maskRe:/([0-9\s]+)$/,
正则表达式:/[0-9]/
})
},{
标题:“添加呼叫队列”,
对齐:'居中',
宽度:124,
可排序:false,
//呈现程序:函数(val){返回“”;},
呈现程序:函数(val){返回“”;},
dataIndex:“用户\u 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>&nbsp;&nbsp;&nbsp;Add Voice Site</span></li>
                        <li><img src="images/enable.png"/><span>&nbsp;&nbsp;&nbsp;Enable</span></li>
                        <li><img src="images/disable.png"/><span>&nbsp;&nbsp;&nbsp;Disable</span></li>  
                    </ul>
                </div>

                <div id="ldiv">
                    <ul>
                        <li><img src="images/add.gif"/><span>&nbsp;&nbsp;&nbsp;Add</span></li>
                        <li><img src="images/delete.gif"/><span>&nbsp;&nbsp;&nbsp;Delete</span></li>
                        <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Double click to Edit</span></li>
                    </ul>
                </div>
            </div>  
        </div>
    </div>  
    </body>
    </html>

VCC
函数goBack(){
//历史。返回();
window.location=”http://didyouwonder.com/vcc/users.php";
}
帐户名:
  • 添加语音站点
  • 使能
  • 禁用
  • 删除
  • 双击进行编辑
请参阅所附图片,然后阅读下面的说明

页面加载时页面布局良好

这就是firebug窗口打开并刷新页面时发生的情况。

加载页面时,网格显示正常。问题是,当我打开firebug窗口并刷新页面时,网格会转到顶部,当我在Mac上打开页面时也会发生同样的事情。我不知道如何处理这个问题,因为这是我第一次使用Ext


请提出建议。

好的,我已经解决了这个问题。。。这是一个符合我目的的计划。这里有一个使用这个插件的例子。仔细阅读文档,然后阅读示例

但一开始它对我不起作用,原因是ext窗口容器,它正在渲染网格面板。所以我从代码中删除了这个

voiceListingWindow = new Ext.Window({ ...
现在,栅格面板将根据栅格面板的此属性进行渲染

... renderTo: 'reportTabContent' // render the grid to the specified div in the page

没有错误,但不是完整的代码。请提供完整的代码…我认为问题在于渲染。在哪里渲染此窗口?也许你有一些绝对坐标…它是在PHP文件中呈现的。我已经更新了代码,请看一下。谢谢