Are there any good examples of ExtJs framework with Jasmine or any other testing framework? I am using ExtJs 6.7 and 7.1
I found this thread on Sencha forums, but I think the topic is outdated and the thread seems dead.
https://www.sencha.com/forum/showthread.php?308318
I have some success with siesta-lite(https://www.npmjs.com/package/siesta-lite) but I am looking for a free alternative, to run it on a CI process.
Thanks!
Here's my directory structure generated when running this command
sencha -sdk <path-to-ext-framework> generate app MyApp ./extjs-jasmine
extjs-jasmine/
...
app/
store/
...
Personnel.js
...
...
index.html
...
test.html
test/
lib/
jasmine-3.5.0/ (just download and extract latest jasmine here)
app-test.js
spec/
store/
TestPersonnelStore.js
Here's test.html
<!DOCTYPE HTML>
<html manifest="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Jasmine Unit Tests</title>
<link rel="stylesheet" href="test/lib/jasmine-3.5.0/jasmine.css">
<script src="ext/ext-bootstrap.js"></script>
<script src="test/lib/jasmine-3.5.0/jasmine.js"></script>
<script src="test/lib/jasmine-3.5.0/jasmine-html.js"></script>
<script src="test/lib/jasmine-3.5.0/boot.js"></script>
<script src="test/lib/app-test.js"></script>
<script src="test/spec/store/TestPersonnelStore.js"></script>
</head>
<body>
</body>
</html>
Here's test/lib/app-test.js
Ext.Loader.setConfig({
enabled: true,
disableCaching: false,
paths: {
//examples to map unconventional packages
'Ext.ux': 'ext/packages/ux/src',
'Ext.chart': 'ext/packages/charts/src/chart',
'Ext.chart.legend.LegendBase': 'ext/packages/charts/classic/src/chart/legend/LegendBase.js',
'Ext.chart.theme.BaseTheme': 'ext/packages/charts/classic/src/chart/theme/BaseTheme.js',
'Ext.draw': 'ext/packages/charts/src/draw',
'Ext.draw.ContainerBase': 'ext/packages/charts/classic/src/draw/ContainerBase.js',
'Ext.draw.SurfaceBase': 'ext/packages/charts/classic/src/draw/SurfaceBase.js',
//test spec namespace
'MyApp.spec': 'test/spec',
}
});
Ext.application({
name: 'MyApp',
autoCreateViewport: false
});
Here's app/store/Personnel.js
Ext.define('MyApp.store.Personnel', {
extend: 'Ext.data.Store',
alias: 'store.personnel',
fields: [
'name', 'email', 'phone'
],
data: { items: [
{ name: 'Jean Luc', email: "jeanluc.picard#enterprise.com", phone: "555-111-1111" },
{ name: 'Worf', email: "worf.moghsson#enterprise.com", phone: "555-222-2222" },
{ name: 'Deanna', email: "deanna.troi#enterprise.com", phone: "555-333-3333" },
{ name: 'Data', email: "mr.data#enterprise.com", phone: "555-444-4444" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Here's test/spec/store/TestPersonnelStore.js
describe('MyApp.spec.store.TestPersonnelStore', () => {
beforeAll((done) => {
Ext.require([
'MyApp.store.Personnel'
], () => {
done();
});
});
it('should load data...', (done) => {
const store = Ext.create('MyApp.store.Personnel', {
autoLoad: true
});
expect(store.getCount()).toBe(4);
done();
});
});
Then point your browser to http://<host>:<port>/<context>/test.html
Related
I have developed a very simple column chart from a json three dimensional array:
0: timestamp in millliseconds
1:given recognition
2:received recognition
[[1490288274653,7,175],[1490374674653,1,1],[1490806674653,1,1],[1490979474653,3,3],[1491065874653,4,4],[1491411474653,6,0],[1491497874653,2,0],[1491584274653,18,0],[1491843474653,8,0],[1491929874653,1,0],[1492621074653,25,0],[1492707474653,12,0],[1492793874653,2,0],[1501174674653,2,0],[1503593874653,2,2],[1510765074653,1,0],[1510851474653,1,1],[1510937874653,5,0],[1511197074653,7,3],[1511369874653,7,2],[1511542674653,1,0],[1511801874653,7,3],[1511974674653,1,0],[1512493074653,1,1],[1512665874653,2,2],[1512752274653,9,4],[1513184274653,2,2],[1513270674653,2,2],[1513616274653,3,0],[1513789074653,4,2],[1514912274653,1,0],[1515430674653,1,0]]
The array displays timestamp on the xAxis and given recognition on the y axis.
How do I create a stacked column with "received recognition" stacked on "given recognition" on the yAxis?
I have searched google for hours and I can't find an example that uses same json array like mine, without strings as catagories.
I assume I will have to customise series or plotOptions and identify the data columns via the number data[1], data[2]?
How will I achieve a similar column like this CSV column:
http://marialaustsen.com/columncsv.html
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>myGraph</title>
<!--
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>-->
<!-- Highcharts is already included in Highstock, so it is not necessary to load both. The highstock.js file is included in the package. -->
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<!-- But the separate files can't run in the same page along with each other or with highcharts.js. So if stock or maps are required in the same page as each other or with basic Highcharts, they can be loaded as modules: -->
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="height: 400px; width: 100%"></div>
<script>
$(function() {
console.log($);
$.getJSON('http://localhost:3000/recognition', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
type: 'column',
renderTo: 'container'
},
legend: {
enabled: true,
},
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF </span> <b>{point.series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>',
valueSuffix: ' k',
shared: true,
},
series: [{
name: 'Brands',
data: data
}],
rangeSelector: {
selected: 1,
inputDateFormat: '%Y-%m-%d',
floating: true,
y: -75,
verticalAlign: 'bottom'
},
title: {
text: 'Team members received and sent recognition'
},
navigator: {
margin: 50
},
xAxis: {
type: 'datetime',
title: {
text: 'DATES'
}
},
yAxis: {
title: {
text: 'BRANDS'
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
}, function(chart) {
// apply the date pickers
setTimeout(function() {
$('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker()
}, 0)
});
});
// Set the datepicker's date format
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText) {
chart.xAxis[0].setExtremes($('input.highcharts-range-selector:eq(0)').datepicker("getDate").getTime(), $('input.highcharts-range-selector:eq(1)').datepicker("getDate").getTime());
//this.onchange();
this.onblur();
}
});
});
</script>
</body>
</html>
You need to prepare your data - split it into 2 separate series:
series: (function() {
var series = [{
name: 'received recognition',
data: []
}, {
name: 'given recognition',
data: []
}];
data.forEach(function(p) {
series[0].data.push([p[0], p[1]]);
series[1].data.push([p[0], p[2]]);
});
return series;
})()
Live demo: http://jsfiddle.net/kkulig/88sr9ofn/
I am trying to sort json from an external file in angular js.I am able to sort the file easily when i declared json internally as an array but cant able get data when declared json in external file.Please help me.
My code is:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Angularjs UI-Grid Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
var app = angular.module("uigridApp", ["ui.grid"]);
app.controller("uigridCtrl", function ($scope, $http) {
$http.get("views.json")
.then(function (response) {$scope['users'] = response.data;console.log(response.data);
//$scope['counter'] = Object.keys(response.data).length;
});
/*$scope.users = [
{ name: "Madhav Sai", age: 10, location: 'Nagpur' },
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
{ name: "Rohini Alavala", age: 29, location: 'Chennai' },
{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },
{ name: "Sateesh Chandra", age: 27, location: 'Vizag' }
];*/
});
</script>
<style type="text/css">
.myGrid {
width: 500px;
height: 200px;
}
</style>
</head>
<body ng-app="uigridApp">
<h2>AngularJS UI Grid Example</h2>
<div ng-controller="uigridCtrl">
<div ui-grid="{ data: users }" class="myGrid"></div>
</div>
</body>
</html>
and views.json contains
[
{
name:"Madhav Sai",
age:10,
location:"Nagpur"
},
{
name:"Suresh Dasari",
age:30,
location:"Chennai"
},
{
name:"Rohini Alavala",
age:29,
location:"Chennai"
},
{
name:"Praveen Kumar",
age:25,
location: "Bangalore"
},
{
name:"Sateesh Chandra",
age:27,
location:"Vizag"
}
]
Please help me.
You can do this,
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location' }
]
};
$http.get('data.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
}]);
DEMO
I'm evaluating KendoUI for use within my Angular applications.
I'm having issues with using KendoUI Gird widget: I specify the data source to be a JSON array defined in my controller, but I got absolutely nothing on the page, not even an empty grid.
Here is my html:
<div>
<kendo-grid k-data-source="dataSource">
</kendo-grid>
</div>
Here is my controller:
'use strict';
angular.module('wizardApp').controller('ApplicationGeneralWizardCtrl', ['$scope',
function ($scope) {
console.log('Entering ApplicationGeneralWizardCtrl');
$scope.dataSource = new kendo.data.DataSource({
data: [
{ id: 1, name: 'Tennis Balls', department: 'Sports', lastShipment: '10/01/2013' },
{ id: 2, name: 'Basket Balls', department: 'Sports', lastShipment: '10/02/2013' },
{ id: 3, name: 'Oil', department: 'Auto', lastShipment: '10/01/2013' },
{ id: 4, name: 'Filters', department: 'Auto', lastShipment: '10/01/2013' },
{ id: 5, name: 'Dresser', department: 'Home Furnishings', lastShipment: '10/01/2013' }
],
columns:
[
{ "field": "name", "title": "Name"},
{ "field": "department", "title": "Department"},
{ "field": "lastShipment", "title": "Last Shipment" }
]
});
}
]);
Here is my main app.js:
'use strict';
var app = angular.module('wizardApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'mgo-angular-wizard',
'ngGrid',
'kendo.directives'
]);
app.value('host', false /*use local host*/ ? "http://localhost:63428" : "http://sampleservice.breezejs.com");
app.controller('ApplicationTableCtrl', ['$scope', '$location', '$rootScope','ngGrid',
function ($scope, $location, $rootScope) {
}
]);
app.controller('MainCtrl',
['$scope', 'datacontext','$timeout','WizardHandler','$location',
function($scope, datacontext, $timeout,WizardHandler,$location) {
function Customer(name,number,address,contact)
{
this.customerName = name;
this.customerNumber = number;
this.customerAddress = address;
this.customerContact = contact;
}
console.log('created MainCtrl');
$scope.items = [];
// $scope.logList = logger.logList;
// $scope.lastLog = function(){return logger.lastLog;};
$scope.step_1_Action = function(name,number){
console.log('MainCtrl : step_1_Action dataInput: ' + name + ' ' + number);
$scope.currentCustomer = new Customer('','','','');
$scope.currentCustomer.customerName = name;
$scope.currentCustomer.customerNumber = number;
}
$scope.step_2_Action = function(address,contact){
console.log('MainCtrl : step_2_Action dataInput: ' + address + ' ' + contact);
$scope.currentCustomer.customerAddress = address;
$scope.currentCustomer.customerContact = contact;
}
$scope.saveCustomerRecord = function(){
datacontext.addCustomer($scope.currentCustomer);
datacontext.commit();
$scope.currentCustomer = new Customer('','','','');
//$scope.step1Form.$setPristine();
$scope.currentCustomer = {};
WizardHandler.wizard().goTo(0);
}
}]
);
app
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/IntroductionWizard', {
templateUrl: 'views/Wizards/IntroductionWizard/IntroductionWizard.html',
controller: 'IntroductionWizardCtrl'
})
.when('/ApplicationGeneralWizard', {
templateUrl: 'views/Wizards/ApplicationGeneralWizard/ApplicationGeneralWizard.html',
controller: 'ApplicationGeneralWizardCtrl'
})
.otherwise({
redirectTo: '/'
});
}).run(
function ($rootScope, $location) {
$rootScope.go = function (path) {
$location.path(path);
}
});
Here is my index.html:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="kendo.all.min.js"></script>
<script src="angular-kendo.js"></script>
<link href="styles/kendo.common.min.css" rel="stylesheet">
<link href="styles/kendo.default.min.css" rel="stylesheet">
</head>
<body ng-app="wizardApp">
<div class="container" ng-view=""></div>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- Breeze: -->
<script src="scripts/q.min.js"></script>
<script src="scripts/breeze.min.js"></script>
<script src="scripts/breeze.angular.js"></script>
<script src="scripts/breeze.metadata-helper.js"></script>
<!-- ng-grid: -->
<script src="bower_components/ng-grid/build/ng-grid.debug.js"></script>
<link rel="stylesheet" href="bower_components/ng-grid/ng-grid.css" />
<link rel="stylesheet" href="styles/style.css" />
<!-- the actual app: -->
<script src="scripts/app.js"></script>
<script src="scripts/model.js"></script>
<script src="scripts/datacontext.js"></script>
<script src="scripts/metadataFactory.js"></script>
<script src="scripts/controllers/introductionWizard.js"></script>
<script src="scripts/controllers/applicationGeneralWizard.js"></script>
<script src="scripts/controllers/KendoGridDemoController.js"></script>
<script src="scripts/ngLogger.js"></script>
<script src="bower_components/angular-wizard/dist/angular-wizard.js"></script>
<link rel="stylesheet" href="bower_components/angular-wizard/dist/angular-wizard.css">
</body>
</html>
What am I doing wrong, and what is the right 'Angular-Kendo' way to do it?
Basically your did good, the only thing i can think of is the use of new kendo.data.DataSource({}), you don't need to create a new instance since you're already using the Kendo ui directive that creates it for you (although using this code as is also works), another thing is the fact that we sometimes forget properly adding the third-party library to angular.
function ctrl($scope){
$scope.dataSource = {
data: [
{ id: 1, name: 'Tennis Balls', department: 'Sports', lastShipment: '10/01/2013' },
{ id: 2, name: 'Basket Balls', department: 'Sports', lastShipment: '10/02/2013' },
{ id: 3, name: 'Oil', department: 'Auto', lastShipment: '10/01/2013' },
{ id: 4, name: 'Filters', department: 'Auto', lastShipment: '10/01/2013' },
{ id: 5, name: 'Dresser', department: 'Home Furnishings', lastShipment: '10/01/2013' }
],
columns:
[
{ "field": "name", "title": "Name"},
{ "field": "department", "title": "Department"},
{ "field": "lastShipment", "title": "Last Shipment" }
]
};
}
Live example: http://jsfiddle.net/choroshin/Ysxa6/2/
here is my code:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng- grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<div class="selectedItems">Selected ID:{{mySelections[0].id}}</div><br><br>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.mySelections = [];
$scope.myData = [{empno: 111, name: "Moroni", id: 1},
{empno: 222, name: "Tiancum", id: 2},
{empno: 333, name: "Jacob", id: 3},
{empno: 444, name: "Nephi", id: 4},
{empno: 555, name: "Akon", id: 5},
{empno: 666, name: "Enos", id: 6}];
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false
};
});
Q1: I want to hide the id column in ng-grid.
Q2: After hiding the id column, may I get the id value when I select some row?
How can modify the code?
Hear is the plunk: Plunk demo
You can set visible: false right in the column definition:
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false,
columnDefs: [
{field: 'empno', displayName: 'empno', visible:false},
{field:'name', displayName:'name'}
]
};
You can also hide the column dynamically by adding this code after you define the grid;
var pos = $scope.gridOptions.columnDefs.map(function (e) { return e.field; }).indexOf('yourFieldName');
if ($scope.basicAdmin || $scope.superAdmin)
$scope.gridOptions.columnDefs[pos].visible = true;
else
$scope.gridOptions.columnDefs[pos].visible = false;
The angularjs grid array is $scope.gridOptions.columnDefs. Change the gridOptions to the name of your grid.
Replace "yourFieldName" with whatever field you are wanting to hide. Next, put whatever condition you want to test.
This took some time to figure out. Hopefully, it will save others some time.
Just add below lines to configuration and it will work
columnDefs: [
{field: 'empno', displayName: 'empno'},
{field:'name', displayName:'name'}
]
To hide particular column in AngularJS UI grid we can use visible: false property like as shown below.
columnDefs: [
{ field: 'userid', visible: false, displayName: 'UserId' },
{ field: 'username', displayName: 'UserName' },
{ field: 'branch', displayName: 'Education' }
]
If you want to check it in complete example you need to write the code like as shown below
<html ng-app="myApp">
<head>
<title>Hide Particular Column in Angularjs UI Grid with Example</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<style type="text/css">
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 210px
}
</style>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.mySelections = [];
$scope.myData = [{ userid: 1, username: "Anil Singh", branch:"B.tech" },
{ userid: 2, username: "Sunil", branch: "Msc" },
{ userid: 3, username: "Sushil", branch: "B.Tech" },
{ userid: 4, username: "Dilip", branch: "MBA" },
{ userid: 5, username: "Upendra", branch: "MD" },
{ userid: 6, username: "Reena", branch: "CA"}];
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false,
columnDefs: [
{ field: 'userid', visible: false, displayName: 'UserId' },
{ field: 'username', displayName: 'UserName' },
{ field: 'branch', displayName: 'Education' } ]
};
});
</script>
</body>
</html>
We can use the following code after define the grid
if ($rootScope.CanDelete == false && $rootScope.CanEdit == false)
$scope.ConfigItemGrid.columnDefs[4].visible = false;
else
$scope.ConfigItemGrid.columnDefs[4].visible = true;
Use "hide: true" attribute as below in Angular 2, working fine for me:
columnDefs = [
{ headerName: "Make", hide: true, field: "make", editable: true, filter: 'text'},
{ headerName: "Model", field: "model", filter: 'text'},
{
headerName: "Price",
field: "price",
filter: 'number',
cellClass: 'rightJustify',
cellRenderer: function (params: any) {
return '$' + params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //thanks http://stackoverflow.com/users/28324/elias-zamaria
}
}
];
I suggest adding 'visible: false' to the column definitions. If you choose not to specify it in columnDefs, when you post the row back to whatever your backend is, you may null out that field. That's what I've experienced.
Can you help me solve the issue I'm running into with the loadData function as part of the Ext.data.JsonStore? I've created a basic example of the problem I'm running into:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ext JSON example</title>
<script type="text/javascript" src="lib/ext-base.js"></script>
<script type="text/javascript" src="lib/ext-all.js"></script>
<script>
function example() {
var exampleData = "{'exampleJSON' : {'exampleArray':[{'exampleID':1,'name':'Fred','description':'a guy'},{'exampleID':2,'name':'sue','description':'a girl'}]}}";
var exampleStore = new Ext.data.JsonStore({
data: new Ext.data.MemoryProxy(exampleData),
autoLoad: false,
root: 'exampleJSON.exampleArray',
fields: [
{mapping: "exampleID", name: 'exampleID'},
{mapping: "name", name: 'name'},
{mapping: "description", name: 'description'}
],
listener: {
load: function (oStore, ayRecords, oOptions )
{
alert('loaded successfully');
}
}
});
exampleStore.loadData(exampleData);
}
</script>
</head>
<body>
<center><button onclick="example();">Click for Example</button></center>
</body>
</html>
The problem I'm running into is I'm getting this error reported by Firebug:
obj.exampleJSON is undefined
This is likely being caused when I set the root as 'exampleJSON.exampleArray'.
Can someone help point out what I'm doing wrong?
(using ExtJs 4.1.0)
Thanks guys.
EDIT: to set this up, place ext-all.js and ext-base.js in a lib folder.
Your code is wrong in a number of places:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['exampleID', 'name', 'description']
});
function example() {
var exampleData = [{
exampleID: 1,
name: 'Fred',
description: 'a guy'
}, {
exampleID: 2,
name: 'sue',
description: 'a girl'
}];
var exampleStore = new Ext.data.Store({
model: 'MyModel',
data: exampleData
});
}
Also, there's no ext-base file for Ext 4, so it's a redundant include.
Thanks for your replies, they were useful in sending me down the right path. I was able to get my original example to work by removing the 'data' field. I'm guessing it was causing conflicts when I tried to call loadData. Solution listed beflow
function example() {
var exampleData = {'exampleJSON' : {'exampleArray':[{'exampleID':1,'name':'Fred','description':'a guy'},{'exampleID':2,'name':'sue','description':'a girl'}]}};
var exampleStore = new Ext.data.JsonStore({
autoLoad: false,
root: "exampleJSON.exampleArray",
fields: [
{mapping: "exampleID", name:"exampleID"},
{mapping: "name", name:"name"},
{mapping: "description", name:"description"}
],
listeners: {
load: function (oStore, ayRecords, oOptions )
{
alert('loaded successfully: ' + ayRecords.length);
}
}
});
exampleStore.loadData(exampleData);
}