Проблема выравнивания панели Ext Js - PullRequest
1 голос
/ 15 июля 2011

Это моя 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>&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>

Пожалуйста, смотрите прикрепленные изображения и затем прочитайте объяснение ниже

Макет страницы в порядке при загрузке страницы См. Это изображение

Это то, что происходит, когда окно firebug открывается и страница обновляется. Посмотри это изображение

Сетка отображается ОК при загрузке страницы. Проблема в том, что когда я открываю окно Firebug и обновляю страницу, Grid переходит наверх и происходит то же самое, когда я открываю страницу на Mac. Я не знаю, как решить эту проблему, так как я впервые работаю с Ext.

Пожалуйста, предложите что-нибудь.

1 Ответ

2 голосов
/ 15 июля 2011

ОК, я решил проблему ... Это плагин , который служит моей цели. Вот пример использования этого плагина над здесь . Внимательно прочитайте документацию, а затем пример.

Но поначалу у меня это не сработало, причина была в контейнере ext window, который рендерил панель сетки. Поэтому я удалил это из кода

voiceListingWindow = new Ext.Window({ ...

Теперь панель сетки отображается в соответствии с этим свойством панели сетки

... renderTo: 'reportTabContent' // render the grid to the specified div in the page
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...