Results 1 to 7 of 7

Thread: LiveSearchGridPanel.js and IE

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    Katzenellenbogen
    Posts
    51
    Vote Rating
    1
      0  

    Default LiveSearchGridPanel.js and IE

    Hi,

    i am using LiveSearchGridPanel in my application. In Chrome it looks ok. This means the status bar with 'nothing found' is visible. In IE this status bar is missing. Is there a fix for this???
    Attached Images Attached Images

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,389
    Vote Rating
    498
      0  

    Default

    What version of ExtJS4 are you using? Have you tried 4.1 final?

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Location
    Katzenellenbogen
    Posts
    51
    Vote Rating
    1
      0  

    Default

    Yes! I'm using 4.1 final.

    Regards

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,389
    Vote Rating
    498
      0  

    Default

    Since I only have a screen for reference, I created a quick layout in XDS to simulate your layout.

    How does this work?

    Code:
    Ext.define('MyApp.view.MyPanel', {
        extend: 'Ext.panel.Panel',
    
        height: 250,
        width: 700,
        layout: {
            align: 'stretch',
            type: 'hbox'
        },
        title: 'My Panel',
    
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'gridpanel',
                        title: 'My Grid Panel',
                        flex: 1,
                        columns: [
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'string',
                                text: 'String'
                            }
                        ],
                        viewConfig: {
    
                        },
                        dockedItems: [
                            {
                                xtype: 'toolbar',
                                dock: 'top'
                            },
                            {
                                xtype: 'toolbar',
                                dock: 'bottom'
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        title: 'My Panel',
                        flex: 1
                    }
                ]
            });
    
            me.callParent(arguments);
        }
    });
    
    Ext.create('MyApp.view.MyPanel', {
        renderTo: Ext.getBody()
    });
    Scott.

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Location
    Katzenellenbogen
    Posts
    51
    Vote Rating
    1
      0  

    Default

    Hi Scott,

    sorry for delay. I try to isolate the grid problem. It is a grid panel problem, no matter if you use Ext.grid.Panel or Ext.ux.LiveSearchGridPanel. So maybe you want to change the category.

    This is the code snippet working in Chrome. So you know what i am looking for. In IE 9 it fails on different places, depending the changes you make.

    Code:
         
      Ext.onReady(function() {  
            
            Ext.get(document.body).update('<div id="main"></div>');
            
            Ext.define("Company", {extend: "Ext.data.Model", 
              fields: [
                {name: 'id', type: 'int'},
                {name: 'name', type: 'string'},
                {name: 'totalLicenses', type: 'int', defaultValue: 0},
                {name: 'jasperserverUrl', type: 'string'},
                {name: 'adminUser', type: 'string'},
              ]
            });
            var companyGridColumns = [
              {header: 'id',  dataIndex: 'id', sortable : true, flex:1},
              {header: 'Name', dataIndex: 'name', sortable : true, flex:1},
              {header: 'JasperServerUrl ', dataIndex: 'jasperserverUrl', sortable : true, flex:1},
              {header: 'Anzahl Lizenzen', dataIndex: 'totalLicenses', sortable : true, flex:1},
              {header: 'Admin Benutzer', dataIndex: 'adminUser', sortable : true, flex:1}
            ];
            var companyStore = new Ext.data.Store({
              model: 'Company',
              storeId: 'companyStore',
              data: [{id:1,name:'1',totalLicenses:1,jasperserverUrl:'1',adminUser:'1'},{id:2,name:'2',totalLicenses:2,jasperserverUrl:'2',adminUser:'2'},{id:3,name:'3',totalLicenses:3,jasperserverUrl:'3',adminUser:'3'}],
              autoLoad: true,
              id: 'companyStore'
            });
            
            function createGrid1(companyStore) {
              var panelType;
              if(Ext.isIE){
                panelType = 'Ext.grid.Panel';
              } else {
                panelType = 'Ext.ux.LiveSearchGridPanel';
              }
              var grid = Ext.create(panelType, {
                stateful:true,     
                stateId:'Company-grid',  
                id: 'grid1',
                flex: 1,
                store: companyStore,
                loadMask: true,
                disableSelection: false,
                columnLines: true,
                columns: companyGridColumns,
                viewConfig: {
                  stripeRows: true
                },
                verticalScroller: {
                  numFromEdge: 5,
                  trailingBufferZone: 10,
                  leadingBufferZone: 20
                },
                layout: {
                  type: 'vbox',
                  align: 'stretch'
                },
                listeners: {
                  'selectionchange': function(model, records) {
                    //updateCompanyDetail(records[0]);
                  },
                  'itemclick': function ( model, record) {
                    //updateCompanyDetail(record);
                  },
                  'itemdblclick': function(model, records) {
                    //logInfo("itemdblclick");
                    // step2();
                    //form2Slide(this, true);
                  }
                }        
              });
    
              return (grid);
            }
    
            function createGridCompany(grid1) {
              var formGridCompany = Ext.create('Ext.form.Panel', {
                id: 'form1',
                frame: true,
                style: 'z-index: 0',
                x: 0,
                y: 0,
                width: 600,
                height: '100%',
                flex: 1,
                title: "Kunden",
                layout: {
                  type: 'vbox',
                  align: 'stretch'
                },
                items :[ grid1 ]
              });
    
              return formGridCompany;
            }
            
            var grid1 = createGrid1(companyStore);
            var gridCompany = createGridCompany(grid1);
            
            var mainForm = Ext.create('Ext.form.FormPanel', {
              id: 'panel-form',
              frame: false,
              flex: 1,
              layout: {
                type: 'absolute'
              }
            });    
    
            mainForm.add(gridCompany);
    
            Ext.create('Ext.container.Viewport', {
              layout: 'fit',
              //items: [{
              id: 'main-form',
              autoHeight: true,
              frame: true,
              layout: {
                type: 'vbox' ,
                align: 'stretch'
              },
              title: 'Administration Apps',
              border: true,
              renderTo : Ext.getBody(),
              items: [ mainForm ]
              //  }]  
            });
          });
    As i said before could not start it in IE9, sorry. But i think you can give me some help if you see what i am expecting. BTW: Who is responsible for IE9? We should ask for a occupational ban for him!

    Thank you!

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,389
    Vote Rating
    498
      0  

    Default

    I will have another look.. do NOT get me started on IE

    Regards,
    Scott.

  7. #7
    Sencha User
    Join Date
    Feb 2012
    Location
    Katzenellenbogen
    Posts
    51
    Vote Rating
    1
      0  

    Default

    Hi Scott,

    i played a bit with these issue. To get back to the state shown in IE.png from the first post do the following. To avoid the exception in Ext.AbstractComponent removeChildEls change the Viewport like this:

    Code:
            
         Ext.create('Ext.container.Viewport', {
              layout: 'fit',
              items: [{
                id: 'main-form',
                autoHeight: true,
                frame: true,
                layout: {
                  type: 'vbox' ,
                  align: 'stretch'
                },
                title: 'Administration Apps',
                border: true,
                renderTo : Ext.getBody(),
                items: [ mainForm ]
              }]  
            });
    As a result you will see the panel but no status bar and you will see just the half of the first row in the grid. To see the complete grid change the layout in createGrid1 like this:

    Code:
     
               layout: {              
                  type: 'hbox',
                   align: 'stretch'
                },
    And this is the best result i ever reached. Hope this helps!

    Thank you!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •