1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    30
    Vote Rating
    0
    ragendu is on a distinguished road

      0  

    Default Unanswered: Grid not displaying in window

    Unanswered: Grid not displaying in window


    Hi,

    OnClick of a button, it calls a js function which pops up a window. Within this window I have a form and a grid embedded in it. In the window items properties, if I add grid, the window is not showing. If I keep only form variable, then the window is displayed.
    items : [filterPIDForm,pidGrid] is not working whereas items: [filterPIDForm] is working fine.
    This is the code snippet

    <script type="text/javascript">
    jQuery(document).ready(function(){
    // eCube search
    jQuery('#eCubeSearch').click(function(){
    pidSearch();


    });
    });


    function pidSearch()
    {
    var filterPIDForm = new Ext.form.FormPanel({
    title : 'Job Filters',
    floatable : false,
    id : 'filterForm',
    tabTip : 'woot',
    labelAlign :'top',
    region :'west',
    collapsible : true,
    bodyStyle : 'padding: 5px; background-color: #DFE8F6',
    border : false,
    // style : 'border-top: 1px solid #99BBE8;',
    width : 220,
    items : [
    {
    xtype : 'combo',
    width : 200,
    id :'emailCombo',
    fieldLabel :'Filter by Owner',
    //store :emailStore,
    valueField :'emailValue',
    displayField :'emailDisplay',
    mode :'local',
    editable :false,
    typeAhead :false,
    triggerAction :'all'
    //value : cfEmail
    //value :'ALL' //,
    //disabled cfARR?false:true)
    },
    {
    xtype : 'combo',
    width : 200,
    id :'statusCombo',
    fieldLabel :'Filter by Status',
    valueField :'statusValue',
    displayField :'statusDisplay',
    mode :'local',
    editable :false,
    typeAhead :false,
    triggerAction :'all'
    //value :'ALL'
    },
    {
    xtype : 'textfield',
    fieldLabel : 'PID/Description Search',
    width : 200,
    id :'searchText'
    }
    ],
    buttons: [
    {
    text : 'Clear Filter(s)',
    id : 'clear'
    },
    {
    text : 'Apply Filter(s)',
    id : 'apply'
    ]
    });


    var pidGrid = new Ext.grid.GridPanel({
    title : 'Job List',
    //myLast : false,
    id : 'pidList',
    region : 'center',
    //store : pidStore,
    autoExpandColumn : 'description',
    autoExpandMin : 150,
    //reserveScrollOffset : true
    //style : 'border-left: 1px solid #99BBE8;',
    columns: [
    //new Ext.grid.RowNumberer(),
    {
    xtype : 'gridcolumn',
    header : 'PID',
    //sortable : true,
    resizable : true,
    width : 70,
    dataIndex : 'PID',
    id : 'pid'
    //hidden : false
    },
    {
    xtype : 'gridcolumn',
    header : 'Description',
    // sortable : true,
    resizable : true,
    //width : 100,
    dataIndex : 'DESCRIPTION',
    id : 'description'
    //hidden : false
    }
    ]
    });

    var win = new Ext.Window({
    modal:true,
    title: 'PID Search',
    layout:'absolute',
    id: 'eCubeSearchWin',
    width:1000,
    height:400,
    resizable: false,
    plain: false,
    resizable: false,
    border: true,
    closeAction :'close',
    items : [filterPIDForm,pidGrid],
    //items : [filterPIDForm],
    buttons : [
    {
    text : 'OK',
    id : 'test'
    },
    {
    text : 'Close',
    handler : function(){
    Ext.getCmp('eCubeSearchWin').close();
    }


    }
    ]
    });
    win.show();
    }
    </script>


    items : [filterPIDForm,pidGrid] is not working whereas items: [filterPIDForm] is working fine.

    Can anyone please help me..

    Many thanks in advance..

  2. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,088
    Answers
    112
    Vote Rating
    95
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    try after removing:

    Code:
    region: 'center',
    from your grid.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    30
    Vote Rating
    0
    ragendu is on a distinguished road

      0  

    Default


    Hi,
    I removed
    region : 'center' but still its not displaying...

  4. #4
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,088
    Answers
    112
    Vote Rating
    95
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    try adding height config to your grid. also, try to just put the grid in the window and see if that does anything. do u see any errors in the console?

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    30
    Vote Rating
    0
    ragendu is on a distinguished road

      0  

    Default


    Hi,
    I am not getting any errors. Can you please try this code in yours and let me know if the grid is displaying or not?
    Thank you

  6. #6
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    The main problem appears to be a misuse/abuse of layouts in general...

    Below is a functional code sample you can build from, noting that since I don't declare a layout for the Window it defaults to auto and child components stack vertically:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Window and Form/Grid Test</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    
    <script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
    <script type="text/javascript">
    Ext.onReady(function() {
      
      Ext.create('Ext.window.Window', {
        title: 'Form/Grid Window Test',
        width: 400,
        items: [{
          xtype: 'form',
          bodyPadding: 5,
          items: [{
            xtype: 'textfield',
            fieldLabel: 'Last Name',
            name: 'lastName',
            width: 250
          },{
            xtype: 'textfield',
            fieldLabel: 'First Name',
            name: 'firstName',
            width: 250
          }]
        },{
          xtype: 'grid',
          columnLines: true,
          columns: [{
            header: 'Last Name', dataIndex: 'lastName', sortable: true, width: 150
          },{
            header: 'First Name', dataIndex: 'firstName', sortable: true, width: 150
          }],
          height: 150,
          store: {
            fields: [{
              name: 'firstName', type: 'string'
            },{
              name: 'lastName', type: 'string'
            }],
            data: [
              {firstName: 'Ed',    lastName: 'Spencer'},
              {firstName: 'Tommy', lastName: 'Maintz'},
              {firstName: 'Aaron', lastName: 'Conran'},
              {firstName: 'Jamie', lastName: 'Avins'},
              {firstName: 'Jadji', lastName: 'Bandito'},
              {firstName: 'Slim',  lastName: 'Whitman'},
              {firstName: 'Gulliver', lastName: 'Foyle'}
            ]
          },
          width: 390
        }],
        buttons: [{
          text: 'Save'
        },{
          text: 'Cancel'
        }]
      }).show();  
    });
    
    </script>
    </head>
    
    <body></body>
    </html>

  7. #7
    Sencha User
    Join Date
    Nov 2011
    Posts
    30
    Vote Rating
    0
    ragendu is on a distinguished road

      0  

    Default


    Thanks for giving me this sample code. I tried with no layout(defaulting to auto) but still the window is not opening when i include my grid inside the window. Can you try out with my code and see if the window is poped up or not?

  8. #8
    Sencha User
    Join Date
    Nov 2011
    Posts
    30
    Vote Rating
    0
    ragendu is on a distinguished road

      0  

    Default


    I used the firebug to check what is causing the issue. The error its displaying is "this.ds is undefined ext-all.js (line 11).
    Does anybody have any clue on this?

  9. #9
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    Here's the code sample reworked to include your grid. Note that I removed the obsolete autoExpand config bits for the description column and instead use the new flex: 1 attribute on that column:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Window and Form/Grid Test</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    
    <script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
    <script type="text/javascript">
    Ext.onReady(function() {
      
      var pidGrid = new Ext.grid.GridPanel({
        title : 'Job List',
        columns: [{
          xtype : 'gridcolumn', header : 'PID',  width : 70, dataIndex : 'PID'
        },{
          xtype : 'gridcolumn', header : 'Description', resizable : true, dataIndex : 'DESCRIPTION', flex: 1
        }],
        height: 200
      });
      
    
      Ext.create('Ext.window.Window', {
        title: 'Form/Grid Window Test',
        width: 400,
        items: [{
          xtype: 'form',
          bodyPadding: 5,
          items: [{
            xtype: 'textfield',
            fieldLabel: 'Last Name',
            name: 'lastName',
            width: 250
          },{
            xtype: 'textfield',
            fieldLabel: 'First Name',
            name: 'firstName',
            width: 250
          }]
        },
          pidGrid  
        ],
        buttons: [{
          text: 'Save'
        },{
          text: 'Cancel'
        }]
      }).show();
      
    });
    
    </script>
    </head>
    
    <body>
    </body>
    </html>

  10. #10
    Sencha User
    Join Date
    Nov 2011
    Posts
    30
    Vote Rating
    0
    ragendu is on a distinguished road

      0  

    Default


    Hi,
    I tried with these settings inside the window
    items : [{
    items : filterPIDForm
    ,layout :'fit'
    ,region : 'north'
    ,height : 300
    },{
    items : pidGrid
    ,layout :'fit'
    ,region :'center'
    }]
    With this inside the window now a portion of the grid is displaying..Now its displaying form panel on the left part and grid on bottom of that. Actually I wanted the structure like this.Inside the window, form panel on the left with the 2 buttons on the bottom of form panel and the grid on the right side (adjacent to the form panel).Hope you understand my requirement
    I am not sure how to align this inside the window..
    Could some body please guide me on this??
    Thanks in advance...

Thread Participants: 2