PDA

View Full Version : WebKitPoint is undefined



dewangan
23 May 2012, 12:48 AM
Hi,

I am using viewport, which is having one north, west and center panel. In center panel i am populating another panel, but i am getting 'WebKitPoint' is undefined javascript error. Please help me to solve this issue.

I am using two js for that.
1. tree_menu.js


Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', './extjs/ux');


Ext.require([
'Ext.panel.Panel',
'Ext.tree.TreePanel',
'Ext.data.TreeStore',
'Ext.data.Model'
]);


var GRID_ID = '';
var menus = '';


Ext.define('Menu', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'text', type: 'string' },
{name: 'url', type: 'string'}
]
});


var topPanel = new Ext.panel.Panel({
id : 'northID',
bodyStyle : 'background-color:#363368;font-size:25px;color:white',
layout : 'column',
frame : false,
height : 50,
monitorResize : true,
// layout : 'fit',
border : false,
iconCls: 'add',
// tbar : tb2,
items : [
{
xtype : 'label',
id : 'mnemonicName',
text : 'Testing screen',
style : 'margin:10px 10px'
} ]
});


var store = new Ext.data.TreeStore({
model : 'Menu',
proxy: {
type: 'ajax',
url : 'treeMenuAction',
method : 'POST'
},
root: {
text: 'root',
id: '',
expanded: true
}
});




Ext.onReady(function() {

var myMask = new Ext.LoadMask(Ext.getBody(), {msg : "Please wait, Loading menu....."});
Ext.Ajax.on('beforerequest', myMask.show, myMask);
Ext.Ajax.on('requestcomplete', myMask.hide, myMask);
Ext.Ajax.on('requestexception', myMask.hide, myMask);

var myview = Ext.create('Ext.container.Viewport', {
layout: 'border',
renderTo : Ext.getBody(),
items: [{
region: 'north',
border: false,
margins: '0 0 5 0',
items: [topPanel]
}, {
region: 'west',
id : 'westView',
collapsible: true,
title: 'Navigation',
width: 150,
items: [ Ext.create('Ext.tree.TreePanel', {
id: 'treePanel',
title: 'Simple Tree',
width: 150,
height: 500,
store: store,
rootVisible: false,
scroll: true,
//layout: 'border',
useArrows: true,
//renderTo: document.body,
listeners:{
itemclick: function(treePanel, store){
if(store.data.url == '') {
var Enode=treePanel.getTreeStore().getNodeById(store.internalId);

if (Enode.isExpanded()) {
Enode.collapse();
} else{
Enode.expand();
};
} else {

Ext.get('contentPanel').load({
url: store.data.url,
method : 'POST',
params: {
loadPage : 'ReferenceKey',
id : store.data.id
},
scripts : true,
//renderer: 'data',
autoLoad: true
});
}
}
}


}) ]
},
Ext.create('Ext.panel.Panel',{
region: 'center', // a center region is ALWAYS required for border layout
id: 'contentPanel',
layout : 'fit'
})]
});


});


2. admin.js


Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', './extjs/ux');


Ext.require([
'Ext.panel.Panel',
'Ext.toolbar.Toolbar',
'Ext.menu.Menu'
]);


var centerPanelId = '';
var GRID_ID = '';
var temp = null;






var menuid = '17';


var centerPanelAccessor;


var tb = new Ext.Toolbar({
id : 'mainToolBar'
});


tb.add('-');
tb.add(' ');


function convertStringToFunction(menus) {
var m = [];
if (menus.length != undefined) {
for (var j = 0; j < menus.length; j++) {
m.push(helper(menus[j]));
}
return m;
} else {
return helper(menus);
}


}




function helper(menus) {
if (menus.handler != undefined) {
menus.handler = eval(menus.handler);
}
if (menus.menu != undefined) {
if (menus.menu.items.length != undefined) {
for (var i = 0; i < menus.menu.items.length; i++) {
if (menus.menu.items[i].handler != undefined) {
temp=menus.menu.items[i].url;
if(temp != undefined) {
var newFunction=function(){pageView(this.url);};
menus.menu.items[i].handler=eval(newFunction);
}
}
if (menus.menu.items[i].menu != undefined) {
helper(menus.menu.items[i].menu);
}
}
} else {// if the there is only one item


var aItem = menus.menu.items;
if (aItem.handler != undefined) {
menus.menu.items.handler = eval(aItem.handler);
}
if (aItem.menu != undefined) {
helper(aItem.menu);
}
}
} else if(menus.items != undefined) {
if (menus.items.length != undefined) {
for (var i = 0; i < menus.items.length; i++) {
if (menus.items[i].handler != undefined) {
var temp=menus.items[i].url;
if(temp != undefined) {
var newFunction=function(){pageView(this.url);};
menus.items[i].handler= eval(newFunction);
}
}
if (menus.items[i].menu != undefined) {
helper(menus.items[i].menu);
}
}
}
}


return menus;
}


function pageView(temp) {


var ePanel = Ext.getCmp(GRID_ID);
if (ePanel != undefined) {
ePanel.destroy();
}
GRID_ID = temp + 'PANEL_GRID';
var panelGrid = Ext.create('Ext.form.Panel',{
id : GRID_ID,
name : GRID_ID,
//region: 'center',
//autoScroll : true,
border : false,
layout : 'fit',
//monitorResize : true,
renderTo : 'contentPanel',
loader: {
url: temp,
method : 'POST',
params: {
loadPage : 'ReferenceKey'
},
scripts : true,
//renderer: 'data',
autoLoad: true
}
});
}


Ext.onReady(function() {
populateMenu();
});






function populateMenu() {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg : "Please wait, Menu Processing is going on.."});
Ext.Ajax.on('beforerequest', myMask.show, myMask);
Ext.Ajax.on('requestcomplete', myMask.hide, myMask);
Ext.Ajax.on('requestexception', myMask.hide, myMask);

Ext.Ajax.request({
url : 'subMenuAction',
method : 'POST',
params: {
id : menuid
},
success : function(result, request) {
var menus = convertStringToFunction(Ext.decode(result.responseText));
var menuWithSeperator=[];
for(var i=0;i<menus.length;i++){
menuWithSeperator.push(menus[i]);
tb.add(' ');
menuWithSeperator.push('-');
}
tb.add(menuWithSeperator);
}
});

var adminPanel = Ext.create('Ext.panel.Panel', {
id: 'adminPanel',
title: 'Admin Screen',
renderTo: 'contentPanel',
//region: 'center',
//layout: 'border',
border: false,
items: [
Ext.create('Ext.panel.Panel', {
id : 'adminMenuPanel',
name : 'adminMenuPanel',
//region : 'north',
autoScroll : true,
tbar:tb,
border : false
})
]


});
}

scottmartin
23 May 2012, 6:40 AM
What product are you using, touch?
You need to use a webkit based browser (chrome/safari) to run your app in a browser.

If this is not the case, please be more specific on your setup.

Regards,
Scott.

dewangan
23 May 2012, 11:41 PM
I am using ExtJS 4 and i am getting this problem in IE 8, when i am trying to access the menu in toolbar of center panel.

I have view port containing three panel:
1. North panel containing images.
2. West panel containing the menu in tree panel.
3. center panel which has toolbar containing the sub menu, based on the menu item selection from west panel. But during population of toolbar, i am getting WebKitPoint is undefined error in IE8.

Also the expand and collapse action is not working in west panel, once the toolbar is populated into center panel. I am getting nodeEl is null.

Please help to resolve this.

Thanks,
Ashish

scottmartin
24 May 2012, 6:43 AM
In reviewing your code, you have numerous issues that need to be resolved:

-Viewport does not need a renderTo, this is done automatically.
-I see you have additional renderTo calls that are commented out, remove these.
-I see that you are rendering to a panel in several places?
renderTo: 'contentPanel'
-You are issuing an ajax request to add items to your toolbar, but immediately accessing it in your adminPanel?
-You are nesting panels inside of other panels (topPanel inside of north panel, treepanel inside west panel)
-Global variables all over the place
-You have 'id' usage all over the place, bad practice.

To sum this up, you really need to take a hard look at your code. You are having serious issues the construction of your application.

Regards,
Scott.

scottmartin
24 May 2012, 7:15 AM
This issue on the WebKitPoint error. I noticed that you have onReady on your first snippet, but in the 2nd snippet, you only have it around your populateMenu. It could be that the browser detection is not working as expected in the other functions you have defined, hence it is trying to reference webkit related code.

Regards,
Scott.

dewangan
25 May 2012, 3:02 AM
Hi Scott,

I was getting that error because of the duplicate id , due to global variable. I have removed that. I have implemented most of your suggestion. but now i am getting "getAlignToXY(): Attempted to align an element that doesn't exist", when i am clicking on toolbar. This error i am getting even with the static menu.

dewangan
25 May 2012, 3:25 AM
If i am not using " renderTo : 'contentPanel' " my toolbar is not populating into center penal. Is there any other way to render.
I am providing my modified code with static data:

tree_menu.js


Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', './extjs/ux');


Ext.require([
'Ext.panel.Panel',
'Ext.tree.TreePanel',
'Ext.data.TreeStore',
'Ext.data.Model'
]);


Ext.define('Menu', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'text', type: 'string' },
{name: 'url', type: 'string'}
]
});








var store = Ext.create('Ext.data.TreeStore', {
model : 'Menu',
root: {
expanded: true,
children: [
{ text: "detention", leaf: true, url:'admin.action' },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true, url:'report.action' },
{ text: "algebra", leaf: true, url:'algebra.action'}
] },
{ text: "buy lottery tickets", leaf: true, url:'lottery.action' }
]
}
});




Ext.onReady(function() {

var myMask = new Ext.LoadMask(Ext.getBody(), {msg : "Please wait, Loading menu....."});
Ext.Ajax.on('beforerequest', myMask.show, myMask);
Ext.Ajax.on('requestcomplete', myMask.hide, myMask);
Ext.Ajax.on('requestexception', myMask.hide, myMask);

var myview = Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [
Ext.create('Ext.panel.Panel',{
bodyStyle : 'background-color:#363368;font-size:25px;color:white',
layout : 'column',
region : 'north',
frame : false,
height : 50,
monitorResize : true,
border : false,
iconCls: 'add',
items : [
{
xtype : 'label',
text : 'Testing screen',
style : 'margin:10px 10px'
} ]
}),
Ext.create('Ext.tree.TreePanel', {
title: 'Simple Tree',
region: 'west',
width: 150,
store: store,
rootVisible: false,
scroll: true,
useArrows: true,
listeners:{
itemclick: function(treePanel, store){
if(store.data.url == '') {
var Enode=treePanel.getTreeStore().getNodeById(store.internalId);

if (Enode.isExpanded()) {
Enode.collapse();
} else{
Enode.expand();
};
} else {
Ext.get('contentPanel').load({
url: store.data.url,
method : 'POST',
params: {
loadPage : 'ReferenceKey',
id : store.data.id
},
scripts : true,
autoLoad: true
});
}
}
}
}) ,
Ext.create('Ext.panel.Panel',{
region: 'center',
id: 'contentPanel'
})
]
});

});



2. admin.js


Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', './extjs/ux');


Ext.require([
'Ext.panel.Panel',
'Ext.toolbar.Toolbar',
'Ext.menu.Menu'
]);


Ext.onReady(function() {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg : "Please wait, Menu Processing is going on.."});
Ext.Ajax.on('beforerequest', myMask.show, myMask);
Ext.Ajax.on('requestcomplete', myMask.hide, myMask);
Ext.Ajax.on('requestexception', myMask.hide, myMask);


var menu = Ext.create('Ext.menu.Menu', {
items: [
{
text: 'High'
}, '-', {
text: 'Low',
menu: {
items : [ {
text : 'Low001',
url : 'low001.action'
}]
}
}
]
});

var tb1 = Ext.create('Ext.toolbar.Toolbar');

tb1.add({
text:'Button w/ Menu',
iconCls: 'bmenu',
menu: menu
});


var adminPanel = Ext.create('Ext.panel.Panel', {
title: 'Admin Screen',
renderTo: 'contentPanel',
border: false,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [ tb1 ]
}]

});
});

scottmartin
25 May 2012, 4:52 AM
From the API:


Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render and manage its child items.

You need to make the admin panel an item of the 'contentPanel' panel and setup a layout so it can render and manage the child item.

Scott.

dewangan
25 May 2012, 4:54 AM
Do you mean to render the toolbar thru below code:



var tb1 = Ext.create('Ext.Toolbar');
tb1.render('contentPanel');
tb1.suspendLayouts();

tb1.add({
text:'Button w/ Menu',
menu: menu
});

tb1.resumeLayouts(true);

if not, can you plz provide the code to do so.... i am not getting your point...

Regards,
Ashish