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

Thread: [2.0.1] Safari on Leopard and XHTML

  1. #1
    Ext User
    Join Date
    Dec 2007
    Posts
    7
    Vote Rating
    0
      0  

    Default [2.0.1] Safari on Leopard and XHTML

    Dear Etxjs-ers, I'm currently developing a project using the Extjs but I run into several problems trying to use Extjs with the Safari Web Browser (on MacOSX).
    I have to say that the problems show up ONLY when I try to load pages posted as application/xhtml+xml.

    After a day of debugging (a nightmare with Safari) I traced down 2 problems:

    1. the javascript document.body does NOT work. I have substituted it with document.getElementsByTagName('body').item(0). I honestly do not know why document.body does not return the body of the document, but, again, this only happens when serving xhtml pages.
    2. Everytime Extjs try to set the innerHTML property of an object to an empty string Safari complains with the following error:
    NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7.

    The workaround I'm currently using is to assign to the innerHTML property at least a string with a space (" "), but unfortunately this screws up things in such way that the rendering of the grid component becomes corrupted (still debugging this ...) .


    Does anyone encountered similar problems?
    Am I saying somthing reasonable or my conclusions are completely wrong?
    Moreover, do you have any quick and dirty trick to make Extjs work properly with Safari and XHTML???


    Thanks for help,

    M.

  2. #2
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      0  

    Default

    please post details as per https://www.sencha.com/forum/showthread.php?t=13985. thanks.

  3. #3
    Ext User
    Join Date
    Dec 2007
    Posts
    7
    Vote Rating
    0
      0  

    Default An example

    Here it is a very simple example that works in Firefox but crashes in Safari

    HTML code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns       = "http://www.w3.org/1999/xhtml"
          xmlns:svg   = "http://www.w3.org/2000/svg" 
          xmlns:xlink = "http://www.w3.org/1999/xlink"
          xmlns:ext   = "http://www.extjs.com"> 
    
    <head>
    <title>Example</title>
    <!-- Ext CSS and Libs -->
    <link   rel="stylesheet" type="text/css"	href="/extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"/>
    <script type="text/javascript" src="/extjs/ext-all-debug.js"/>
    <!-- Custom CSS and Libs -->
    <script type="text/javascript" src="combo.js"/>
    </head>
    <body>
    <div id="toolbar"></div>
    <div id="navigation"></div>
    <div id="theMenu"></div>
    <div id="radios"></div>
    <div id="combobox"></div>
    <div id="submitbtn"></div>
    </body>
    </html>

    and javascript combo.js code

    Code:
    Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';
    
    Ext.onReady(function(){
        Ext.QuickTips.init();
    
    //______________________________________________________________________________
        // MENU to toolbar div 
    			
        var menu = new Ext.menu.Menu({
          id: 'mainMenu',
    	  items: [{
    	  text: 'Plus Z',
    	      menu:{
    	    items: [{
    		text: 'Inner',
    		    menu:{
    		  items: [{
    		      text: 'Layer 1',
    			  },
    		    {
    		    text: 'Layer 2'
    			},
    		    {text: 'Layer 3'}]
    		      }
    		},{
    		text: 'Outer',
    		    menu:{
    		  items: [{
    		      text: 'Layer 1'
    			  },
    		    {
    		    text: 'Layer 2'
    			},
    		    {text: 'Layer 3'}]
    		      }
    		}]
    		}
    	  },
    	    {
    	    text: 'Minus Z',
    		menu:{
    	      items: [{
    		  text: 'Inner',
    		      menu:{
    		    items: [{
    			text: 'Layer 1'
    			    },
    		      {
    		      text: 'Layer 2'
    			  },
    		      {text: 'Layer 3'}]
    			}
    		  },{
    		  text: 'Outer',
    		      menu:{
    		    items: [{
    			text: 'Layer 1'
    			    },
    		      {
    		      text: 'Layer 2'
    			  },
    		      {text: 'Layer 3'}]
    			}
    		  }]
    		  }
    	    }]
    	  }) ;
    
        var tb = new Ext.Toolbar();
        tb.render('toolbar');
     
        tb.add({
              text: 'Barrel',
    	  pressed: false,
    	  menu: menu
    	  });
    
        function menuClick(item){
          alert('You clicked the ' + item.text + ' item');
        }
    //______________________________________________________________________________
    
    
    //______________________________________________________________________________
    // RADIO BUTTONS
        var radioDB = new Ext.form.Radio({
          name: 'db_files',
    	  renderTo: 'radios',
    	  boxLabel: 'Read from DB',
    	  labelSeparator: '',
    	  inputValue: 1,
    	  checked: true
          }) ;
        var radioFiles = new Ext.form.Radio({
          name: 'db_files',
    	  renderTo: 'radios',
    	  boxLabel: 'Read from files',
    	  labelSeparator: '',
    	  inputValue: 2
          }) ;
        // Ne basta 1 solo perche' ho solo 2 radiobuttons:
        // l'evento e' triggerato sia quando clicco il 
        // pulsante al quale associo il listener, sia
        // quando clicco l'altro (perche' e' come se lo un-chackassi ...)!!
        radioFiles.addListener("check",comboReload, this) ;
    //    radioDB.addListener("check",comboReload, this) ;
    //______________________________________________________________________________
    
    
    //______________________________________________________________________________
    // COMBO BOX AJAX - STORE - RELOAD
    
        var theStore = new Ext.data.Store({
          proxy: new Ext.data.HttpProxy({
    	url: getDB_Files
    	    }),
    	  reader:  new Ext.data.XmlReader({
    	    record: "Item"           // The repeated element which contains row information
    		}, [
    		    {name: 'alias' },     // "mapping" property not needed if it's the same as "name"
    		    {name: 'value'}                 // This field will use "occupation" as the mapping.
    		    ])
    	  });
    
        function getDB_Files()
        {
          if(radioDB.getValue())     
    	return 'http://127.0.0.1/~rovere/db.xml' ;
          if(radioFiles.getValue())     
    	return 'http://127.0.0.1/~rovere/files.xml' ;
        }
    
        function comboReload()
        {
          combo.clearValue() ;
          theStore.load() ;
        }
        var combo = new Ext.form.ComboBox({
          store: theStore,
    	  displayField:'alias',
    	  valueField: 'value' ,
    	  //typeAhead: true,
    	  mode: 'remote',
    	  triggerAction: 'all',
    	  emptyText:'Select a state...',
    	  selectOnFocus:true,
    	  renderTo: 'combobox'
    	  });
    
    //______________________________________________________________________________
    
    
    //______________________________________________________________________________
    // SUBMIT BUTTON AND HANDLER
    
        var subbtn = new Ext.Button({
          renderTo: 'submitbtn',
    	  text: 'Load Configuration',
    	  handler: loadConfig
          });
    
        function loadConfig()
        {
          alert('Loading Page ' + combo.getValue()) ;
        }
      });

    When the xhtml is loaded into Safari and the user clicks over the combobox, the Safari javascript console says:

    Null value
    /extjs/ext-all-debug.js 223


    If clicked after selecting a different radio button the console says:

    Undefined value
    /extjs/ext-all-debug.js 27170


    Trying to click on the menu I have the same error again:
    Null value
    /extjs/ext-all-debug.js 223



    Hope this help to clarify the point.

    M.

  4. #4
    Ext User
    Join Date
    Dec 2007
    Posts
    7
    Vote Rating
    0
      0  

    Default Maybe Solved?

    Ok, I see from the number of replies that the topic is not so much of interest.
    In any case I think it is useful for the community to have a possible solution to problem.

    I finally managed to integrate ExtJS 2.0.1 into Safari and XHTML with the following very simple modifications to extjs-all-debug and to ext-base

    1. Substitute ALL document.body with document.getElementsByTagName('body').item(0)
    2. check that every single string assigned to the innerHTML property is not null. If it is the assignement is NOT done.

    The first modification is pretty simple if you use sed (do somethins like sed -e "s/document.body/document.getElementsByTagName('body').item(0)/g")

    Remember to also change code like doc.body, where doc was previously declared to be document

    The second point is a little bit more complex, but you can look for the string innerHTML and then judge yourself if the protection I suggest in point 2 is already in place or not (there indeed are places where the check is already there). If not, implement it.

    I was able to test the modifications using combobox, menus and grids. (the example in post number 2 now works great).

    If you also want Ext.Msg.alert (and the like) to properly work you also have to make the same chenges to ext-base (evil here because of the formatting, but emacs is even more evil at indenting it the right way after a few \n insertion.....).

    I hope some developer will read this topic and possibly insert these (very small) changes to a future release of Extjs, otherwise I'll do them by myself .


    Thanks for help,

    M.

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    1
      0  

    Default

    I am running Safari 3.0.4 on Leopard. The following test case works just fine for me, are you certain that you don't have some other issues going on?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns       = "http://www.w3.org/1999/xhtml"
          xmlns:svg   = "http://www.w3.org/2000/svg" 
          xmlns:xlink = "http://www.w3.org/1999/xlink"
          xmlns:ext   = "http://www.extjs.com"> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>2.0 Safari Mac Test Page</title>
        <link rel="stylesheet" type="text/css" href="../../ext-2.0.1/resources/css/ext-all.css" />
        <script type="text/javascript" src="../../ext-2.0.1/adapter/ext/ext-base.js"> </script>
        <script type="text/javascript" src="../../ext-2.0.1/ext-all-debug.js"> </script>
        
        <script>
            Ext.onReady(function(){
                alert(document.body.id);
                Ext.getDom('foo').innerHTML = "";
            });
        </script>
    
    </head>
    <body>
        <div id="foo">Foo</div>
    </body>
    </html>

  6. #6
    Ext User
    Join Date
    Dec 2007
    Posts
    7
    Vote Rating
    0
      0  

    Default it does not work

    Sorry Brian, but the example you gave me is not working.
    Safari (3.0.4 (5523.15) ) just complains with the usual message:

    Undefined value

    when I try to access document.body

    It works perfectly asking for getElementsByTagName('body').item(0).id

    Same problem when trying to insert the null string. I got to insert at least a space.

    If you need more info about Safari settings please let me know exactly what you need: I'll be glad to help.

    Many thanks,

    M.


    By the way, Have you tried yourself your example server as testpage.XHTML ??, because if you serve it as html there are no problems at all!!!!.

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    89
    Vote Rating
    0
      0  

    Default

    I have a Mac with Leopard and let me say that all applications I developed with Ext have problems with Safari.
    Sometimes odd behaviours like -with a card layout- render form fields of a card inside an other card. Sometimes the ui seems to be completely exploded like in the attached image.
    I think that a lot of work is still to be made to have a full compatibility with Safari.
    Ext is supposed to abstract developer from specifics browsers' issues, but this isn't true for FF or IE where many odd different things come out very often. Less true is for Safari or Opera.

    My hope is that Ext devs team stop to create new things and releases so often and concentrate they self on bug hunting and fixing. This would be the best thing to "build a foundation".
    And... why don't write a proper documentation too?
    Attached Images Attached Images

  8. #8
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    1
      0  

    Default

    @pomense, I see the error using .xhtml file extension, but that's the only case. Is that extension a requirement for you?

    @kimu, I develop primarily on a Mac running Leopard. I can assure you that every component and example we have is tested thoroughly on the Mac / Safari. If you have specific issues, I assume that you've posted them elsewhere. Oh, and we do have documentation.

  9. #9
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    1
      0  

    Default

    One other thing, if you use Ext.getBody() it will do the proper check for you to return the body element -- no need for your search/replace hack. Clearing the innerHTML I'm not sure about though...

  10. #10
    Ext User
    Join Date
    Mar 2007
    Posts
    89
    Vote Rating
    0
      0  

    Default

    Brian, I don't want to be polemic. I'm sure every component and example is tested with Safari, but excatly as combining components creating complex structures creates problems and oddities with FF e IE, worst things happends with Safari and Opera.
    As you can see from my pictures that application explode in Safari while has no problem with FF and IE. Should I say that is a problem due to my code?
    Yes, it possibile, but having no problem with FF and IE if Ext gives a complete abstraction I should not have problem with Safari as well?!
    Maybe demos aren't enough to say that has no problem. Problems arise with larger and complex structures, this is what come from my experience with Ext at least.
    IMHO having and API docs isn't have documentation. A manual or an comprehensive guide could be a proper documentation, together with API docs, cause some of the concepts under Ext are not clear at all.

    Surely, if you feel that Ext has no problem and documentation is enough who am I to say that is not. I just like to say that more people understand and have pleasure to develop with Ext more popolar you'll be and more customers will come.
    Having a large developers base is something really importart for a framework, for me at least, and the most important things to attract developers is to have a stable, well tested software, and a very good documentation.

    IMHO obviously.

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
  •