CODEWITHSUNDEEP
extjs
Ali
Ali

Reputation: 8100

Ext Js Panel Alignment issue

This is my Ext Panel and Ext Window This is Editor Grid Panel

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

This is 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
 });

The Data Store

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"}
});

The Model

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

This is the PHP file

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

Please see the attached images and then read the explanation below

Page layout is fine when page loads See this Image

This is what happens when firebug window is opened and page is refreshed. See this image

Grid appears OK when the page is loaded. The problem is when I open up the firebug window and refresh the page , Grid goes to the top and same thing happens when I open the page on Mac. I don't know how to handle this problem since this is the first time I am working with Ext.

Please suggest something.

Upvotes: 1

Views: 1690

Answers (1)

Ali
Ali

Reputation: 8100

OK I have solved the issue ... This is a pluign that serves my purpose. There is an example of using this plugin over here. Read the documentation carefully and then the example.

But at first it didn't work for me, the reason was ext window container, that was rendering the grid panel. So I removed this from code 

voiceListingWindow = new Ext.Window({ ...

Now the grid panel is rendered according to this property of Grid panel 

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

Upvotes: 2

Related Questions