Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: loadMask grid IE7 problem

  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2007
    Location
    Eindhoven
    Posts
    115

    Default loadMask grid IE7 problem

    I have a gridpanel, with a grid. Loading the page in FF the first time is OK. the second time it doesn't show the loadMask. In IE explorer the first time OK, the second time i load the page it gives a error and doesnt show the grid. Removing the

    Code:
    loadMask:true
    in the grid fixes the problem. Everything works fine, but i want my loadMask :-)

    Code:
    <script type="text/javascript">
    Ext.onReady(function(){
     var ds;
     var columnModel;
     var grid;
     
     function dialog_win(titel,boodschap,melding){
      var regels;
      regels=true;
      if ((melding.length==0) || (melding==null)) regels=false;
      var boodschap = Ext.MessageBox.show({
       title: titel,
       msg: boodschap,
       width:300,
       buttons: Ext.MessageBox.OK,
       multiline: false,
       value:melding,
       multiline:regels 
      });
     }
     
     function setupDataSource() {
      ds = new Ext.data.Store({
       baseParams: {parameter: '<?php echo $_POST[parameter];?>'},
       proxy:  new Ext.data.HttpProxy({url:'http://localhost:80/PSA_Finance/get_handlers/get_dealers.php'}),
       reader:  new Ext.data.JsonReader(
        {root: 'records',totalProperty: 'aantal', id: 'sleutel'},
        [
         {name: 'sleutel'},
         {name: 'dealernr'},
         {name: 'DA'},
         {name: 'rayon'},
         {name: 'b_naam'},
         {name: 'b_adres'},
         {name: 'b_postcode'},
         {name: 'b_plaats'},
         {name: 'b_postbus'},
         {name: 'b_postcode_pb'},
         {name: 'b_plaats_pb'},
         {name: 'b_telefoonnr'}
        ]
       )
      }
      ); 
     }
     
     function getColumnModel() {
      if(!columnModel) {
       columnModel = new Ext.grid.ColumnModel(
        [{
         header: "DealerNr",
         dataIndex: 'dealernr',
         sortable: true,
         width: 50
        },{
         header: "DA",
         sortable: true,
         dataIndex: 'DA',
         width: 25
        },{
         header: "Rayon",
         sortable: true,
         dataIndex: 'rayon',
         width: 40
        },{
         header: "Bedrijf",
         sortable: true,
         dataIndex: 'b_naam',
         width: 200
        },{
         header: "Adres",
         sortable: true,
         dataIndex: 'b_adres',
         width: 150
        },{
         header: "Postcode",
         sortable: true,
         dataIndex: 'b_postcode',
         width: 65
        },{
         header: "Plaats",
         sortable: true,
         dataIndex: 'b_plaats',
         width: 85
        },{
         header: "Postbus",
         hidden:true,
         sortable: true,
         dataIndex: 'b_postbus',
         width: 85
        },{
         header: "Postcode postbus",
         hidden:true,
         sortable: true,
         dataIndex: 'b_postcode_pb',
         width: 85
        },{
         header: "Plaats postbus",
         hidden:true,
         sortable: true,
         dataIndex: 'b_plaats_pb',
         width: 85
        },{
         header: "Telefoonnr",
         hidden:true,
         sortable: true,
         dataIndex: 'b_telefoonnr',
         width: 85
        }]
       );
      }
     }
     
     function buildGrid() {
      grid = new Ext.grid.Grid('div-laden',
       {
        ds: ds,
        cm: columnModel,
        autoSizeColumns: false,
        loadMask:true <-removing this and i can load this script multiple times without problems.
       }
      );
     
      grid.on("rowdblclick", function(grid) {
       alert(grid.getSelectionModel().getSelected().data.b_naam);
      });
     
       grid.render();
     
        var gridFoot = grid.getView().getFooterPanel(true);
     
        var paging = new Ext.PagingToolbar(gridFoot, ds, {
            pageSize: 25,
            displayInfo: true,
            displayMsg: 'Onderwerpen {0} - {1} van {2}',
            emptyMsg: "Geen records"
        });
        paging.add('-', 'Filter: '); 
     
      var filter = Ext.get(paging.addDom({ 
                tag: 'input'
              , type: 'text'
              , size: '20'
              , value: ''
              , cls: 'x-grid-filter'
              }).el);
     
        paging.add('-');
     
        var excel = paging.addButton({
       icon: 'images/excel.gif',
       minWidth:'16',
       tooltip:'Export naar excel',
       cls:"x-btn-icon"
      });
     
      excel.on('click',function(E){
       var fil2 = filter.getValue();
       dialog_win('Excel export',"Klik op onderstaand plaatje om de excelsheet te openen.<table align=center><tr><td align=center><a href=http://localhost:80/PSA_Finance/get_handlers/excel.php?filter="+fil2.replace(" ","%20")+"&parameter=<?php echo $_POST[parameter];?> target=_self><img src=images/excel.jpg align=center></a></td></tr></table>",'');
      });
     
        filter.on('keypress', function(e) { // setup an onkeypress event handler
          if(e.getKey() == e.ENTER) // listen for the ENTER key
            ds.load({ // call the load() method of your datastore
              params: {
                start: 0 // reset the start to 0 since you want the filtered results to start from the first page
              , limit: 25
              }
            });
        });
     
        filter.on('keyup', function(e) { // setup an onkeyup event handler
          var key = e.getKey(); // assign the current key to a local variable
          if((key == e.BACKSPACE || key == e.DELETE) && this.getValue().length == 0) // listen for the BACKSPACE or DELETE keys and the field being empty
            ds.load({ // call the load() method of your datastore
              params: {
                start: 0 // reset the start to 0 since you want unfiltered results to start from the first page
              , limit: 25
              }
            });
        });
     
        filter.on('focus', function(){this.dom.select();}); // setup an onfocus event handler to cause the text in the field to be selected
     
        ds.on('beforeload', function() {
        ds.baseParams = { // modify the baseParams setting for this request
          filter: filter.getValue(), // retrieve the value of the filter input and assign it to a property named filter (rename to suit your needs)
         parameter: '<?php echo $_POST[parameter];?>'
        };
      });
     
        ds.load({params:{start:0,limit:25}});
     }
     
     setupDataSource();
     getColumnModel();
     buildGrid();
     innerLayout.add('center', new Ext.GridPanel(grid, {title: 'Dealers',autoScroll:false}));
    });
    </script>

  2. #2

    Default

    i have the same problem as you. but im using IE6. it seem to have the same problem.it's just fine in FF.but when it comes to the second time,the IE6 will have a error something like:"dom.firstChild is null or not a object".

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    You say 'reload the page'. Do you mean that or do you mean some action on the page causes the grid to be reloaded/rebuilt. Are you loading this code via Ajax?

  4. #4
    Ext JS Premium Member
    Join Date
    Apr 2007
    Location
    Eindhoven
    Posts
    115

    Default reload

    with reload the page i mean reload the gridpanel (= the page). I reload the page with
    Code:
    Ext.get('div_example').load{
      url:'url_page.php';
    }
    and in the page i load a gridpanel
    Code:
    innerLayout.add(blabla , new gridpanel(Buildgrid(),{titel':"example'});
    The code above is a example, not the real deal. Before i load the url with the code thats creates the gridpanel again i remove the div 'div_example' with the
    Code:
    .remove('div_example',false);
    I think this removes everything on the gridpanel, but i think that something still remains in the DOM that gives a conflict the second time i load the page. I dont now how i can figure out what causes the problem.

    IE gives the second time i load the page: dom.Childelement is empty.
    I also find out that i can not show the hidden:true columns from the grd the second time.

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    You need to destroy the grid before your recreate it. There are other threads about that. Why do you recreate it anyway - why not just reload the data? Are you changing the colModel/dataModel?

  6. #6
    Ext JS Premium Member
    Join Date
    Apr 2007
    Location
    Eindhoven
    Posts
    115

    Default destroy

    If i destroy the panel (gridpanel) with remove,false it means everything on this div is detroyed 2 or not? Because that is what i am doing. Does this mean that remove only removes the panel but not the element on that panel?

    From my menu (tree) the user can select maybe 30 different pages. I think its not smart to all create them (contentpanels/gridpanels) and hide or show them when the user clicks on the link in the menu. Thats why i got the idea off removing and creating the div/panels etc before loading them a again.

  7. #7

    Default loadMask:true in IE6

    Ive got to set the ( _mask and _maskMsg) properties of div target for grid to null and its work in IE6.
    like the following :
    [code]
    var el = Ext.get('div-laden')
    el._mask = null;
    el._maskMsg = null;
    [code]
    before rendering the grid.

    [ don't have IE 7 to try it out ]
    fxkris

  8. #8

    Exclamation Still doesn't work

    I was not able to fix this with your code for IE6.

    Quote Originally Posted by pkristiana View Post
    Ive got to set the ( _mask and _maskMsg) properties of div target for grid to null and its work in IE6.
    like the following :
    [code]
    var el = Ext.get('div-laden')
    el._mask = null;
    el._maskMsg = null;
    [code]
    before rendering the grid.

    [ don't have IE 7 to try it out ]
    fxkris

  9. #9

    Default Temporary fix

    I worked around this bug by changing line 3356 of ext-all-debug.js to

    PHP Code:
                mm.dom.innerHTML '<div>' msg '</div>'
    But it's kind of hacky - somehow hiding/showing/reparenting grids deletes that inner div in the _maskMsg on IE

  10. #10

    Default

    I confirm the problem with 1.1.1, I'm having it now in my app.. Any updates?

Page 1 of 2 12 LastLast

Posting Permissions

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