1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    Katzenellenbogen
    Posts
    51
    Vote Rating
    1
    Moinsen is on a distinguished road

      0  

    Default LiveSearchGridPanel.js and IE

    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

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,999
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      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
    Moinsen is on a distinguished road

      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
    8,999
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      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
    Moinsen is on a distinguished road

      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
    8,999
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      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
    Moinsen is on a distinguished road

      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!

Thread Participants: 1