Ext JS的面板調整問題

這是我的分機面板和分機窗口這是編輯網格面板Ext JS的面板調整問題

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>&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>

請參閱附件圖片，然後閱讀下面

頁面佈局的解釋是罰款時，頁面加載 See this Image

這是當螢火蟲會發生什麼窗口打開並刷新頁面。 See this image

當頁面加載時，網格顯示正常。問題是，當我打開Firebug窗口並刷新頁面時，Grid打開頁面，當我在Mac上打開頁面時發生同樣的事情。我不知道如何處理這個問題，因爲這是我第一次與Ext合作。

請提出建議。

來源

2011-07-15 Ali

沒有一些錯誤，但它不是一個完整的代碼。請提供完整的代碼... – Zango

我認爲問題在渲染中。你在哪裏渲染這個窗口？也許你有一些Apsolute座標... – Zango

它呈現在一個PHP文件。我已經更新了代碼請看看。謝謝 – Ali

好的我已經解決了這個問題...這是一個pluign服務於我的目的。有一個使用此插件的例子是here。仔細閱讀文檔，然後閱讀示例。

但起初它並沒有爲我工作，原因是ext窗口容器，這是呈現網格面板。所以，我根據網格面板的這個屬性從代碼

voiceListingWindow = new Ext.Window({ ...

現在網格面板呈現移除了這個

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

來源

2011-07-15 19:31:00 Ali

Ext JS的面板調整問題

回答

相關問題