Sure!
I used the prototype, because I want to reuse some components, declaring them once, and invoking them whenever I need them.
File JS N.1 (pageBaseViews.js)
function pageBaseViews() {
}
pageBaseViews.prototype.device = function(device){
$('#details').propertygrid('appendRow', {
name: "Device",
value: device,
group: "details"
});
};
pageBaseViews.prototype.whoOwns = function(whoOwns){
var dim = 0;
try{
var split = whoOwns.split(",");
var dim = split.length;
} catch (Exception) {
var dim = 1;
}
if(dim>1) {
$.each(split, function (index, value) {
$('#details').propertygrid('appendRow', {
name: "whoOwns - " + (index+1),
value: value,
group: "details"
});
});
} else {
$('#details').propertygrid('appendRow', {
name: "whoOwns ",
value: whoOwns,
group: "details"
});
}
};
pageBaseViews.prototype.associateTo = function(associateTo , type_Associate, name) {
var dim = 0;
try{
var split1 = associateTo.split(",");
var split2 = type_Associate.split(",");
dim = split1.length;
} catch (Exception) {
dim = 1;
}
if(dim>1) {
$.each(split1, function (index, value) {
$('#details').propertygrid('appendRow', {
name: "Associate To",
value: value,
group: "Associate - " + name + " - " + value
});
$('#details').propertygrid('appendRow', {
name: "Type Associate",
value: split2[index],
group: "Associate - " + name + " - " + value
});
});
} else {
$('#details').propertygrid('appendRow', {
name: "Associate To",
value: associateTo,
group: "Associate"
});
$('#details').propertygrid('appendRow', {
name: "Type Associate",
value: type_Associate,
group: "Associate"
});
}
}; ....
pageBaseViews.prototype.initialized= function() {
$('#details').propertygrid({
scrollbarSize: 0,
groupFormatter: groupFormatter,
showGroup: true,
columns: [[
{
field: 'name',
title: 'Proprierty ',
width: 150
},
{
field: 'value',
title: 'Value',
width: 450
}
]]
});
$('#infoViews').window({
width:600,
maxHeight:950,
closed: true,
maximizable: false,
minimizable: false,
resizable: false,
collapsible: true,
onBeforeClose:emptyGrid_Modify,
modal:true
});
$('#infoViews').window('center');
function emptyGrid_Modify() {
$('#details').propertygrid('loadData', {"total": 0, "rows": []});
}
function groupFormatter(fvalue, rows){
return fvalue + ' - <span style="color:red">' + rows.length + ' rows</span>';
}
};
Now, I create a specific device Object, example Monitor (Monitor.js)
function Monitor(row) {
Monitor.prototype = wide;
Monitor.prototype = views_Monitor(row);
Monitor.prototype = new pageBaseViews();
}
function Wide(detail, wide) {
$(detail).propertygrid('appendRow', {
name: "Wide",
value: wide==0 ? "NO" : "YES" ,
group: "Info Model"
});
}
function views_Monitor(row) {
$.get("getDetails.php", {id: row.id, device: row.device})
.done(function (info) {
var result = $.parseJSON(info);
$('#infoViews').window({title: result.name + " (" + result.device+ ")"});
Monitor.prototype.initialized();
Monitor.prototype.device(result.device);
Monitor.prototype.whoOwns(result.owns);
Monitor.prototype.associateTo(result.associateTo, result.typo_Associate, result.name);
Wide('#details', result.wide);
$('#infoViews').window({closed: false, width:'auto',height:'auto'});
$('#infoViews').window('expand');
$('#details').propertygrid({width:'auto',height:'auto'});
$('#infoViews').window('center');
});
}
I hope I put everything!
Thanks so much
