I have three files: form.html, report.html, console.html. I am facing two problems with console.html page.
I am trying to load 'report.html' but only static content is loaded,
extJs components are not loaded or say script is not executed.
I am trying to load 'form.html'. In this code, i am able to load form.html along with extJs components successfully. But the problem is that once tab2 is loaded, i am not able to activate/see tab1.
Appreciate any help. Any example of autoLoad without any error will do.
Console.html is as below:
<head>
<title>Sample Console</title>
<link rel="stylesheet" type="text/css" href="../ExtJs/resources/css/ext-all.css" />
<script type="text/javascript" src="../ExtJs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: 'frmSampleConsole',
split: true,
height : '100%',
width : '100%',
layout:'border',
defaults: {
collapsible: true,
split: true
//bodyStyle: 'padding:15px'
},
items:
[
{
title: 'Report',
region : 'west',
width : 280,
autoLoad : 'report.html',
contentType: 'html',
scripts : true
}
,
{
id :'tabpanel',
xtype:'tabpanel',
title: 'Main Content',
collapsible: false,
region:'center',
items : [
{
id : 'tab1',
title: 'Tab1',
collapsible: false,
margins: '5 0 0 0',
activeTab:0,
items: [
{
html : 'Sample html content'
}
]
},
{
id :'tab2',
title : 'Tab2',
layout : 'fit',
closable: true,
loader: {
url: 'form.html',
contentType: 'html',
autoload: true,
loadMask: true,
scripts: true
},
listeners: {
render: function(tab) {
tab.loader.load();
}
}
}
]
}
]
});
});
</script>
</head>
<body>
<div id = 'frmSampleConsole'></div>
</body>
</html>
your need to set "scripts: true," then your extjs script are work.
Related
I am trying to bind list which i am populating after receiving response from API. I can see the objects into the list but i still didn't understand why kendo grid is not binding datasource. i have code as below.
vm.getAccounts = function () {
acctSearchService.searchAccounts(null, vm.AccountSearchModel)
.then(getAccountsSuccess, getAccountsFailure);
}
vm.accountGridData = [];
function getAccountsSuccess(response) {
vm.accountGridData.push(response.model);
return vm.accountGridData;
}
i am getting result into vm.accountGridData after receiving response from API call and i am trying to bind that to datasource of kendo grid as below.
$("#grid").kendoGrid({
dataSource: { data: vm.accountGridData },
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: vm.mainGridColumns
});
Do i need to do anything else to get the data ?
You need to create a directive like this:
app.directive('myDirective', function () {
return {
restrict: 'EA',
scope: {},
template: [].join(''),
controllerAs: 'vm',
controller: function () {
var vm = this;
vm.getAccounts = function () {
acctSearchService.searchAccounts(null, vm.AccountSearchModel).then(getAccountsSuccess, getAccountsFailure);
}
vm.accountGridData = [];
function getAccountsSuccess(response) {
vm.accountGridData.push(response.model);
return vm.accountGridData;
}
},
link: function () {
$("#grid").kendoGrid({
dataSource: { data: vm.accountGridData },
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: vm.mainGridColumns
});
}
};
});
And in your html:
<div my-directive></div>
<div id="grid"></div>
You dont need data property in your datasource if you don't implement custom read function for it.
Datasource property should be an array or kendo-datasource object.
Try this:
$("#grid").kendoGrid({
dataSource: vm.accountGridData,
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: vm.mainGridColumns
});
And checkout grid documentation: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid
Finally i found the way after fighting. it's in simple one step.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.bootstrap.mobile.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.silver.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid k-scope-field="grid" options="mainGridOptions"></kendo-grid>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope, $http){
$scope.data = new kendo.data.ObservableArray([]);
$http({
method: 'GET',
type:"json",
url: '//jsonplaceholder.typicode.com/posts'
}).then(function successCallback(response) {
$scope.grid.dataSource.data(response.data);
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
$scope.mainGridOptions = {
dataSource: {
data: $scope.data,
pageSize: 5
},
sortable: true,
pageable: true,
filterable: {
mode: "row"
},
resizable: true,
columns: [{
field: "userId",
title: "userId",
width: "120px"
},{
field: "id",
title: "ID",
width: "120px"
},{
field: "title",
width: "120px"
},{
field: "body",
width: "120px"
}]
};
})
</script>
</body>
</html>
i have json encoded data set as below ( i use php for get record from mYSQL and convert to json)
[{"CELL_NAME":"WELI01A","CI":1},{"CELL_NAME":"WELI02A","CI":2},{"CELL_NAME":"WELI02P","CI":3},{"CELL_NAME":"WELI02Q","CI":7},{"CELL_NAME":"WELI02B","CI":8},{"CELL_NAME":"COL001A","CI":11},{"CELL_NAME":"COL001B","CI":12},{"CELL_NAME":"COL001C","CI":13},{"CELL_NAME":"COL001P","CI":16},{"CELL_NAME":"COL001Q","CI":17},{"CELL_NAME":"COL001R","CI":18},{"CELL_NAME":"COL002A","CI":21},{"CELL_NAME":"COL002B","CI":22},{"CELL_NAME":"COL002C","CI":23},{"CELL_NAME":"COL002P","CI":26},{"CELL_NAME":"COL002Q","CI":27},{"CELL_NAME":"COL002R","CI":28},{"CELL_NAME":"COL003A","CI":31},{"CELL_NAME":"COL003B","CI":32},{"CELL_NAME":"COL003C","CI":33}]
i want to bind above data set with Echarts (baidu) , please find the my html code below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>READ JSON Example (getJSON)</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("dataload.php",function(result){
$.each(result, function(i, field){
$("#output").append("CELL NAME: "+ field.CELL_NAME + " CELL ID: "+field.CI +"<br/>");
});
});
});
</script>
<div id="output"></div>
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<script src="js/echarts-all.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
tooltip : {
trigger: 'axis'
},
legend: {
data:['Time','value']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : field.CELL_NAME
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'Time',
type:'bar',
data:field.CI
}
]
});
</script>
</body>
</html>
when i run this i only show the json output , it wont popup the chart , please be kind enough to help me to sort this
xAxis.data should be an array, series.data is array too.
you should formate your data at first then pass it to myChart.setOption as parameter.
put echarts.init and setOption in a function will be better
this is the example
I am using JTable(JQuery) for displaying certain records from database, (database is MySQL)
I am also inserting data using createAction of JTable. I have 3 field which displays date in JTable. The problem that i am facing is when add Type: 'date' for the field which displays date, jtable stops displaying records from database. but when i remove type: 'data' in field it again starts displaying data using listAction. I am not getting why this is happening?
I want create form to show datepicker and also want dates to get displayed in listAction.
Note: I am using yyyy-mm-dd format for date. the following code list record from database when type: 'date' is removed from dateApplied, startDate and endDate fields. but when type: 'date' is present in the code in these field it fails to display records.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# page import="java.util.ArrayList"%>
<%# page import="daobject.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="../css/metro/red/jtable.css" rel="stylesheet" type="text/css" />
<link href="../css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="../js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="../js/jquery.jtable.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery-ui.css" type="text/css">
<link rel="stylesheet" href="../css/calenderStyle.css" type="text/css">
<title>Leave Applications</title>
<script type="text/javascript">
$(document).ready(function () {
$('#StudentLeaveTableContainer').jtable({
title: 'Leave Applications',
actions: {
listAction: '/Final_Notebook/StudentLeaveCancelController?action=list',
createAction: '/Final_Notebook/StudentLeaveCancelController?action=create',
deleteAction: '/Final_Notebook/StudentLeaveCancelController?action=delete'
},
fields: {
To:{
title:'Application To',
create: true,
options: '/Final_Notebook/StudentLeaveCancelController?options=ApplicationTo',
list: false
},
leaveId:{
key: true,
create: false,
edit: true,
sorting: false,
list: false
},
name: {
title:'Name',
list: true,
create:false,
},
rollNo: {
title: 'Roll No',
width: '20%',
list: true,
edit:true,
create: false
},
leaveType: {
title: 'Type',
width: '20%',
options:{'personal':'personal','medical':'medical','other':'other'},
edit:false,
create: true,
list: true
},
leaveReason: {
title: 'Reason',
width: '30%',
type: 'textarea',
edit: false,
list: true,
create: true
},
dateApplied: {
title: 'Applied On',
width: '30%',
list: true,
create: true,
edit: true,
type: 'date',
displayFormat: 'yy-mm-dd'
},
startDate: {
title: 'From Date',
width: '30%',
list: true,
create: true,
edit: true,
type: 'date',
displayFormat: 'yy-mm-dd'
},
endDate: {
title: 'To Date',
width: '30%',
list: true,
create: true,
edit: true,
type: 'date',
displayFormat: 'yy-mm-dd'
},
days: {
title: 'Total Days',
width: '20%',
edit: false,
create: true,
list: true
},
status: {
title: 'Status',
width: '20%',
list: true,
edit: false,
create: false,
options: {'0':'pending', '1':'Apprtoved', '2':'Rejected'}
}
}
});
$('#StudentLeaveTableContainer').jtable('load');
});
</script>
</head>
<body>
<div style="width:70%;margin-right:20%;margin-left:20%;text-align:center;">
<h1>Leave Applications</h1>
<div id="StudentLeaveTableContainer"></div>
</div>
</body>
</html>
to display records try following:
dateApplied: {
title: 'Applied On',
width: '30%',
list: true,
create: true,
edit: true,
type: 'date',
displayFormat: 'yy-mm-dd',
display: function (data) {
return data.record.<your-field-name>;
},
},
I'm trying to update a highcharts highstock chart with live data from a json file on my server.
now I have a chart that gets its data from a json file (that I create with php that requests the data from my MySQL database) like so:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OKcoin Price LTCCNY</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$.getJSON('json/lastTradesOkcoinLTCCNY.json', function(data) {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'OkCoin Price LTCCNY'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'hour',
count: 6,
text: '6h'
}, {
type: 'hour',
count: 12,
text: '12h'
}, {
type: 'hour',
count: 24,
text: '24h'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'day',
count: 7,
text: '7d'
}, {
type: 'all',
text: 'All'
}],
selected: 2
},
xAxis: {
gridLineWidth: 1,
title: {
enabled: true,
text: 'Time',
style: {
fontWeight: 'normal'
}
}
},
yAxis: [{
title: {
text: 'Price LTCCNY'
},
gridLineWidth: 1,
minorTickInterval: 'auto',
minorTickColor: '#FEFEFE',
labels: {
align: 'right'
}
}],
plotOptions: {
series: {
lineWidth: 1
}
},
tooltip: {
valueDecimals: 5,
valuePrefix: '$ '
},
series : [{
name : 'LTCCNY Price',
data : data,
dataGrouping : {
units : [
['minute',
[1, 5, 10, 15, 30]
], ['hour', // unit name
[1]
]
]
}
}]
});
});
});
</script>
</head>
<body>
<script src="../Highstock/js/highstock.js"></script>
<script src="../Highstock/js/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
So far no problems, I get a chart from the json file. But of course it doesn't update if new data becomes available (only if I reload the page) .
What I want to do is after loading this chart, add live data to it as it becomes available.
something like this example, but instead of random data the chart will be updated with data from a (second) live updating json file on my webserver. The json file will be created by php (this part is working just fine) But I can't figure out how to add the data from the json file to the my existing highstock chart.
I also found
this this example on highcharts.com and that more or less does what I try to do, but I can't integrate the 'requestData' function into my existing chart.
So what I want to do is use the 'requestData' function from the second example with the high stock chart I already have. My second json file (with the live data) looks the same as in the second example (timestamp, price):
[1389022968000,173.3]
Can anyone help me a bit?
nevermind, I figured it out myself...
here's my solution:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OKCoin LTCCNY Price</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var chart; // global
function requestData() {
$.ajax({
url: 'tickOkCoinLTCCNY.json',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 2; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 10000);
},
cache: false
});
}
$(function() {
$.getJSON('../okcoin/json/lastTradesOkcoinLTCCNY.json', function(data) {
// set the allowed units for data grouping
var groupingUnits = [[
'minute', // unit name
[1,5,15,30] // allowed multiples
], [
'hour',
[1, 2, 3, 4, 6]
]];
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
events: {
load: requestData
}
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'hour',
count: 6,
text: '6h'
}, {
type: 'hour',
count: 12,
text: '12h'
}, {
type: 'hour',
count: 24,
text: '24h'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'day',
count: 7,
text: '7d'
}, {
type: 'all',
text: 'All'
}],
selected: 2
},
title: {
text: 'OKCoin LTCCNY Price'
},
xAxis: {
type: 'datetime',
gridLineWidth: 1,
title: {
enabled: true,
text: 'Time',
style: {
fontWeight: 'normal'
}
}
},
yAxis: [{
title: {
text: 'LTCCNY'
},
lineWidth: 2
}],
series: [{
name: 'LTCCNY',
data: data,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});
</script>
</head>
<body>
<script src="../Highstock/js/highstock.js"></script>
<script src="../Highstock/js/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
I have looked various question/answers on stackoverflow, but haven't found a solution.
When I use the first block of jqgrid code (data is local), the table and the data are displayed.
When I use the second block (data loaded from url), an empty table is displayed.
The strange part is that the local data is the actual content of the url file.
So I had assumed that the behavior would be identical.
Why can I not display the data using the url,
when the same data, if copied into the code, is displayed?
The HTML (calls mytest.js which contains the jqgrid code):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery-ui-1.8.23.custom.css" />
<link rel="stylesheet" href="ui.jqgrid.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery-ui-1.8.23.custom.min.js"></script>
<script src="grid.locale-en.js"></script>
<script src="jquery.jqGrid.min.js"></script>
<script src="mytest.js" type="text/javascript"></script>
</head>
<body>
<h1>hey</h1>
<table id="jqgrid"></table>
</body>
</html>
JSON as local data (data displays, [here, edited for brevity]):
var mydata = [
{"_id": {"$oid": "50a3f962b7718da1a3090fa9"},
"config": {"titlepage":
{"title": "My First Title",
"color": true,
"fontsize": "42/44",
}
}
},
{"_id": {"$oid": "50a3f962b7718da1a3090faa"},
"config": {"titlepage":
{"title": "My Second Title",
"color": true,
"fontsize": "42/44",
}
}
}
];
jQuery(document).ready(function(){
$('#jqgrid').jqGrid({
datatype: 'local',
data: mydata,
jsonReader: {
repeatitems : false,
},
caption: 'Titlepage Parameters',
colNames: ['title', 'color','fontsize'],
colModel: [
{name: 'config.titlepage.title'},
{name: 'config.titlepage.color'},
{name: 'config.titlepage.fontsize'},
],
});
});
JSON via URL (no data displayed). The file mydata.json contains the same data
that is used above, but in a local file instead of in the actual js code:
jQuery(document).ready(function(){
$('#jqgrid').jqGrid({
url:'mydata.json',
datatype:"json",
jsonReader: {
repeatitems : false,
},
caption: 'Titlepage Parameters',
colNames: ['title', 'color','fontsize'],
colModel: [
{name: 'config.titlepage.title'},
{name: 'config.titlepage.color'},
{name: 'config.titlepage.fontsize'},
],
});
});
First of all I would fix a little your first version of working code. jsonReader will be not used if you use jsonReader. Instead of that it will be used localReader. Additionally I would recommend you always use native id values if the input data have such one. So I would fix the code to the following:
$(function () {
"use strict";
var mydata = [
{
"_id": {"$oid": "50a3f962b7718da1a3090fa9"},
"config": {
"titlepage": {
"title": "My First Title",
"color": true,
"fontsize": "42/44"
}
}
},
{
"_id": {"$oid": "50a3f962b7718da1a3090faa"},
"config": {
"titlepage": {
"title": "My Second Title",
"color": true,
"fontsize": "42/44"
}
}
}
];
$('#jqgrid').jqGrid({
datatype: 'local',
data: mydata,
caption: 'Titlepage Parameters',
gridview: true,
height: 'auto',
colNames: ['title', 'color', 'fontsize'],
colModel: [
{name: 'config.titlepage.title' },
{name: 'config.titlepage.color' },
{name: 'config.titlepage.fontsize' },
],
localReader: {
id: "_id.$oid"
}
});
});
See the first demo.
In case of usage datatype: "json" you need to fix the jsonReader:
$(function () {
"use strict";
$('#jqgrid').jqGrid({
datatype: 'json',
url: 'Tim2.json',
caption: 'Titlepage Parameters',
gridview: true,
height: "auto",
//colNames: ['title', 'color', 'fontsize'],
colModel: [
{name: 'title', jsonmap: 'config.titlepage.title' },
{name: 'color', jsonmap: 'config.titlepage.color' },
{name: 'fontsize', jsonmap: 'config.titlepage.fontsize' },
],
jsonReader: {
repeatitems: false,
id: "_id.$oid",
root: function (obj) {
return obj;
}
}
});
});
See another demo.
Oleg's answer is the full solution.
Here is the modified code which works. That is, the code I originally wrote plus the one change (from Oleg) that successfully loaded the data into the grid. The key for me was to add the root function in jsonReader:
jQuery(document).ready(function(){
$('#jqgrid').jqGrid({
url:'mydata.json',
datatype:"json",
jsonReader: {
root: function (obj) { return obj; },
repeatitems : false,
},
caption: 'Titlepage Parameters',
colNames: ['title', 'color','fontsize'],
colModel: [
{name: 'config.titlepage.title'},
{name: 'config.titlepage.color'},
{name: 'config.titlepage.fontsize'},
],
});
});