PDA

View Full Version : ExtJS 4.1: 'title' configuration



abcdef
3 Apr 2012, 1:08 PM
I'm using 4.1 (I'm including ext-all-debug.js) and my app.js is as follows:



// Enabling dynamic loading
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext': 'behavior/lib/extjs41/src'
}
});

Ext.application({
name: 'S',
appFolder: 'behavior/app',
autoCreateViewport: true,
enableQuickTips: false,
launch: function() {
}
});



My Viewport.js:



Ext.define('S.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'fit',
componentCls: 'viewport',
items: {
xtype: 'panel',
title: 'test',
html: 'test'
},
initComponent: function() {
var me = this;
me.initConfig();
me.callParent(arguments);
return me;
}
});


This gives me an error:

TypeError: 'null' is not an object (evaluating 'me.el.dom')

and nothing renders.

When I remove the 'title' configuration option, the html renders fine. Any ideas?

scottmartin
3 Apr 2012, 2:10 PM
See if adding 'views' helps:

This is the same as 'requires'



Ext.application({
views: [
'MyViewport'
],
autoCreateViewport: true,
name: 'MyApp'
});



Regards,
Scott.

abcdef
3 Apr 2012, 2:40 PM
See if adding 'views' helps:

This is the same as 'requires'



Ext.application({
views: [
'MyViewport'
],
autoCreateViewport: true,
name: 'MyApp'
});



Regards,
Scott.

Nope. Did not work. I think its finding the viewport because its rendering the html without the title option. But with the title option, it throws the error that I mentioned earlier.

abcdef
3 Apr 2012, 3:03 PM
Also, the exact same thing works as expected with 4.0.2a...

skirtle
3 Apr 2012, 3:36 PM
Could you post the HTML for your page? It could be something very subtle in the order things are happening and the HTML may prove useful to diagnose.

abcdef
4 Apr 2012, 8:50 AM
Could you post the HTML for your page? It could be something very subtle in the order things are happening and the HTML may prove useful to diagnose.

Its the generated source. With 'title' configuration (and with the error I mentioned earlier):



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" class="x-border-box x-strict x-viewport">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<meta name="viewport" content="width = device-width"/>
<link rel="stylesheet" type="text/css" href="behavior/resources/css/myapp-main.css"/>
<script type="text/javascript" src="behavior/app/view/Viewport.js?_dc=1333557884427"/>
</head>
<body id="ext-gen1018" class="x-body x-gecko x-mac x-reset"><form id="history-form" class="x-hide-display"><input type="hidden" id="x-history-field"/><iframe id="x-history-frame"/></form>
</body>
</html>


Without the 'title' configuration (works fine):



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" class="x-border-box x-strict x-viewport">
<head>
<title>Scrumpit</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<meta name="viewport" content="width = device-width"/>
<link rel="stylesheet" type="text/css" href="behavior/resources/css/myapp-main.css"/>
<script type="text/javascript" src="behavior/app/view/Viewport.js?_dc=1333558119610"/>
</head>
<body id="ext-gen1018" class="x-body x-gecko x-mac x-reset x-layout-fit x-container viewport"><div id="panel-1010" class="x-panel x-fit-item x-panel-default" style="margin: 0pt; width: 1440px; height: 739px;"><div id="panel-1010-body" class="x-panel-body x-panel-body-default x-panel-body-default" style="width: 1440px; height: 739px; left: 0px; top: 0px;">test<div id="panel-1010-clearEl" class="x-clear" role="presentation"/></div></div><form id="history-form" class="x-hide-display"><input type="hidden" id="x-history-field"/><iframe id="x-history-frame"/></form>
</body>
</html>

abcdef
4 Apr 2012, 9:29 AM
Problem persists with RC2.

skirtle
4 Apr 2012, 10:07 AM
That isn't quite what I meant. Is there not an HTML file of some sort? I want to see exactly how you're including the library. What do you see when you click View Source in your browser?

abcdef
4 Apr 2012, 10:18 AM
That isn't quite what I meant. Is there not an HTML file of some sort? I want to see exactly how you're including the library. What do you see when you click View Source in your browser?

The html gets generated using XSL. The relevant part of the XSL is:



<xsl:template name="page_css">
<xsl:variable name="site_path_prefix"><xsl:call-template name="site_path_prefix" /></xsl:variable>
<link rel="stylesheet" type="text/css" href="{ $site_path_prefix }behavior/resources/css/scrumpit-main.css" />
</xsl:template>


<!-- Template for site javascript -->
<xsl:template name="page_javascript">
<xsl:variable name="site_path_prefix"><xsl:call-template name="site_path_prefix" /></xsl:variable>
<script type="text/javascript" src="{ $site_path_prefix }behavior/lib/extjs41/ext-all-debug.js"><xsl:text> </xsl:text></script>
<script type="text/javascript" src="{ $site_path_prefix }behavior/app.js"><xsl:text> </xsl:text></script>
</xsl:template>


HTML:



<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Scrumpit</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<meta name="viewport" content="width = device-width"/>
<link rel="stylesheet" type="text/css" href="behavior/resources/css/scrumpit-main.css"/>
</head>
<body>
<div id="container">
<div id="content" class="content">
<div class="main"/>
<div class="logs">
<!-- Bunch of log stuff. I have always removed '#container' in ExtJS before adding the history form and adding the viewport -->
</div>
</div>
</div>
<!-- Bunch of scripts using Protoype, but they don't interfere post login - always been the case for apps I developed with ExtJS 3 and 4.0.2a and it worked -->
<script type="text/javascript" src="behavior/lib/extjs41/ext-all-debug.js"> </script>
<script type="text/javascript" src="behavior/app.js"> </script>
</body>
</html>

skirtle
4 Apr 2012, 10:54 AM
I don't see the ExtJS CSS. Is it included in scrumpit-main.css?

I tried your example and it worked fine for me. Could you post the full stacktrace?

Which browsers are you testing in?

abcdef
4 Apr 2012, 11:24 AM
I don't see the ExtJS CSS. Is it included in scrumpit-main.css?

I tried your example and it worked fine for me. Could you post the full stacktrace?

Which browsers are you testing in?

Thank you for your promptness and continued support!

I'm using compass - yes it is included in scrumpit-main.css. Contents of its scss (basically copied the template file):



// Unless you want to include all components, you must set $include-default to false
// IF you set this to true, you can also remove lines 10 to 38 of this file
$include-default: false;


// Insert your custom variables here.
// $base-color: #aa0000;


// Tooltip
$tip-background-color: #FFFFA9;
$tip-border-color: #666666;
$tip-border-width: 1px;
$tip-border-radius: 0px;
$tip-body-color: #000;
$tip-body-padding: 5px 15px 5px 15px;


// Window
$window-base-color: #FFF;


@import 'ext4/default/all';


// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include extjs-boundlist;
@include extjs-button;
@include extjs-btn-group;
@include extjs-datepicker;
@include extjs-colorpicker;
@include extjs-menu;
@include extjs-grid;
@include extjs-form;
@include extjs-form-field;
@include extjs-form-fieldset;
@include extjs-form-checkboxfield;
@include extjs-form-checkboxgroup;
@include extjs-form-triggerfield;
@include extjs-form-htmleditor;
@include extjs-panel;
@include extjs-qtip;
@include extjs-slider;
@include extjs-progress;
@include extjs-toolbar;
@include extjs-window;
@include extjs-messagebox;
@include extjs-tabbar;
@include extjs-tab;
@include extjs-tree;
@include extjs-drawcomponent;
@include extjs-viewport;


// This line changes the location of your images when creating UIs to be relative instead of within the ExtJS directory.
// You MUST set this to true/string value if you are creating new UIs + supporting legacy browsers.
// This only applies to new UIs. It does not apply to default component images (i.e. when changing $base-color)
// The value can either be true, in which case the image path will be "../images/"
// or a string, of where the path is
$relative-image-path-for-uis: "../images/scrumpit/"; // defaults to "../images/" when true


I'm getting the error in Safari (Version 5.1.5 (7534.55.3)), Chrome (18.0.1025.142), and Firefox (12.0).

I just used Firebug and it shows:

An invalid or illegal string was specified

el.insertAdjacentHTML(hashVal[0], html);

ext-all-dev.js
Line 19794

I haven't used Firebug in a long time, but let me see if I can gather more information.

abcdef
5 Apr 2012, 12:13 PM
Ok I have more information now:

In Firebug, I found the problem to be here:


Line 19794 of ext-all-dev.js - the actual error statement: 'An invalid or illegal string was specified'




el.insertAdjacentHTML(hashVal[0], html);



On further inspection, I found that hashVal[0] had the value of 'AfterBegin', which I thought was ok. I then inspected html's value, which turned out to be:



<div id="panel-1010" class="x-panel x-fit-item x-panel-default"> <div id="panel-1010_header" class="x-panel-header x-docked x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top"> <div id="panel-1010_header-body" class="x-panel-header-body x-panel-header-body-default x-panel-header-body-horizontal x-panel-header-body-default-horizontal x-panel-header-body-top x-panel-header-body-default-top x-panel-header-body-docked-top x-panel-header-body-default-docked-top x-panel-header-body-default-horizontal" x-panel-header-body-default-top" x-panel-header-body-default-docked-top"> <div id="panel-1010_header-innerCt" class="x-box-inner " role="presentation"> <div id="panel-1010_header-targetEl" style="position:absolute;width:20000px;left:0px;top:0px;height:1px"> <div id="panel-1010_header_hd" class="x-component x-panel-header-text-container x-box-item x-component-default" style="text-align:left;"><span id="panel-1010_header_hd-textEl" class="x-panel-header-text x-panel-header-text-default">test</span></div> </div> </div> </div> </div> <div id="panel-1010-body" class="x-panel-body x-panel-body-default x-panel-body-default"> test <div id="panel-1010-clearEl" class="x-clear" role="presentation"></div> </div></div>


If you look at this line:



<div id="panel-1010_header-body" class="x-panel-header-body x-panel-header-body-default x-panel-header-body-horizontal x-panel-header-body-default-horizontal x-panel-header-body-top x-panel-header-body-default-top x-panel-header-body-docked-top x-panel-header-body-default-docked-top x-panel-header-body-default-horizontal" x-panel-header-body-default-top" x-panel-header-body-default-docked-top">


There seems to be a problem with '"' generation. The console also complains about an illegal/invalid string as noted above.


Also, I have enableQuickTips set to false.


Does this information help? Can someone help me with this?

abcdef
6 Apr 2012, 9:33 AM
Any ideas here please? I need to get my current app running on 4.1 by next week, and I'm still stuck at the very beginning! Any help is much appreciated!

abcdef
9 Apr 2012, 11:24 AM
Here is the detailed error that I received from ext-all-dev when I used the 'title' configuration:



Uncaught TypeError: Cannot read property 'dom' of null
Ext.define.finishRender ext-all-dev.js:37503
Ext.define.finishRenderItems ext-all-dev.js:60939
Ext.define.finishRender ext-all-dev.js:106088
Ext.define.finishRenderChildren ext-all-dev.js:106821
Ext.define.afterRender ext-all-dev.js:37257
Base.implement.callParent ext-all-dev.js:6144
Ext.define.afterRender ext-all-dev.js:82814
Ext.define.finishRender ext-all-dev.js:37537
Ext.define.render ext-all-dev.js:37846
Ext.define.constructor ext-all-dev.js:65256
Base.implement.callParent ext-all-dev.js:6144
Ext.define.constructor ext-all-dev.js:82754
constructor ext-all-dev.js:6426
(anonymous function)
Ext.ClassManager.instantiate ext-all-dev.js:7912
(anonymous function) ext-all-dev.js:2965
Ext.apply.create ext-all-dev.js:5374
Ext.define.onBeforeLaunch ext-all-dev.js:142195
(anonymous function) ext-all-dev.js:142164
isEvent ext-all-dev.js:13940
fire ext-all-dev.js:14093
Ext.apply.readyEvent.event.fire ext-all-dev.js:14293
Ext.apply.fireReadyEvent ext-all-dev.js:14391
Ext.apply.onDocumentReady ext-all-dev.js:14414
Ext.apply.onReady.fn ext-all-dev.js:9692
Ext.apply.triggerReady ext-all-dev.js:9678
Ext.apply.require ext-all-dev.js:9511
Ext.apply.triggerReady ext-all-dev.js:9666
Ext.apply.refreshQueue ext-all-dev.js:9152
Ext.apply.refreshQueue ext-all-dev.js:9182
Ext.apply.onFileLoaded ext-all-dev.js:9583
(anonymous function) ext-all-dev.js:2951
Ext.apply.injectScriptElement.onLoadFn ext-all-dev.js:9208


Also, my page is being dynamically rendered by PHP using XSL.

Here is a snippet of the XSL:



<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml">




<!-- Define output as xml utf-8 without indenting -->
<xsl:output method="xml" encoding="utf-8" indent="no" doctype-public="-//W3C//DTD XHTML 1.1//EN" doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" />


<!-- Provide general layout of page and apply-templates for ... -->
<xsl:template match="/MyApp">
<html xml:lang="en">
<head>
<title><xsl:call-template name="title" /></title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
</head>
<body>
...
</body>
</html>
</xsl:template>


Please help!

skirtle
9 Apr 2012, 11:47 AM
On this occasion the stacktrace doesn't look much help to me.

You need to work on extracting a simple test case. To the best of my knowledge nobody else has reported any of the apocalyptic explosions that you're seeing. That suggests there is something peculiar about your app. That's not to say that it isn't a bug in the library, it quite possible is, but we can't help you without a decent test case.

A decent test case means one that actually fails. All the ones you've posted so far work absolutely fine outside of the context of your app.

Try eliminating outside influences. Don't use PHP, XSL, other libraries, etc. Just come up with a plain HTML page that includes ExtJS and try to induce the problem. Keep it really simple. If that doesn't fail, introduce the other factors gradually until it does. It should only take half an hour to find the tipping point.

It seemed like you might be on the right track with the quotes issue.

skirtle
9 Apr 2012, 2:17 PM
I just had an epiphany. Something you mentioned on your other thread suddenly turned on a light.

It'll be because you're using XHTML. XHTML is activated by a content-type on the server response, not a doctype, so even though I was using your markup I still wasn't actually using XHTML.

As soon as I reconfigured my server to use the correct content-type it blew up that page.

I'll have a quick dig to see how easy this will be to fix.

abcdef
9 Apr 2012, 2:39 PM
I just had an epiphany. Something you mentioned on your other thread suddenly turned on a light.

It'll be because you're using XHTML. XHTML is activated by a content-type on the server response, not a doctype, so even though I was using your markup I still wasn't actually using XHTML.

As soon as I reconfigured my server to use the correct content-type it blew up that page.

I'll have a quick dig to see how easy this will be to fix.

Aaah! Ok awesome! Thanks a ton!!

abcdef
11 Apr 2012, 1:05 PM
I just had an epiphany. Something you mentioned on your other thread suddenly turned on a light.

It'll be because you're using XHTML. XHTML is activated by a content-type on the server response, not a doctype, so even though I was using your markup I still wasn't actually using XHTML.

As soon as I reconfigured my server to use the correct content-type it blew up that page.

I'll have a quick dig to see how easy this will be to fix.

Were you able to find anything on this one? Thanks!

skirtle
12 Apr 2012, 12:45 PM
The title and quicktip issues you reported are fixed under EXTJSIV-5920 along with a number of other XHTML problems I found. The fixes aren't in RC3 but they've been merged since so they should be in the next nightly build.

abcdef
12 Apr 2012, 1:00 PM
The title and quicktip issues you reported are fixed under EXTJSIV-5920 along with a number of other XHTML problems I found. The fixes aren't in RC3 but they've been merged since so they should be in the next nightly build.

This is awesome! Thanks a ton! I'll try it out as soon as I can get my hands on the build!

lowbasic
25 Jun 2013, 6:57 AM
i'm having the same issue in 4.2.1
in my case the problem seems to be an invalid xhtml structure where an image has the 'role' property set twice

in my case i'm locked to XHTML, any solution?