2011-07-15 10 views
1

これは私の内線パネルとのExtウィンドウ ですこれはこれはExt.WindowのExt Jsのパネルアライメントは問題

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"} 
}); 
エディタグリッドパネル

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' 
    }] 
}); 

です

モデル

ページのロード時 See this Image

これは時に放火犯何が起こるかである

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

グリッドが表示されます。ページが読み込まれたらOKです。問題はFirebugウィンドウを開いてページをリフレッシュし、Gridがトップに移動し、Macでページを開くときに同じことが起こることです。 Extと一緒に作業しているのは初めてのことなので、この問題の対処方法はわかりません。

何かお勧めします。

+0

のこの性質に応じてそこにいくつかのエラーではありませんが、それは完全なコードではありません。完全なコードを提供してください... – Zango

+1

私は問題がレンダリングにあると思います。このウィンドウをどこでレンダリングしますか?たぶんあなたはいくつかのapsolute座標を持っています... – Zango

+0

これはPHPファイルでレンダリングされます。コードを更新しました。見てください。ありがとう – Ali

答えて

2

OK問題を解決しました。これは私の目的に役立つpluignです。このプラグインを使用する例はhereです。ドキュメントを注意深く読んでから、例を読んでください。

しかし、最初は私にとってはうまくいかなかったのですが、その理由は、グリッドパネルをレンダリングしていたextウィンドウコンテナでした。だから私は、コード

voiceListingWindow = new Ext.Window({ ... 

からこれを削除今すぐグリッドパネルがレンダリングされるGridパネル

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