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,084
    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,084
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi