I am trying to open the 'Details' when I click at the nodeMenuButton, as I'm opening another page when I click at the node. Is it possible to do it with something like a onclick event inside the "NodeMenu"?
I tried this onclick but it didn't work out..
I am sorry, I may have said something different then what I want. What I am trying to do is: when I click at the "3 dots", the details page opens, or the 'editUI', as you call.
Like this:
nodeMenu: {
onClick: callHandler
},
Or to put a onclick event when I am creating the nodeMenuButton:
OrgChart.templates.joao.nodeMenuButton = '<g style="cursor:pointer;" transform="matrix(1,0,0,1,93,15)" onclick="callHandler();">(...)</g>';
And the callHandler be a function that opens the editForm.
BALKABGraph developer evangelist here
Here is an example how you can use onClick node menu item event
var webcallMeIcon = '<svg width="24" height="24" viewBox="0 0 300 400"><g transform="matrix(1,0,0,1,40,40)"><path fill="#5DB1FF" d="M260.423,0H77.431c-5.522,0-10,4.477-10,10v317.854c0,5.522,4.478,10,10,10h182.992c5.522,0,10-4.478,10-10V10 C270.423,4.477,265.945,0,260.423,0z M178.927,302.594c0,5.522-4.478,10-10,10c-5.523,0-10-4.478-10-10v-3.364h20V302.594z M250.423,279.229H87.431V58.624h162.992V279.229z" /><path fill="#5DB1FF" d="M118.5,229.156c4.042,4.044,9.415,6.271,15.132,6.271c5.715,0,11.089-2.227,15.133-6.269l29.664-29.662 c4.09-4.093,6.162-9.442,6.24-14.816c5.601-0.078,10.857-2.283,14.829-6.253l29.66-29.662c4.042-4.043,6.269-9.417,6.269-15.133 c0-5.716-2.227-11.09-6.269-15.13l-9.806-9.806c-4.041-4.043-9.415-6.27-15.132-6.27c-5.716,0-11.09,2.227-15.132,6.269 l-29.663,29.662c-4.092,4.092-6.164,9.443-6.242,14.817c-5.601,0.078-10.857,2.283-14.828,6.252l-29.661,29.662 c-4.042,4.043-6.269,9.418-6.268,15.136c0,5.716,2.227,11.089,6.269,15.129L118.5,229.156z M168.618,147.548l29.662-29.661 c1.587-1.587,3.696-2.461,5.94-2.461c2.243,0,4.353,0.874,5.938,2.461l9.808,9.808c1.586,1.586,2.46,3.694,2.46,5.937 c0,2.244-0.874,4.354-2.462,5.941l-29.658,29.661c-1.588,1.587-3.697,2.46-5.941,2.46c-2.243,0-4.353-0.874-5.938-2.46 l-0.309-0.309l19.598-19.598c2.539-2.539,2.539-6.654,0-9.192c-2.537-2.538-6.654-2.538-9.191,0l-19.599,19.598l-0.308-0.308 C165.344,156.152,165.345,150.823,168.618,147.548z M117.888,198.28l29.66-29.661c1.587-1.586,3.695-2.46,5.939-2.46 c2.242,0,4.349,0.872,5.934,2.455c0.002,0.001,0.004,0.003,0.005,0.005l0.309,0.309l-19.598,19.598 c-2.539,2.538-2.539,6.653,0,9.191c1.269,1.27,2.933,1.904,4.596,1.904s3.327-0.635,4.596-1.904l19.599-19.598l0.309,0.309 c3.273,3.273,3.273,8.603,0,11.877l-29.662,29.66c-1.588,1.588-3.698,2.462-5.941,2.462c-2.243,0-4.352-0.874-5.938-2.462 l-9.807-9.806c-1.586-1.586-2.46-3.694-2.46-5.938C115.426,201.978,116.3,199.868,117.888,198.28z" /></g></svg>';
function callHandler(nodeId) {
var nodeData = chart.get(nodeId);
var employeeName = nodeData["name"];
window.location = 'https://webcall.me/' + employeeName;
}
var chart = new OrgChart(document.getElementById("tree"), {
template: "olivia",
nodeBinding: {
field_0: "name",
field_1: "title",
img_0: "img"
},
nodeMenu: {
call: {
text: "Call now",
icon: webcallMeIcon,
onClick: callHandler
}
},
nodes: [
{ id: 1, name: "Billy Moore", title: "CEO", img: "https://balkangraph.com/js/img/2.jpg" },
{ id: 2, pid: 1, name: "Billie Rose", title: "Dev Team Lead", img: "https://balkangraph.com/js/img/5.jpg" },
{ id: 3, pid: 1, tags: ["HRs"], name: "Glenn Bell", title: "HR", img: "https://balkangraph.com/js/img/10.jpg" },
{ id: 4, pid: 1, tags: ["HRs", "Node with unique template"], name: "Blair Francis", title: "HR", img: "https://balkangraph.com/js/img/11.jpg" }
]
});
html, body{
width: 100%;
height: 100%;
padding: 0;
margin:0;
overflow: hidden;
font-family: Helvetica;
}
#tree{
width:100%;
height:100%;
}
<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<div id="tree"/>
EDIT
You can create your own node menu
The code snippets below demonstrates how to open the edit view on nodeMenuButton click
myNodeMenu = function () {
};
myNodeMenu.prototype.init = function (obj) {
this.obj = obj;
};
myNodeMenu.prototype.show = function (x, y, id) {
this.obj.editUI.show(id);
}
myNodeMenu.prototype.hide = function () {
}
var chart = new OrgChart(document.getElementById("tree"), {
template: "derek",
enableDragDrop: true,
nodeMenuUI: new myNodeMenu(),
menu: {
pdf: { text: "Export PDF" },
png: { text: "Export PNG" },
svg: { text: "Export SVG" },
csv: { text: "Export CSV" }
},
nodeMenu: {
details: { text: "Details" },
add: { text: "Add New" },
edit: { text: "Edit" },
remove: { text: "Remove" },
},
nodeBinding: {
field_0: "name",
field_1: "title",
img_0: "img",
field_number_children: "field_number_children"
},
nodes: [
{ id: 1, name: "Denny Curtis", title: "CEO", img: "https://balkangraph.com/js/img/2.jpg" },
{ id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager", img: "https://balkangraph.com/js/img/3.jpg" },
{ id: 3, pid: 1, name: "Caden Ellison", title: "Dev Manager", img: "https://balkangraph.com/js/img/4.jpg" },
{ id: 4, pid: 2, name: "Elliot Patel", title: "Sales", img: "https://balkangraph.com/js/img/5.jpg" },
{ id: 5, pid: 2, name: "Lynn Hussain", title: "Sales", img: "https://balkangraph.com/js/img/6.jpg" },
{ id: 6, pid: 3, name: "Tanner May", title: "Developer", img: "https://balkangraph.com/js/img/7.jpg" },
{ id: 7, pid: 3, name: "Fran Parsons", title: "Developer", img: "https://balkangraph.com/js/img/8.jpg" }
]
});
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#tree {
width: 100%;
height: 100%;
}
/*partial*/
#tree {
font-family: 'Gochi Hand', cursive;
}
<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">
<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<div id="tree"></div>
Let me know if this is what you want
Related
Context
I want to use cytoscape.js for visualizing graphs. While I am capable with a myriad of languages (C++, Mathematica, R, etc), I am new to Javascript, JSON, HTML, and CSS. Thus it would be favorable to learn these languages through this use case (implementing graphs with cytoscape.js). Please keep this in mind in your answer.
I have previously asked how to [remotely load cytoscape.js and how to get graphs display (requires a div). Since then I have created a script that turns a graph as represented in one of the other languages I use, into the JSON format indicated here. While I can just copy-paste all of this directly into my program, for large networks that is clearly a poor way to implement it. An example of my script's output is at the bottom of this.
Question
Given a JSON object/file(?) how can I do the following:
load it into cytoscape.js without copy-pasting the code.
referencing it once loaded. (e.g. basic explanation of how JSON syntax for use in cytoscape.js)
Script Output
cytoscape({
container: document.getElementById('cy'),
elements: [
{// node Node 1
group: 'nodes',
data: {
id: 'Node 1'
},
selected: false,
selectable: true,
locked: false,
grabbable: true,
selectable: true,
},
{// node Node 2
group: 'nodes',
data: {
id: 'Node 2'
},
selected: false,
selectable: true,
locked: false,
grabbable: true,
selectable: true,
},
{// node Node 3
group: 'nodes',
data: {
id: 'Node 3'
},
selected: false,
selectable: true,
locked: false,
grabbable: true,
selectable: true,
},
{// edge 1_2
group: 'edges',
data: {
id: '1_2',
source: '1',
target: '2'
}
},
{// edge 2_3
group: 'edges',
data: {
id: '2_3',
source: '2',
target: '3'
}
},
{// edge 3_1
group: 'edges',
data: {
id: '3_1',
source: '3',
target: '1'
}
}
],
style: [
{
selector: 'node',
style: {
'content': 'data(id)'
}
}
]
});
<head>
<title></title>
<script src="js/vendor/cytoscape.min.js"></script>
<script src="js/vendor/jquery.min.js"></script>
</head>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div id="cy"></div>
<script>
$.getJSON("cyto.js", function (data) {
//console.log(data);
var cy = cytoscape({
container: document.getElementById('cy'),
elements: data,
style: [
{
selector: 'node',
style: {
'label': 'data(label)',
'width': '60px',
'height': '60px',
'color': 'blue',
'background-fit': 'contain',
'background-clip': 'none'
}
}, {
selector: 'edge',
style: {
'text-background-color': 'yellow',
'text-background-opacity': 0.4,
'width': '6px',
'target-arrow-shape': 'triangle',
'control-point-step-size': '140px'
}
}
],
layout: {
name: 'circle'
}
});
});
</script>
</body>
in cyto.js you can input valid JSON data, for example
{
"nodes": [
{
"data": {"id": "a", "label": "Gene1"}
},
{
"data": {"id": "b", "label": "Gene2"}
},
{
"data": {"id": "c", "label": "Gene3"}
},
{
"data": {"id": "d", "label": "Gene4"}
},
{
"data": {"id": "e", "label": "Gene5"}
},
{
"data": {"id": "f", "label": "Gene6"}
}
],
"edges": [
{
"data": {
"id": "ab",
"source": "a",
"target": "b"
}
},
{
"data": {
"id": "cd",
"source": "c",
"target": "d"
}
},
{
"data": {
"id": "ef",
"source": "e",
"target": "f"
}
},
{
"data": {
"id": "ac",
"source": "a",
"target": "d"
}
},
{
"data": {
"id": "be",
"source": "b",
"target": "e"
}
}]
}
Let's presume you have a json file in the same folder as your 'index.html', and your server is running. First request the json file via a http request (using plain javascript or jquery ).
If your json file has the same format as the elements properties, you can just parse it to a javascript object and set it. E.g.
var myObject = {};
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObject = JSON.parse(this.responseText);
initCytoscape();
}
};
xhttp.open("GET", "myJson.json", true);
xhttp.send();
function initCytoscape() {
cytoscape({
container: document.getElementById('cy'),
elements: myObject
});
}
if the json property is different than cytoscape's format, then you have to programatically convert it.
I'm using the Kendo Ext library (https://github.com/jsExtensions/kendoui-extended-api) to render a Treeview inside of a Dropdown List. The problem I'm having is that the control get's hidden underneath the parent div. However when compared to the normal Kendo Dropdown List, that control does not suffer the same problem.
This is the example I have so far:
https://jsfiddle.net/6xxau9d4/1/
HTML
<div class="elm1">
<div id="dropDownTreeView"></div>
<input id="sample1" value="1" style="width: 150;" />
<input id="sample2" value="1" style="width: 150x;" />
</div>
JS
var dropDownTreeView = $("#dropDownTreeView").kendoExtDropDownTreeView({
treeview: {
dataSource: new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
})
}
}).data("kendoExtDropDownTreeView");
dropDownTreeView.dropDownList().text("Dropdown Treeview")
$(document).ready(function() {
$("#sample1").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [{
text: "Sample1",
value: null
}],
template: "<div id='myfancyid' class='k-ext-treeview'>test</div>",
height: 400,
open: function(e) {
var elm = e.sender.list.find("#myfancyid");
var dropDownTreeView = $(elm).kendoTreeView({
dataSource: new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
})
});
}
});
$("#sample2").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [{
text: "Sample2",
value: null
}],
template: "<div id='myfancyid' class='k-ext-treeview'>test</div>",
height: 400,
open: function(e) {
var elm = e.sender.list.find("#myfancyid");
var dropDownTreeView = $(elm).kendoTreeView({
dataSource: new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
})
});
}
});
});
CSS
.elm1 {
width: 400px;
height: 100px;
background-color: grey;
position: relative;
overflow: scroll;
}
#customers-list .k-item {
line-height: 1em;
min-width: 300px;
background-color: white;
display: inline-block;
Where Sample1 and Sample2 perform how I would like, but Dropdown Treeview does not. I've been pouring over the source trying to understand what makes Sample1 and Sample2 work, but I have yet to come to a realization. Any help in the right direction is much appreciated.
By default, the Kendo UI DropDownLists, ComboBoxes, DatePickers and similar widgets, use a detached popup, which is a child of the <body> element. This ensures that these popups (or dropdowns, if you prefer) will be able to stay on top of the other page content and not be restricted by fixed-height or scrollable containers.
On the other hand, the ExtDropDownTreeView widget renders its dropdown in the same place, where the original widget element is placed. Since the widget element is located inside a fixed height scrollable container in your case, this causes the observed problem.
I'm currently creating a system that produces different kind of graphs. I want to create a chart and table, that when a chart is DRILLDOWNED, the table will sync as well. Is there a way to output the current data presented by HighCharts to JSON? Then this JSON will be inputted into a datatable? Thanks!
check this JsFiddle Demo
You can obtain the id by e.seriesOptions.id which is the key to your data. Then you can use this id as the key to get appropriate data and update your data table from within the drillUp and drillDown events.
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JS
$(function() {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drillup: function(e) {
//alert('drill Up');
console.log(this);
console.log(e.seriesOptions.id);
console.log(this.options.series[0].name);
console.log(this.options.series[0].data[0].name);
},
drilldown: function(e) {
//alert('drill Down');
console.log(this);
console.log(e.seriesOptions.id);
console.log(this.options.series[0].name);
console.log(this.options.series[0].data[0].name);
}
}
},
title: {
text: 'DrillUp button styling'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Dieren',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruit',
y: 2,
drilldown: 'fruits'
}, {
name: "Auto's",
y: 4
}]
}],
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
}
},
series: [{
id: 'animals',
data: [
['Katten', 4],
['Honden', 2],
['Koeien', 1],
['Schapen', 2],
['Varkens', 1]
]
}, {
id: 'fruits',
data: [
['Appels', 4],
['Sinaasappels', 2]
]
}]
}
})
});
So I've looked at all the other questions about this sort of issue, and I can't seem to find the answer. Sorry for the long code here - but can someone tell me why the "Delete" command button would suddenly stop triggering? It worked perfectly before. And as you can see, I don't have any code attached to it - it's native. Now, it simply does nothing. I've watched in FireBug and nothing's being fired at all.
JQuery and Kendo are loaded as usual - and the button appears properly. All the other buttons work fine.
Just can't seem to see what the issue is... any suggestions? Here's the code for the grid:
function generateGrid() {
$("#teamGrid").kendoGrid({
columns: [
{ title: "First Name",
field: "users_first_name",
attributes: {
style: "text-align: center; font-size: 14px;"
},
filterable: true,
headerAttributes: {
style: "font-weight: bold; font-size: 14px; width: 100px;"
}
},
{ title: "Last Name",
field: "users_last_name",
attributes: {
style: "text-align: center; font-size: 14px;"
},
filterable: true,
headerAttributes: {
style: "font-weight: bold; font-size: 14px; width: 100px;"
}
},
{ title: "Email",
field: "users_email",
attributes: {
style: "text-align: center; font-size: 14px;"
},
filterable: { extra: false },
headerAttributes: {
style: "font-weight: bold; font-size: 14px; width: 300px;"
}
},
{ title: "User Type",
field: "admin_status",
attributes: {
style: "text-align: center; font-size: 14px;"
},
filterable: true,
headerAttributes: {
style: "font-weight: bold; font-size: 14px; width: 80px;"
},
template: function(dataItem) {
if ( dataItem.admin_status == 0 ) {
return "Team Member";
} else if ( dataItem.admin_status == 1 ) {
return "Admin";
} else if ( dataItem.admin_status == 2 ) {
return "Manager";
} else if ( dataItem.admin_status == 3 ) {
return "Acct Owner";
}
}
},
{
command: [
{
name: "custom1", text: "Edit",
click: function(e) {
$uid = this.dataItem(this.select()).users_id;
$(".title h4").filter(":first").css({
color: "blue",
"text-decoration": "underline",
cursor: "pointer"
});
var offset = $(".grid-box").offset();
var newLeft = offset.left+25;
newLeft = newLeft + "px";
var newTop = offset.top+80;
newTop = newTop + "px";
// Get Profile Info
$.getJSON(
'/data/get_profile_data.php',
{ users_id: $uid })
.done( function(data) {
$("#users_first_name").val(data[0].users_first_name);
$("#users_last_name").val(data[0].users_last_name);
$("#users_email").val(data[0].users_email);
$("#admin_status").val(data[0].admin_status);
$("#rc").val($uid);
$('#teamGrid').css("display","none");
$('.grid-box2').css({
display: "block",
position: "absolute",
top: newTop,
left: newLeft,
});
});
},
},
{
name: "destroy", text: "Delete"
}
],
headerAttributes: {
style: "width: 120px;"
},
attributes: {
style: "text-align: center;"
},
title: " "
}
],
dataSource: {
transport: {
read: {
url: "/data/get_team.php"
},
update: {
url: "/data/update_teammate.php",
type: "POST"
},
destroy: {
url: "/data/delete_teammember.php",
type: "POST"
},
create: {
url: "",
type: "POST"
}
},
schema: {
data: "data",
total: function (result) {
result = result.data || result;
return result.length;
},
model: {
id: "users_id"
}
},
type: "json"
},
pageable: {
refresh: true,
pageSize: 15,
pageSizes: [
15
]
},
sortable: true,
filterable: true,
autoSync: true,
scrollable: false,
selectable: "row",
reorderable: false,
toolbar: [
{ template: kendo.template($("#template").html()) }
]
}); // END: teamGrid
} // END: generateGrid function
Thanks in advance..
I don't understand PHP. But JS part should be similar. Kendo grid has the tendency to swallow errors which is painful for the developers to pin point the cause. However why don't you add a small error handler after the schema just to find what it is. I guess every little thing helps when you get stuck!
schema: {
model: {
id: "ID",
fields: {
ID: { editable: false },
NumberOfLoads: { editable: true, type: "number" },
Hours: { editable: true, type: "number" },
Kilometres: { editable: false },
WaterUsage: { editable: true },
Driver: { editable: true },
Hole: { editable: true }
}
},
errors: "Errors"
},
error: function (e) {
alert(e);
}
In the following example, I would like to replace the hard-coded items array with a call to a jsonstore with with same items read dynamically. I have tried referencing the store through xtype but get an error that Object has no method 'getItemId' - please let me know what I am doing wrong and many thanks for your help
Ext.define("MyApp.view.Main", {
extend: 'Ext.ux.slidenavigation.View',
requires: [
'Ext.Container',
'Ext.MessageBox',
'Ext.Panel',
'Ext.Toolbar',
'Ext.event.publisher.Dom'
],
config: {
fullscreen: true,
slideSelector: 'x-toolbar',
selectSlideDuration: 200,
list: {
maxDrag: 400,
width: 200,
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: 'Navigation',
centered: false,
width: 200,
left: 0
}
}]
},
/***************************************************************/
/* Want to replace this items array with dynamic call to store */
/***************************************************************/
items: [{
title: 'Item 1',
slideButton: {
selector: 'toolbar'
},
items: [{
xtype: 'toolbar',
title: 'Item 1',
docked: 'top'
},{
xtype: 'panel',
html: '<img src="resources/images/guide.jpg" width="100%" />'
}]
},{
title: 'Item 2',
slideButton: {
selector: 'toolbar'
},
items: [{
xtype: 'toolbar',
title: 'Item 2',
docked: 'top'
},{
xtype: 'panel',
html: '<img src="resources/images/guide.jpg" width="100%" />'
}]
}]
}
Store sample
Ext.define('MyApp.store.Navigation', {
extend: 'Ext.data.Store',
alias: 'widget.navstore',
requires: [
'MyApp.model.Navigation'
],
config: {
model: 'InspectionApp.model.Navigation',
storeId: 'navStore',
proxy: {
type: 'ajax',
url: '/path/to/navigation.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
grouper: {
property: 'group',
sortProperty: 'groupOrder'
}
}
});
json sample
[
{
"title": "Item 1",
"slideButton": "{selector: 'toolbar'}",
"items": "[{xtype: 'toolbar',title: 'Item 1',docked: 'top'},{xtype: 'panel',html: '<img src='resources/images/guide.jpg' width='100%' />'}]",
"handler": ""
},
{
"title": "Item 2",
"slideButton": "{selector: 'toolbar'}",
"items": "[{xtype: 'toolbar',title: 'Item 2',docked: 'top'},{xtype: 'panel',html: '<img src='resources/images/guide.jpg' width='100%' />'}]",
"handler": ""
}
]
Assuming your store is loading correctly, you can get a reference to it by calling
Ext.getStore('navStore')
or by assigning your store to a variable:
var yourStore = Ext.define('MyApp.store.Navigation', {
extend: 'Ext.data.Store',
alias: 'widget.navstore',
requires: [
'MyApp.model.Navigation'
],
config: {
model: 'InspectionApp.model.Navigation',
storeId: 'navStore',
proxy: {
type: 'ajax',
url: '/path/to/navigation.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
grouper: {
property: 'group',
sortProperty: 'groupOrder'
}
}
});
To populate the items object I would put it in a container:
{
xtype: 'container',
id: 'container_id',
}
then
for (var i = 0; Ext.getStore('navStore').getCount(); ++i){
var record = Ext.getStore('navStore').getAt(i);
var myComponent = Ext.create(...
//make the component you want to add with the data from the record
);
Ext.ComponentQuery.query('#container_id')[0].add(myComponent);
}