i have a php running a sql server query, the results from the query are shown on a table in my html page, but i need to make some filters on the query comming from the client side, as example, the date and a category, but i haven´t realized how to do it and it gives to me this error (at this moment I only tried to put the data from the combobox on the query, because I give up with the date).
Maybe I could call a default value for the query when the html is loaded (for example, x category and date = yesterday... but even when i input the info by hand the query doesn´t work.
The date output format of que database is "YYYY-DD-MM HH:MM:SS"
This is my php:
<?php
function getArraySQL(){
$dsn = "prueba";
$connect = odbc_connect( $dsn, '', '' );
$field_value = $_POST["call"];
$query = "SELECT hist_eqmtlist.unit,
hist_statusevents.eqmt,
hist_exproot.shiftdate,
round (sum(case when hist_statusevents.category =1 then (hist_statusevents.duration/3600) else 0 end),2) as 'uno',
round (sum(case when hist_statusevents.category =2 then (hist_statusevents.duration/3600) else 0 end),2) as 'dos',
round (sum(case when hist_statusevents.category =3 then (hist_statusevents.duration/3600) else 0 end),2) as 'tres',
round (sum(case when hist_statusevents.category =4 then (hist_statusevents.duration/3600) else 0 end),2) as 'cuatro',
round (sum(case when hist_statusevents.category =5 then (hist_statusevents.duration/3600) else 0 end),2) as 'cinco',
round (sum(case when hist_statusevents.category =6 then (hist_statusevents.duration/3600) else 0 end),2) as 'seis'
FROM hist_eqmtlist,hist_exproot,hist_statusevents
WHERE hist_exproot.shiftindex = hist_statusevents.shiftindex And hist_statusevents.shiftindex = hist_eqmtlist.shiftindex And hist_statusevents.eqmt = hist_eqmtlist.eqmtid And hist_eqmtlist.unit= '$field_value'
order by hist_exproot.shiftdate,hist_statusevents.eqmt";
if(!$rs = odbc_exec($connect, $query)) die();
$rawdata = array();
$i=0;
while($row = odbc_fetch_array($rs))
{
$rawdata[$i] = $row;
$i++;
}
odbc_close( $connect );
return $rawdata;
}
$myarray = getArraySQL();
echo json_encode($myarray);
On the other side, my html is this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Report Monitor</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src='js/jquery.js'></script>
<script src='js/bootstrap.js'></script>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="scripts/demos.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" name="gridequipment">
//call the js that bring the data
$(document).ready(function() {
var url = "report/eqmq.php";
// prepare the data
var source = {
datatype: "json",
datafields: [{
name: 'eqmt'
}, {
name: 'shiftdate'
}, {
name: 'uno'
}, {
name: 'dos'
}, {
name: 'tres'
}, {
name: 'cuatro'
}, {
name: 'cinco'
}, {
name: 'seis'
}],
id: 'id',
url: url,
root: 'data'
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#datalist").jqxGrid({
width: '100%',
source: dataAdapter,
columnsresize: true,
columns: [{
text: 'Equipo',
dataField: 'eqmt',
width: '20%'
}, {
text: 'Fecha Turno',
dataField: 'shiftdate',
width: '25%'
}, {
text: 'uno',
dataField: 'uno',
width: '9.16%',
cellsalign: 'left'
}, {
text: 'dos',
dataField: 'dos',
width: '9.16%',
cellsalign: 'left'
}, {
text: 'tres',
dataField: 'tres',
width: '9.16%',
cellsalign: 'left'
}, {
text: 'cuatro',
dataField: 'cuatro',
width: '9.16%',
cellsalign: 'left'
}, {
text: 'cinco',
dataField: 'cinco',
width: '9.16%',
cellsalign: 'left'
}, {
text: 'seis',
dataField: 'seis',
width: '9.16%',
cellsalign: 'left'
}]
});
});
</script>
</head>
<body>
<p>
<script>
// The scritp to input the data from combobox into the query on eqmq.php
$(document).ready(function() {
var value = $("#callcombo").val();
$.ajax({
url: "report/eqmq.php",
type: "POST",
data: {
"call": value
},
success: function(result) {
alert(result);
}
})
});
</script>/
<!-- / a combobox with the cagories,comming from another query from the same database -->
</p>
<section name="combobox">
<div id='combobox'>
<script type="text/javascript">
$(document).ready(function() {
var url = "report/eqmlistcat.php";
var source = {
datatype: "json",
datafields: [{
name: 'unit'
}],
url: url,
async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#callcombo").jqxComboBox({
selectedIndex: 0,
source: dataAdapter,
displayMember: "unit",
width: 200,
height: 25
});
$("#callcombo").on('select', function(event) {
if (event.args) {
var item = event.args.item;
if (item) {
var valueelement = $("<div></div>");
valueelement.text(item.value);
$("#selectionlog").children().remove();
$("#selectionlog").append(valueelement);
}
}
});
});
</script>
<div id='callcombo'>
</div>
</div>
</section>
<div id='Datepick'>
<script type="text/javascript">
// a date picker to input the data on the query too
$(document).ready(function() {
$("#Dateinput").jqxDateTimeInput({
width: '200px',
height: '25px'
});
$("#Dateinput").jqxDateTimeInput({
format: 'yyyy-mm-dd'
});
});
</script>
<p>
<div id='Dateinput'></div>
</p>
<p></p>
<section name="Equipment List">
<h3><div id="selectionlog"></div></h3>
<div id='WidgetTable' style="font-size: 13px; font-family: Verdana; float: center;" class="row col-xs-12 col-sm-6 col-lg-6 col-xl-4">
<div id="datalist"></div>
</div>
<p class="row col-xs-12 col-sm-6 col-lg-6 col-xl-4"></p>
<p class="row col-xs-12 col-sm-6 col-lg-6 col-xl-4"></p>
<p class="row col-xs-12 col-sm-6 col-lg-6 col-xl-4"></p>
</section>
<p></p>
</body>
</html>
Related
I try to place the value of my sensor in a HTML script (see interface).
I found a example on internet. I would like to have only the blocks with the name Temp en Hum (in running mode are the values visible in the block). But when I delete the graphs, I lost the actual value also.
How can I delete the graphs and hold the actual values in the blocks (temp and Hum)?
Interface
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask App </title>
<!-- Bootstraps Java Scipts Links -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- JQuery links -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--High CHART LIVE -->
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!--Gauge -->
<script type="text/javascript" src="http://pubnub.github.io/eon/lib/eon.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-5 jumbotron p-2 mx-1">
<h1 class="sensor1"> Sensor : </h1>
</div>
<br>
<div class="col-5 jumbotron p-2 mx-1">
<h1 class="sensor2">Sensor :</h1>
</div>
<br>
</div>
</div>
<style>
<!--
.jumbotron{
widows: 150px;
height: 220px;
justify-content: center;
}
.row{
justify-content: center;
}
-->
</style>
<div class="container-fluid">
<!-- Example row of columns -->
<div class="row">
<div class="container-fluid" id="data-temperature">
</div>
</div>
</div>
<br>
<br>
<br>
<div class="container-fluid">
<!-- Example row of columns -->
<div class="row">
<div class="container-fluid" id="data-humidity">
</div>
</div>
</div>
<script>
var chartTemperatue;
var chartHumidity;
function requestData()
{
// Ajax call to get the Data from Flask
var requests = $.get('/data');
var tm = requests.done(function (result)
{
// Temperature
var seriesTemperature = chartTemperatue.series[0],
shiftTemperature = seriesTemperature.data.length > 20;
// Humidity
var seriesHumidity = chartHumidity.series[0],
shiftHumidity = seriesTemperature.data.length > 20;
// Add the Point
// Time Temperature\
var data1 = [];
data1.push(result[0]);
data1.push(result[1]);
// Add the Point
// Time Humidity
var data2 = [];
data2.push(result[0]);
data2.push(result[2]);
chartTemperatue.series[0].addPoint(data1, true, shiftTemperature);
chartHumidity.series[0].addPoint(data2, true, shiftHumidity);
$(".sensor1").text("");
$(".sensor1").text("Temperature : " + Math.round(data1[1]) );
$(".sensor2").text("");
$(".sensor2").text("Humidity : " + Math.round(data2[1]) );
// call it again after one second
setTimeout(requestData, 2000);
});
}
$(document).ready(function()
{
// --------------Chart 1 ----------------------------
chartTemperatue = new Highcharts.Chart({
chart:
{
renderTo: 'data-temperature',
defaultSeriesType: 'area',
events: {
load: requestData
}
},
title:
{
text: 'Temperature'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
color : '#c23d23',
lineColor: '#303030',
name: 'Temperature',
data: []
}]
});
// --------------Chart 1 Ends - -----------------
chartHumidity = new Highcharts.Chart({
chart:
{
renderTo: 'data-humidity',
defaultSeriesType: 'area',
events: {
load: requestData
}
},
title:
{
text: 'Humidity'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
lineColor: '#1d82b8',
name: 'Humidity',
data: []
}]
});
});
</script>
</body>
</html>
Python code
from flask import Flask,render_template,url_for,request,redirect, make_response
import random
import json
from time import time
from random import random
from flask import Flask, render_template, make_response
app = Flask(__name__)
#app.route('/', methods=["GET", "POST"])
def main():
return render_template('index.html')
#app.route('/data', methods=["GET", "POST"])
def data():
# Data Format
# [TIME, Temperature, Humidity]
Temperature = random() * 100
Humidity = random() * 55
data = [time() * 1000, Temperature, Humidity]
response = make_response(json.dumps(data))
response.content_type = 'application/json'
return response
if __name__ == "__main__":
app.run(debug=True)
Hi i have the following trirand jqgrid (4.6) loaded with values
as you can see there is grouped Column header with textbox. the following code should respond to mouse click event on the text box and display an alert but it does not and why it displays the string {this.state.TextDate} instead of its value?
here is my code :
var DEMOCOMPONENT = React.createClass({
getInitialState:function(){
return{
TextDate:''
}
},
componentDidMount:function(){
this.getData();
},
showDTPicker:function(){
alert('date picker hit');
},
setTextDate:function(){
var newV = ReactDOM.findDOMNode(this.refs.reftxt).value;
this.setState({TextDate:newV},function(){
});
},
render: function () {
return (<div><table id="list4"></table><div id="plist483"></div></div>)
},
getData:function(){
jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
multiselect: true,
caption: "Manipulating Array Data",
rowNum:10,
width:700,
rowList:[10,20,30],
pager: '#plist483',
sortname: 'invdate',
height: '100%'
});
//setting groupcolumn headers
jQuery("#list4").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders:[
{startColumnName: 'amount',
numberOfColumns: 3,
titleText: '<span><div style="text-align: left"><input type="text" id="txt" style="width: 50%" ref="reftxt" onClick={this.showDTPicker} onChange={this.setTextDate} value={this.state.TextDate} />'
},
{startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
]});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
}
});
ReactDOM.render(<DEMOCOMPONENT />,document.getElementById('divdemo'));
Here is my HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<!--<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.css" />-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" />
</head>
<body>
<div id="divdemo">
</div>
<script src="react-15.0.0.js"></script>
<script src="react-dom-15.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script type="text/babel" src="demo.js"></script>
</body>
</html>
Give editable option in jq Grid Column properties as true ,eg
name : 'ABC',
index : 'ABC',
align : "center",
formatter : 'select',
edittype : 'select',
width : 174,
**editable : true,**
It's my code and I have a problem.
require([
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/data/ItemFileWriteStore",
"dojox/grid/DataGrid"
], function(BorderContainer, ContentPane, ItemFileWriteStore, DataGrid) {
var data_list = [{
id: '01',
Name: 'Niko',
Phone: '010101',
Birthday: '01.01.91'
}, {
id: '02',
Name: 'Sasha',
Phone: '020202',
Birthday: '01.01.92'
}, {
id: '03',
Name: 'Pavel',
Phone: '030303',
Birthday: '01.01.93'
}, {
id: '04',
Name: 'Alex',
Phone: '040404',
Birthday: '01.01.94'
}];
var store = new ItemFileWriteStore({
data: {
idetifier: 'id',
items: data_list
}
});
var layout = [{
name: 'Name',
field: 'Name',
'width': '90%'
}];
var grid = new DataGrid({
id: 'grid',
store: store,
structure: layout,
onClick: function(item) {
var itemData = this.getItem(item.rowIndex);
dojo.byId("itemInfo").innerHTML = "<table><tr><td>Name:</td><td>" + itemData.Name + "</td></tr><tr><td>Phone:</td><td>" + itemData.Phone + "</td></tr><tr><td>Birthday:</td><td>" + itemData.Birthday + "</td></tr></table>";
}
}, dojo.byId("myDataGrid"));
grid.startup();
});
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#DashboardContainer {
width: 100%;
height: 100%;
}
#Content, #Info, #itemInfo {
height: 100%;
width: 50%;
}
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js'></script>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css">
<script >
var djConfig = {
parseOnLoad: true
}
</script>
</head>
<body class="claro" style="font-family: Verdana; font-size: 11px;">
<div dojoType="dijit.layout.BorderContainer" id="DashboardContainer" design="headline" splitters="false">
<div dojoType="dijit.layout.ContentPane" id="Content" region="center">
<div dojoType="dojox.grid.DataGrid" id="myDataGrid"></div>
</div>
<div dojoType="dijit.layout.ContentPane" id="Info" region="right">
<div id="itemInfo">
<p>Hello</p>
</div>
</div>
</div>
</body>
I have a simple DataGrid. But I don't know how edit it in popup dialog box. Please help me. Example of grid in snippet.
I don't know how get a data from grid to dialog. And edit it + save.
Read up on editing cells here
https://dojotoolkit.org/reference-guide/1.10/dojox/grid/DataGrid.html#editing-cells
and here https://dojotoolkit.org/documentation/tutorials/1.10/working_grid/
My objective is to create a simple component using EXTJS 6 (grid for example) and show it in an HTML div, but I do not know which resources I need for that. This is my code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict- thymeleaf-spring3-3.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" th:href="#{/js/ext-6/classic/theme-triton/resources/theme-triton-all.css}" />
<link rel="stylesheet" type="text/css" th:href="#{/js/ext-6/packages/charts/classic/triton/resources/charts-all.css}" />
<link rel="stylesheet" type="text/css" th:href="#{/js/ext-6/packages/ux/classic/triton/resources/ux-all.css}" />
<script type="text/javascript" th:src="#{/js/ext-6/ext-all.js}" src="../../../js/ext-6/ext-all.js" > </script>
<script type="text/javascript" th:src="#{/js/ext-6/classic/theme-triton/theme-triton.js}" src="../../../js/ext-6/classic/theme-triton/theme-triton.js"></script>
<script type="text/javascript" th:src="#{/js/ext-6/packages/charts/classic/charts.js}" src="../../../js/ext-6/packages/charts/classic/charts.js"></script>
<script type="text/javascript" th:src="#{/js/ext-6/packages/ux/classic/ux.js}" src="../../../js/ext-6/packages/ux/classic/ux.js"></script>
<title>Ext6 </title>
</head>
<body>
<script th:inline="javascript">
/*<![CDATA[*/
Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" }
]
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
renderTo : Ext.get("grid"),
store: store,
columns: [
{ text: 'Name', dataIndex: 'name', width: 200 },
{ text: 'Email', dataIndex: 'email', width: 250 },
{ text: 'Phone', dataIndex: 'phone', width: 120 }
],
height: 200,
layout: 'fit',
fullscreen: true
});
});
/*]]>*/
</script>
<div id="grid">
</div>
</body>
</html>
This simple example will help me to upgrade my old application created by Extjs 4.
Ext.grid.Grid is not a valid class in ExtJS. The correct class for a grid is Ext.grid.Panel.
Try the following:
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
renderTo : Ext.get("grid"),
store: store,
columns: [
{ text: 'Name', dataIndex: 'name', width: 200 },
{ text: 'Email', dataIndex: 'email', width: 250 },
{ text: 'Phone', dataIndex: 'phone', width: 120 }
],
height: 200,
layout: 'fit',
fullscreen: true
});
Does it work now?
I have the following code, which work fine locally. Iwas trying to change the bootstrap theme to one of the jqgrid themes. I looked online for theme changing and it didnt seem to work .
Here is my code below and fiddle link:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="../js/i18n/grid.locale-en.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="../js/jquery.jqGrid.min.js"></script>
<!-- A link to a Boostrap and jqGrid Bootstrap CSS siles-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid-bootstrap.css" />
<script>
$.jgrid.defaults.width = 780;
$.jgrid.defaults.responsive = true;
$.jgrid.defaults.styleUI = 'Bootstrap';
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<title>jLp data </title>
</head>
<body>
<div style="margin-left:20px">
<table id="nplGrid"></table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#nplGrid").jqGrid({
url: 'json/data-bcp.json',
datatype: "json",
colModel: [
{ label: 'Id', name: 'Id', width: 45 },
{ label: 'Symbol', name: 'Symbol', width: 90 },
{ label: 'Quantity', name: 'Quantity', width: 100 },
/*{ label: 'Value1',
name: 'Value1',
width: 80,
sorttype: 'number',
formatter: 'number',
align: 'right'
}, */
{ label: 'Price', name: 'Price', width: 80, sorttype: 'integer' },
{ label: 'Value', name: 'Value', width: 80, sorttype: 'integer' },
{ label: 'Pledged', name: 'Pledged', width: 80, sorttype: 'integer' }
],
loadonce: true,
viewrecords: true,
footerrow: true,
caption: "<b>Brokerage Client Portfolio</b>",
hidegrid:false,
userDataOnFooter: true, // use the userData parameter of the JSON response to display data on footer
height: 170,
altRows: true,
rowNum: 150
});
});
</script>
</body>
</html>