LiveSearchGridPanel.js and IE

[Moinsen]

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

[scottmartin]

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

Regards,
Scott.

[Moinsen]

Yes! I'm using 4.1 final.

Regards

[scottmartin]

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

How does this work?

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.

[Moinsen]

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.

     
  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!

[scottmartin]

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

Regards,
Scott.

[Moinsen]

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:

        
     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:

 
           layout: {              
              type: 'hbox',
               align: 'stretch'
            },

And this is the best result i ever reached. Hope this helps!

Thank you!