Develop Reference

High charts and expression language issue - Syntax error on token "{" expected

I am using the below script from highCharts and I am trying to make the data supplied to the charts dynamic using jsp and EL. However, when I try to use EL for substituting the number field, I am getting the error "Syntax error on token "{",. expected"
Please find the snippet below
<script src="jquery.min.js"></script>
<script>
$(function() {
// Create the chart
$('#resourceutilization')
.highcharts(
{
chart : {
type : 'column'
},
credits : {
enabled : false
},
title : {
text : 'Resource Utilization'
},
subtitle : {
text : 'Project name : '
},
xAxis : {
type : 'category'
},
yAxis : {
title : {
text : 'Percentage Resource share'
}
},
legend : {
enabled : false
},
plotOptions : {
series : {
borderWidth : 0,
dataLabels : {
enabled : true,
format : '{point.y:.1f}%'
}
}
},
tooltip : {
headerFormat : '<span style="font-size:11px">{series.name}</span><br>',
pointFormat : '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series : [ {
name : 'Resources',
colorByPoint : true,
data : [ {
name : '${drillDownProject.resourceName[0]}',
y : ${drillDownProject.resourceContrib[0]}, // Issue here . This is a number
}, {
name : '${drillDownProject.resourceName[1]}',
y : ${drillDownProject.resourceContrib[1]}, // and here. This is a number
}, {
name : '',
y : 0,
}, {
name : '',
y : 0,
}, {
name : '',
y : 0,
} ],
} ],
//Drill down start
// Drill Down End
});
});
</script>

You could try placing in a JS variable and check,
<script type="text/javascript">
var resourceName = '${drillDownProject.resourceName[0]}';
var contribution = '${drillDownProject.resourceContrib[0]}';
....
{
name : resourceName,
y : contribution,
},
</script>
Make sure you are using Servlet 2.4 or above. Check your web.xml for servlet version. BalusC already answered how-to-pass-an-el-variable-to-javascript. Also check this.

ExtJs put a tooltip to the horizontal scroll controls Tab Panel

I have a tab panel with some items inside them, when I add many elements the panel puts a horizontal movement controlers, how can i do to put a tooltip in this controls?
This is the definition of my tab Panel:
var tabPanel = Ext.create('Ext.tab.Panel',{
id: 'tabTabla',
items: [{
title: 'list1',
tooltip: 'list1',
items:[tree]
}, {
title: 'list2',
tooltip: 'list2',
autoWidth : true,
autoHeight : true,
plain : true,
defaults : {
autoScroll : true,
bodyPadding : 0
},
items: [{
xtype : 'label',
text : 'list description.',
},
gridV]
},{
title: 'list3',
tooltip: 'list3',
autoWidth : true,
autoHeight : true,
plain : true,
defaults : {
autoScroll : true,
bodyPadding : 0
},
items: [
gridC
]
}]
});
var scrollers = Ext.select('.x-box-scroller-tab-bar').elements;
Ext.each(scrollers, function(scroll, id) {
scroll.title = (id == 0 ? 'left click' : 'right click');
});
In this tab Panel I add more panels:
Ext.apply(this, {
title: 'TITLE',
constrain: true,
header : {
titlePosition : 2,
titleAlign : 'center'
},
closable : false,
x : 20,
y : 270,
layout : 'fit',
animCollapse : true,
collapsible : true,
collapseDirection : Ext.Component.DIRECTION_LEFT,
items: [tabPanel]
});

Maybe this is not good solution, but you can use it until you find better solution. Fiddle : https://fiddle.sencha.com/#fiddle/tng
var scrollers = Ext.select('.x-box-scroller-tab-bar');
Ext.each(scrollers, function(scroll, id) {
scroll.set({
"data-qtip": id == 0 ? 'left click' : 'right click'
});
});
Or
var scrollers = Ext.select('.x-box-scroller-tab-bar').elements;
Ext.each(scrollers, function(scroll, id) {
scroll.title = (id == 0 ? 'left click' : 'right click')
});

ExtJs : TypeError: this.layout.layout is not a function

In my J2EE web application there is a window with a form. It is showing when user clicks a button.
new Ext.Button({
text : 'Assign Vehicle',
handler : function() {
showVehicleAssignWin();
}
}
My showVehicleAssignWin() function is in TourPlan.js file. This is my TourPlan.js file.
function showVehicleAssignWin(){
assignVehicleWin.show(this);
}
My assignVehicleWin window is declaring in the DataEntryForms.js file.
var assignVehicleWin;
var assignVehicleForm = new Ext.FormPanel({
frame : true,
labelWidth : 200,
labelAlign : 'left',
// renderTo:document.body,
autoScroll : true,
// defaultType: 'displayfield',
bodyStyle : {
"background-color" : "#000000",
"padding" : "10px"
},
/*
* layout : { type : 'vbox', align : 'center' }, defaults : { labelWidth :
* 200, padding : '10 10 10 25' },
*/
items : [ {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Vehicle Registration Number',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Device ID',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Default Rep',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Driver',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Assistant',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Porter 1',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Porter 2',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Porter 3',
editable : false,
},
],
buttons : [ {
text : 'Delete',
handler : function() {
}
}, {
text : 'View',
handler : function() {
}
}, {
text : 'New',
handler : function() {
}
}, {
text : 'Exit',
handler : function() {
assignVehicleWin.hide();
}
} ]
});
assignVehicleWin = new Ext.Window({
title : 'Vehicle Assigning',
layout : 'fit',
// autoScroll: true,
// y: 120,
width : 480,
height : 530,
minWidth : 480,
minHeight : 530,
resizable : false,
draggable : true,
// modal: true,
plain : true,
// bodyStyle:'padding:8px;',
// buttonAlign:'center',
closeAction : 'hide',
// floating: true,
closable : true,
items : [ assignVehicleForm ]
});
I have to click the button two times to show the window. And also the window is showing up but it's empty. The FireBug console says
TypeError: this.layout.layout is not a function
I am using ExtJs 3.0.
Anyone has and idea what's going on here? Please help me to correct this error.
Thank You

i have prepared one sample code for you try this. i hope it will help you.
there is no need to use Ext.namespace();.
WindowLayout.js
var assignVehicleWin;
var assignVehicleForm = new Ext.FormPanel({
frame : true,
labelWidth : 200,
labelAlign : 'left',
autoScroll : true,
bodyStyle : {
"background-color" : "#000000",
"padding" : "10px"
},
defaults : {
},
items : [{
fieldLabel : '00Vehicle Registration Number',
},{
fieldLabel : '00Device ID'
},{
fieldLabel : '00Default Rep'
}, {
fieldLabel : '00Driver'
}, {
fieldLabel : '00Assistant'
}, {
fieldLabel : '00Porter 1'
}, {
fieldLabel : '00Porter 2'
}, {
fieldLabel : '00Porter 3'
}],
buttons : [{
text : 'Delete',
handler : function() {
}
},{
text : 'View',
handler : function() {
}
},{
text : 'New',
handler : function() {
}
},{
text : 'Exit',
handler : function() {
assignVehicleWin.hide();
}
}]
});
assignVehicleWin = new Ext.Window({
title : 'Vehicle Assigning',
layout : 'fit',
width : 480,
height : 530,
minWidth : 480,
minHeight : 530,
resizable : false,
draggable : true,
plain : true,
closeAction : 'hide',
items : assignVehicleForm
});
Panel.js
Ext.onReady(function(){
var BorderEx = new Ext.Panel({
renderTo : Ext.getBody(),
width : 300,
height : 300,
style : "margin : 10px 10px 10px 10px;", /* MARGINS config used in boxlayout Or border layout only */
title : 'test for stackoverflow',
monitorResize : true,
items : [{
xtype : 'button',
width : 50,
height : 50,
text : 'Open Window',
handler : function() {
assignVehicleWin.show();
}
}]
});
});
NOTE: make sure this both files are registered in index.html

How to add itemtap

I have a list and I cant get items in the list to be clickable. I have onItemDisclosure and that should work but it is not. I would like the whole row to be clickable but I cant seem to get anything to work.
onItemDisclosure : function(record, btn, index) {
//window.location = 'http://www.google.com';
}
Here is my full source code
Ext.ns("Course", "Course.stores");
Course = new Ext.Application({
defaultTarget : 'viewport',
name : 'Course',
launch : function() {
console.log('begin');
this.viewport = new Ext.Panel({
fullscreen : true,
dockedItems : [ {
title : 'Course Catalog',
xtype : 'toolbar',
ui : 'light',
dock : 'top'
} ],
layout : 'fit',
scroll : 'vertical',
items : [ {
xtype : 'list',
itemTpl : '<span id="{letter}">{course}</span>',
store : Course.stores.Properties,
singleSelect : true,
itemSelector : 'span.id',
onItemDisclosure : function(record, btn, index) {
//window.location = 'http://www.google.com';
}
} ],
flex : 1
});
}
});
Ext.regModel('Properties', {
fields : [ {
name : 'letter',
type : 'string'
}, {
name : 'course',
type : 'string'
} ]
});
Course.stores.Properties = new Ext.data.Store({
model : 'Properties',
sorters: 'letter',
getGroupString : function(record) {
return record.get('letter')[0];
},
proxy : {
type : 'ajax',
url : '../lib/course_catalog.php',
reader : {
type : 'json',
}
},
autoLoad : true
});

Try something like this:
items : [ {
xtype : 'list',
itemTpl : '<span id="{letter}">{course}</span>',
store : Course.stores.Properties,
listeners: {
scope : this,
itemtap : function(foo, bar, etc) {
doSomething...
}
} ],

The reason that taps are not being handled is because you are overriding the itemSelector config:
itemSelector : 'span.id',
You should not do this, as Ext.List expects it to be a certain internally-set value in order to handle events on items properly. Simply removing this from your config should make it start working.

jsTree copy_modifier : false -- Does Not prevent node copy!

Here is my code, its supposed to prevent node copy when using ctrl key, but it still allows copy and doesn't prevent it.
I use "copy_modifier" : false as per the documentation - any idea why it doesn't work?
I am using the stable version "jsTree 1.0-rc3" downloaded via the big download button on the website only a few days ago.
$(function () {
$("#jsTree")
.jstree({
"plugins" : ["themes","html_data","ui","crrm","hotkeys","types","dnd","contextmenu"], contextmenu: {items: customMenu}
//"core" : { "initially_open" : [ "node_root" ] }
,"types" : {
"valid_children" : [ "group","unknowngroup" ],
"types" : {
"group" : {
"valid_children" : ["event"],
"start_drag" : false,
"move_node" : false,
"delete_node" : false,
"remove" : false,
"icon" : {
"image" : "layout/img/folder.png"
},
},
"unknowngroup" : {
"valid_children" : ["event"],
"start_drag" : false,
"move_node" : false,
"delete_node" : false,
"remove" : false,
"icon" : {
"image" : "http://www.veryicon.com/icon/16/System/Pleasant/Recycle%20Bin%20e.png"
},
},
"event" : {
"valid_children" : "none",
"icon" : {
"image" : "http://ouccc.objectis.net/events/aggregator/previous/event_icon.gif"
},
"start_drag" : true,
"move_node" : true,
"delete_node" : false,
"remove" : false
}
},
"dnd" : {
"copy_modifier" : false,
"drag_check" : function (data) {
return {
after : true ,
before : true ,
inside : true
};
}
}
}
}).bind("rename.jstree", function (e, data) {
if(prefix!="")
{
commitGroupRename(data.rslt.obj.attr("id").substring(11),data.rslt.new_name);
var text= prefix + data.rslt.new_name;
$("#jsTree").jstree('rename_node', data.rslt.obj, text );
prefix="";
}
}).bind("loaded.jstree", function (event, data) {
//$("#jsTree").jstree("open_all");
}).bind("dblclick.jstree", function (event) {
var node = $(event.target).closest("li");
//var data = node.data("jstree");
if ($(node).attr('rel')=="group" && prefix =='')
{
var text = $("#jsTree").jstree('get_text',node);
prefix = text.substring(0,5);
text = text.substring(5);
$("#jsTree").jstree("rename_node", node , text );
$("#jsTree").jstree("rename",node);
}
}).bind("select_node.jstree", function (node, ref_node) {
var theRealNode = $.jstree._focused().get_selected();
if (theRealNode.attr('rel')=="group")
{
$('#btnRenameSelected').attr("disabled", false);
$('#btnRenameSelected').removeClass("ui-state-disabled");
}
else
{
$('#btnRenameSelected').attr("disabled", true);
$('#btnRenameSelected').addClass("ui-state-disabled");
}
});
});

Fixed - as you can see "dnd" is actually inside "types" scope. Doh! - will accept when so allows.