We Keep Coding

Warning - DataTables warning: table id=example - Cannot reinitialise DataTable

I am trying to get data from .JSON file and filter it in realtime.
But I am getting Warnings as
DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
As per instructions in above link I added retrieve: true, and paging: false, But still warnings are shown.
I am new for jscript and jquery so can you please help me to resolve this warning
main.js file
$(document).ready(function () {
var table = $('#example').DataTable({
retrieve: true,
paging: false,
ajax: {
url: './test.json',
dataSrc: '',
},
columns: [
{ data: 'Host' },
{ data: 'Category' },
{ data: 'Type' },
{ data: 'SSH' },
{ data: 'Status' },
{ data: 'Notes' },
],
mark: true,
dom: 'Bfrtip',
lengthMenu: [
[10, 25, 50, 100, -1],
['10 rows', '25 rows', '50 rows', '100 rows', 'Show All']
],
buttons: [
'pageLength',
{
extend: 'copyHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csvHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
download: 'open',
exportOptions: {
columns: ':visible'
}
},
'colvis'
],
columDefs: [{
targets: -1,
visible: false
}],
});
$('#example tfoot th').each(function () {
var title = $('#example tfoot th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
table.columns().eq(0).each(function (colIdx) {
$('input', table.column(colIdx).footer()).on('keyup change', function () {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
});

Extjs6: dashboard parts coming vertically

I am creating my dashboard like this But when I render it, both my parts come vertically instead of being horizontol.Also there is a splitter vertical height between these two parts.How can I make them appear horizontally.
xtype: 'dashboard',
defaultContent: [
{
type: 'dashChart',
title: 'Graph 1',
columnIndex: 0,
height: 300
},
{
type: 'dashChart1',
title: 'Graph 2 ',
columnIndex: 1,
height: 300
}
],
parts: {
dashChart: {
viewTemplate: {
collapsible: false,
resizable: false,
layout: 'fit',
items: [
{
xtype: 'webdashboardpiechart'
}
]
}
},
dashChart2: {
viewTemplate: {
collapsible: false,
resizable: false,
layout: 'fit',
items: [
{
xtype: 'webdashboardareachart'
}
]
}
}
},
maxColumns: 2
}

Get Multiple Selected Row html data out of Datatables

I am using Datatables (datatables.net) successfully to display all the data I need. But I am having difficulty understanding how to pull out selected column data from a json object. I have failed to JSON.stringify the object, as well as attempt to access the properties of the object directly.
The use of the datatables allows the user to select multiple rows and a built in button will perform a submit action to my rails server. I currently cannot access the object to parse the data. I may need a loop and thats fine, but again, I am having difficulty understanding the library on multiple select.
I have successfully console.log the object and verified the data I want is present. I currently want the 1 index of Array[12] for n selected rows. I have figured out how to provide a count of the selected rows, so I can parse the object using the count as a loop limiter. But again my attempts have failed.
Console.log object:
[Array[12], Array[12], Array[12], context: Array[1], selector: Object, ajax: Object, colReorder: Object, keys: Object]
0:Array[12]0:""1:"36"2:
Code:
$(document).ready(function() {
$('.stay').DataTable( {
dom: "<'row'<'col-sm-8'B><'col-sm-4'f>>"+ 'rt' + "<'row'<'col-sm-6'i><'col-sm-6'p>>",
buttons: [
'selectNone',
'selectAll',
{
extend: 'selected',
text: 'Assign Rooms',
action: function ( e, dt, node, config ) {
var rows = dt.rows( { selected: true } ).count();
var selected_rows = dt.rows( {selected: true} ).data(0);
console.log(selected_rows);
url = window.location;
// index = url.indexOf("housekeeper")
// alert(index);
alert( 'There are '+rows+'(s) selected in the table' );
alert(selected_rows[0])
// $.ajax({
// url: "/BookCreate/?mdate="+mdate+"&phone="+phone,
// type: "post",
// data: values,
// success: function(){
// alert('Saved Successfully');
// },
// error:function(){
// alert('Error');
// }
// });
}
},
{
extend: 'colvis',
text: 'Columns',
autoClose: true,
},
{
extend: 'copy',
text: '<i class="fa fa-files-o"></i>',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excel',
text: '<i class="fa fa-file-excel-o"></i>',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csv',
text: '<i class="fa fa-file-code-o"></i>',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdf',
text: '<i class="fa fa-file-pdf-o"></i>',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
text: '<i class="fa fa-print"></i>',
exportOptions: {
columns: ':visible'
}
},
],
columnDefs: [ {
visible: false
} ],
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child',
style: 'multi'
},
order: [[ 2, 'asc' ]]
} ).on( 'buttons-action', function ( e, buttonApi, dataTable, node, config ) {
// action put here
console.log( 'Button '+buttonApi.text()+' was activated' );
} );;
} );

So using datatables I was able to get the selected row count. From that I parse the object through a loop for the first row entries.
Finally I call on the reduced array for the position value that I want (in this case position 1 is my Record ID field, more if you want) and push it to a new array.
From that you submit to your traditional controller for processing.
Hope this helps those trying to pass selected Row Data
$(document).ready(function() {
$('.stay').DataTable( {
dom: "<'row'<'col-sm-8'B><'col-sm-4'f>>"+ 'rt' + "<'row'<'col-sm-6'i><'col-sm-6'p>>",
buttons: [
'selectNone',
'selectAll',
{
extend: 'selected',
text: 'Assign Rooms',
action: function ( e, dt, node, config ) {
var rows = dt.rows( { selected: true } ).count();
var selected_rows = dt.rows( {selected: true} ).data(0);
var selected_ids = [];
for (i=0; i < rows; i++) {
var reduced_object = selected_rows[i];
selected_ids.push(reduced_object[1]);
};
console.log(selected_ids);
url = window.location;
// index = url.indexOf("housekeeper")
// alert(index);
// alert( 'There are '+rows+'(s) selected in the table' );
// alert(selected_rows[0])
// $.ajax({
// url: "/BookCreate/?mdate="+mdate+"&phone="+phone,
// type: "post",
// data: values,
// success: function(){
// alert('Saved Successfully');
// },
// error:function(){
// alert('Error');
// }
// });
}
},
{
extend: 'colvis',
text: 'Columns',
autoClose: true,
},
{
extend: 'copy',
text: '<i class="fa fa-files-o"></i>',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excel',
text: '<i class="fa fa-file-excel-o"></i>',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csv',
text: '<i class="fa fa-file-code-o"></i>',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdf',
text: '<i class="fa fa-file-pdf-o"></i>',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
text: '<i class="fa fa-print"></i>',
exportOptions: {
columns: ':visible'
}
},
],
columnDefs: [ {
visible: false
} ],
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child',
style: 'multi'
},
order: [[ 2, 'asc' ]]
} ).on( 'buttons-action', function ( e, buttonApi, dataTable, node, config ) {
// action put here
console.log( 'Button '+buttonApi.text()+' was activated' );
} );;
} );

How to render series data to a title in sencha charts

I have a chart retrieving data from my store, the four bits of information are the following
Model Code
Ext.define('QvidiApp.model.ClipsViews', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
name: 'meta_id'
},
{
name: 'title'
},
{
name: 'viewed'
},
{
name: 'glances'
}
]
}
});
Now I have the viewed field and the glances field as the numeric fields in the chart, and the title field as the category title in the chart.
I want to render the title name of the field when I hover over it, reason id this. The titles are too long to fit in the x-axis of the chart so in place of the titles I am putting 'meta_id'. So when I hover over the x-axis meta_id field I want the title name to be shown
so for example
meta_id 100 will equal title value ###
Here's is my chart code so far
{
xtype: 'chart',
centered: true,
height: '150%',
colors: [
'#24ad9a',
'#7c7474',
'#a66111'
],
store: 'ClipsViewed',
axes: [
{
type: 'category',
fields: [
'meta_id'
],
grid: true,
label: {
rotate: {
degrees: 0
},
font: '7px'
},
title: 'Clips'
},
{
type: 'numeric',
fields: [
'viewed'
],
grid: true,
position: 'left',
title: 'Amount'
}
],
series: [
{
type: 'bar',
renderer: function(sprite, config, rendererData, index) {
},
style: {
minGapWidth: 1,
minBarWidth: 60,
maxBarWidth: 70,
opacity: 0.80
},
xField: 'meta_id',
yField: [
'viewed',
'glances'
]
}
],
interactions: [
{
type: 'panzoom'
}
],
legend: {
xtype: 'legend'
}
}
As you can see in the above code I have a render function but I dont know what to put into it

Use tips for series
series: [
{
type: 'bar',
tips: {
trackMouse: true,
width: 74,
height: 38,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('meta_id') + '<br />' + storeItem.get('title'));
}
},
style: {
minGapWidth: 1,
minBarWidth: 60,
maxBarWidth: 70,
opacity: 0.80
},
xField: 'meta_id',
yField: [
'viewed',
'glances'
]
}
]

ExtJs 4 MVC Nested Layouts

I'm trying to implement a simple framework for an app. The idea is to create a background viewport type 'layout' with a north region containing the page header and an interchangeable center region.
When my app starts, a Login form is shown. If the user/password is ok, the form is destroyed and the main layout should appear. The main layout should insert a nested layout in its center region.
This is my background layout code:
Ext.define('DEMO.view.BackgroundLayout', {
extend: 'Ext.container.Viewport',
alias: 'widget.background',
requires: [
'DEMO.view.Main'
],
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>'
},
{
xtype: 'mainview',
region: 'center',
forceFit: false,
height: 400
}
]
});
me.callParent(arguments);
}
});
The main layout is this:
Ext.define('DEMO.view.Main', {
extend: 'Ext.container.Viewport',
alias: 'widget.mainview',
requires: [
'DEMO.view.MyGridPanel'
],
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
console.log('bb');
Ext.applyIf(me, {
items: [
{
xtype: 'mygridpanel',
region: 'center',
forceFit: false
},
{
xtype: 'container',
height: 38,
forceFit: false,
region: 'north',
items: [
{
xtype: 'button',
height: 34,
id: 'btnLogout',
action: 'logout',
text: 'Logout'
}
]
}
]
});
me.callParent(arguments);
}
});
As you can see, the center region needs an xtype named "mygridpanel". This is the code for it:
Ext.define('DEMO.view.ui.MyGridPanel', {
extend: 'Ext.grid.Panel',
border: '',
height: 106,
title: 'My Grid Panel',
store: 'MyJsonStore',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Id',
text: 'Id'
},
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'Sales',
text: 'Sales'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
disabled: true,
id: 'btnDelete',
allowDepress: false,
text: 'Delete'
},
{
xtype: 'button',
disabled: true,
id: 'btnEdit',
allowDepress: false,
text: 'Edit'
}
]
}
]
});
me.callParent(arguments);
}
});
My problem is that when I call Ext.create('DEMO.view.BackgroundLayout', {}); it only shows the nested layout, and the background layout is hidden, also I get this error in Chrome's console:
Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3
What I'm doing wrong?.
Thanks in advance,
Leonardo.