Develop Reference

Feeding the dataview from JsonStore

Feeding the viewdata from the jsonstore
I want to use a JsonStore to feed my dataview. currently with the code below, the store is empty in the dataview. For testing, I wrote some code in the controller before opening the window and I can
see that the restful service retrieves data - getActivitiesToRescueCallback --> responce.responseText.
How can I feed my dataview with the Jsonstore?
In th ViewController:
getActivitiesToRescueCallback : function(options, success, response) {
if (success)
var result = Ext.decode(response.responseText); // Here I am getting data
},
getActivitiesToRescue : function() {
Ext.Ajax.request({
url : '/test/json_p',
params : {
"params[]" : "RESCUE",
"respName" : "",
"method" : "GetActivities",
"format" : "json"
},
callback : 'getActivitiesToRescueCallback',
scope : this
});
},
**View**
Ext.define('Tuv.test.rescue.RescueView', {
extend : 'Ext.window.Window',
alias : 'widget.rescueview',
alias : 'controller.rescueview',
bind : {
title : '{rescueTexts.masseRescue}'
},
height : 400,
width : 600,
constrainHeader : true,
maximizable : true,
closeAction : "hide",
layout : 'card',
activeItem : 0,
items : [ {
xtype : 'panel',
title : 'check activities',
layout : 'hbox',
border : false,
layoutConfig : {
align : 'stretch'
},
tbar : [ {
xtype : "button",
text : "copy",
handler : function() {},
scope : this
} ],
items : [ {
autoScroll : true,
width : 150,
items : {
xtype : 'dataview',
listeners : {
'afterrender' : function(comp) {
console.log('Test');
},
scope : this
},
store : new Ext.data.JsonStore({
url : '/test/json_p',
baseParams : {
"params[]" : "RESCUE",
respName : "",
method : "GetActivities",
format : "json"
},
idProperty : 'ACT_ID',
fields : [ 'ACT_ID', '_ACT_TYPE', '_FIRST_FORM', 'PRUEFSTATUS', '_DEBUG', '_SYNC_STATUS', '_SYNC_STATUS2', 'EQART', 'INVNR', 'ZTSPRID', 'ANLAGE_ZTSPRID', 'ZTSPRIDT' ]
}),
itemSelector : 'tr.dataRow',
tpl : new Ext.XTemplate('<table id="dataRescueTable">' + '<tpl for=".">', '<tr class="dataRow"><td>' + '<span <tpl if="STATUS==50">style="font-weight: bold;color:green"</tpl>>{name}</span></td></tr>', '</tpl>', '</table>')
}
} ],
bbar : {
buttonAlign : 'right',
items : [ {
text : "next",
handler : function(button) {
},
scope : this
} ]
}
} ]
});

To load the store I had to call store.load() or adding autoLoad: true as a config to the store.

Jstree: How can i avoid to check disabled checkbox?

I have a tree in which few of the nodes are disabled.If the parent is enabled and few of its child are in disabled state and i try to check the parent node then all the nodes are checked.I want only nodes which are enabled should be checked.
$('#Tree').jstree({
plugins: ["themes","checkbox","json_data","ui","types","real_checkboxes"],
"checkbox" : {
"keep_selected_style" : false,
"tie_selection" : false,
"three_state" : true,
"real_checkboxes" : true
},
"core":
{
"themes": {
"icons": false
},
"data":Products
},
"types":{
"types":{
"disabled" : {
"check_node" : false,
"uncheck_node" : false,
"select_node": false,
"open_node": false,
"close_node": false,
"create_node": false,
"delete_node": false
} ,
"directory" : {
"check_node" : false,
"uncheck_node" : false
},
"default" : {
"check_node" : function () {
if(node_should_be_disabled) return false;
return true;
},
"uncheck_node" : function () {
if(node_should_be_disabled) return false;
return true;
}
}
}
}
});

You can try this
$('.altGrup').jstree({
"checkbox": {
three_state: false
},
"plugins": ["checkbox"]
});

Reload Datatable with new aaData value

How to refresh the Datatable, When new Json data is sent
POST request Receives data , which is sent to LoadTable function to populate the datatable.
function initializeTable(){
$("#submitbutton").on(
'click',
function(){
$.ajax({
type : 'POST',
url : 'rest/log/events',
data : {
fromTime : $("#fromTime-filter").val(),
toTime : $("#toTime-filter").val(),
Text : $("#search-filter-input").val()
},
success : function(data) {
loadTable(data);
},
error : function(jqXHR, textStatus, errorThrown) {
showAjaxError(jqXHR, textStatus, errorThrown,
$("#error-msg"));
}
});
});
}
'data' is passed to Load function, which loads the data to a table correctly the first time.
When i submit the POST request the second time, i see New 'data' in the browser console, but the Datatable is not refreshed.
But when i Refresh the Page(datatable is cleared) and then do a new POST, new data loads normally. I want the new data to be loaded without the need to refresh the page.
function loadTable(data)
{
$('#report-table').dataTable( {
bProcessing : true,
bJQueryUI : true,
bLengthChange : false,
bDestory : true,
bRetrieve : true,
bStateSave : true,
oTableTools: {
sRowSelect: "multi",
aButtons: [ "select_all", "select_none" ]
},
iDisplayLength : 20,
"aaData": data,
"aoColumns": [
{ "mData" : "date" },
{ "mData" : "name" },
{ "mData" : "type" },
{ "mData" : "section" }
]
} );
}

It looks to me like you're using DataTables v1.9. Here's how I'd do it:
function loadTable(data)
{
var table = $('#report-table');
if ( ! $.fn.DataTable.fnIsDataTable( table[0] ) ) {
table.dataTable( {
bProcessing : true,
bJQueryUI : true,
bLengthChange : false,
bDestory : true,
bRetrieve : true,
bStateSave : true,
oTableTools: {
sRowSelect: "multi",
aButtons: [ "select_all", "select_none" ]
},
iDisplayLength : 20,
"aaData": data,
"aoColumns": [
{ "mData" : "date" },
{ "mData" : "name" },
{ "mData" : "type" },
{ "mData" : "section" }
]
} );
} else {
table.dataTable().fnUpdate(data);
}
}
Another option:
function loadTable(data)
{
var table = $('#report-table');
if ( ! $.fn.DataTable.fnIsDataTable( table[0] ) ) {
table.dataTable( {
bProcessing : true,
bJQueryUI : true,
bLengthChange : false,
bDestory : true,
bRetrieve : true,
bStateSave : true,
oTableTools: {
sRowSelect: "multi",
aButtons: [ "select_all", "select_none" ]
},
iDisplayLength : 20,
"aaData": data,
"aoColumns": [
{ "mData" : "date" },
{ "mData" : "name" },
{ "mData" : "type" },
{ "mData" : "section" }
]
} );
} else {
table.dataTable().fnDestroy();
loadTable(data);
}
}

Clicking a button generated by Javascript with Selenium

I'd like to use Selenium or other package to automatically click the "Copy" button on one web page.
It seems that the button is generated by Javascript. Is it possible to do so? Thanks in advance!
<script src="media/portal/js/table-maker.js" type="text/javascript"></script>
Here is the piece of code in table-maker.js related to the "Copy" button:
this.generateEntityTable = function(entityName, ajaxDataProperty,
urlSuffix, objectHeadings, objectFields, hiddenFields,
tableSelector, tableId,
emptyMessage) {
if (!emptyMessage) {
emptyMessage = "No data available in table";
}
var oTable = $(tableSelector);
var tableElt = oTable[0];
var tableSource = {
"sourceType" : "json",
"structure" : {
"headings" : objectHeadings,
"fields" : objectFields
}
};
TableUtils.buildTableHtml(tableElt, tableSource.structure.headings);
var tableToolsProps = null;
if ('portalFile' == entityName) { // table does not allow row selection.
tableToolsProps = {
"aButtons" : []
};
} else if ('bspsample' == entityName) {
tableToolsProps = {
"aButtons" : [{
"sExtends": "copy",
"mColumns": "all"
},
{
"sExtends": "csv",
"mColumns": "all"
},
{
"sExtends": "xls",
"mColumns": "all"
}],
"sSwfPath" : "media/table-tools-2.1.5/media/swf/copy_csv_xls.swf"
};
} else {
tableToolsProps = {
"sRowSelect": "single",
"aButtons" : []
};
}
// this is to prevent DataTables from putting warnings or errors in an alert box.
$.fn.dataTableExt.sErrMode = 'throw';
try {
oTable.dataTable({
"bDestroy" : true,
"bRetrieve" : true,
"bJQueryUI" : true,
"bProcessing" : true,
"sPaginationType" : "full_numbers",
"sAjaxSource" : initialUrl + "rest/"+ urlSuffix,
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "GET",
"url": sSource,
"success": function(result){fnCallback(result);},
"failure":function(result){alert('failure');}
} );
},
"sAjaxDataProp" : ajaxDataProperty,
"aoColumns" : this.fieldsToColumnProperties(objectFields, objectHeadings,
hiddenFields, entityName, tableSelector, tableId),
"sDom": 'T<"clear">lfrtip',
"oTableTools": tableToolsProps,
"oLanguage": {
"sEmptyTable": "Please wait - Fetching records"
},
fnInitComplete: function(oSettings){
oSettings.oLanguage.sEmptyTable = emptyMessage;
$(oTable).find(".dataTables_empty").html(emptyMessage);
}
});
} catch (err) {
var messageHandler = new MessageHandler();
messageHandler.showError("Internal client error: " + err + " Unable to create table for entity: "
+ entityName);
};
// this is required for row_selected styles to work.
oTable.addClass('display');
oTable.show(); // in case it was hidden
return oTable;
};

Chaining methods that have on your body ajax call

I have this class:
function Clazz() {
this.id;
this.description;
}
Clazz.prototype._insert = function(_description, _success, _error) {
this.description = _description;
$.ajax({
type : "PUT",
url : "api/route",
data : JSON.stringify(this),
dataType : "json",
contentType : "application/json;charset=UTF-8",
success : function() {
_success($("#message"), 'OK');
},
error : function() {
_error($("#message"), 'FAIL');
}
});
};
Clazz.prototype._findAll = function(_callback) {
$.ajax({
type : "GET",
url : "api/route",
dataType : "json",
success : function(data) {
_callback(data);
}
});
};
On the button click, I have this:
var clazz = new Clazz();
clazz._insert($("#description").val(), success, error);
clazz._findAll(loadCallback);
Below the loadCallback method:
function loadCallback(data){
var oTable = $('#table').dataTable({
"bRetrieve": true,
"bDestroy" : true,
"bFilter" : false,
"bLengthChange" : false,
"bInfo" : false,
"sDom" : "<'row'<'span5'l><'span5'f>r>t<'row'<'span5'i><'span5'p>>",
"sPaginationType" : "bootstrap",
"oLanguage" : {
"sProcessing" : "Loading ...",
"sZeroRecords" : "No records",
"oPaginate" : {
"sNext" : "",
"sPrevious" : ""
}
},
"iDisplayLength" : 4,
"aaData" : data,
"aoColumnDefs" : [
{ "aTargets" : [0], "mData" : "description", "sTitle" : "My Data" },
{ "aTargets" : [1],
"sWidth" : "20px",
"mData" : "id",
"bSortable" : false,
"mRender" : function ( data ) {
return '<img src="img/img01.png" style="height: 20px; width: 20px;"/>';
}
},
{ "aTargets" : [2],
"sWidth" : "20px",
"mData" : "id",
"bSortable" : false,
"mRender" : function ( data ) {
return '<img src="img/img02.png" style="height: 20px; width: 20px;"/>';
}
},
{ "aTargets" : [3],
"sWidth" : "20px",
"mData" : "id",
"bSortable" : false,
"mRender" : function ( data ) {
return '<img src="img/img03.png" style="height: 20px; width: 20px;"/>';
}
}
],
"fnHeaderCallback" : function( nHead ) {
$(nHead.getElementsByTagName('th')[0]).attr("colspan","4");
for(var i = 1; i <= 3; i++){
$(nHead.getElementsByTagName('th')[1]).remove();
}
},
"fnRowCallback" : function( nRow ) {
$(nRow.getElementsByTagName('td')[1]).attr("width","20px");
$(nRow.getElementsByTagName('td')[2]).attr("width","20px");
$(nRow.getElementsByTagName('td')[3]).attr("width","20px");
}
});
oTable.fnClearTable();
oTable.fnAddData(data);
oTable.fnDraw();
}
I want that the method clazz._findAll(loadCallback); only execute after the clazz._insert finish.
I already tried $.when but it did not work.

$.when should work if clazz._insert returns the $.ajax function call (which it currently does not).
If you return the $.ajax call, you should be able to do something like:
$.when(clazz._insert(...stuff...)).then(clazz._findAll(...stuff...));
Might be a good idea to double-check the documentation on deferred objects.

I solved doing this:
Putting return $.ajax(...stuff...) in the insert method
Using
$.when(clazz._insert($("#description").val())).done(
function(){
clazz._findAll(loadCallback);
}
);
I had to call the _findAll inside an anonimous function.