PDA

View Full Version : Div's in a rows using Ext Js



skirankumar1982
28 Dec 2015, 7:17 PM
I have a scenario like to display the records coming from a database query (ajax call) in 5columns in a row using Ext-Js (NOT by using GRID's)
For example: if the query returns 10 records to we need to have 2 rows with 5columns in each row.

my code goes as follows, but displays all 10 records in a single column.






var config = {
// height is set here to correctly display loading mask
bodyStyle: 'padding: 0px; border: 0px;',
labelWidth: 250,
labelAlign: 'right',
url: ajax_call_goes_here',
header: false,
items: [
{
layout: 'column',
bodyStyle: "padding: 5px;",
id: 'stats-wrapper',
labelAlign: "right",
items: [
{
layout: 'form',
columnWidth: 0.25,
labelWidth: 180,
bodyStyle: "border: 0px;"
}, {
layout: 'form',
columnWidth: 0.25,
labelWidth: 155,
bodyStyle: "border: 0px;",
items: [
{
xtype: 'displayfield',
id:'temp_field'
}
]
}
]
}
]
};




for( var c=0;c<audits.length;c++){
var analyst_audit_qa = audits[c].split(":");
var cont = maincont.items.items[1];

var qaPercentage = "0.00";
if ((Ext.util.Format.number(analyst_audit_qa[1], '0,000') != 0) && (Ext.util.Format.number(analyst_audit_qa[2], '0,000') != 0))
qaPercentage = 100 * Ext.util.Format.number(analyst_audit_qa[2], '0000') / Ext.util.Format.number(analyst_audit_qa[1], '0000');

if (qaPercentage != "0.00") qaPercentage = qaPercentage.toFixed(2);

var analyst_total_reviewed;
analyst_total_reviewed = Ext.util.Format.number(analyst_audit_qa[1], '0,000');

var analyst_qa_changes;
if (analyst_audit_qa[2] != 0){
analyst_qa_changes = String.format('<a href="{0}pci-analyst/url-qa-notes/list/userid/{2}/statMonth/{3}">{1}</a>', XX_BASE_URL, Ext.util.Format.number(analyst_audit_qa[2], '0,000'), Ext.util.Format.number(analyst_audit_qa[3], '0'), selectedQaDate);
}else{
analyst_qa_changes = Ext.util.Format.number(analyst_audit_qa[2], '0,000');
}

cont.insert(c, {
xtype: 'displayfield',
fieldLabel: "<b>"+analyst_audit_qa[0]+"</b><br />"+"QA Percentage: "+"<br />"+"Total Reviewed: "+"<br />"+"Changes made",
id: 'analyst_audit_qa'+c,
value: "<br />"+qaPercentage+"%<br />"+analyst_total_reviewed+"<br />"+analyst_qa_changes
});
}

can you guys please help me on this. please let me know if you need anything more.

skirankumar1982
28 Dec 2015, 7:18 PM
if any jsfiddle will be helpful, so that I can integrate it directly... Thanks

jdkhamba
29 Dec 2015, 4:52 AM
It is not very practical to mess with the data that is coming from the server in a way the client needs it to be displayed. I would first make sure the data is formatted correctly in the server just in a way the client needs it. In this case the server should return 2 rows with 5 columns in correct json format. After that it becomes it becomes trivial to display something like that in a grid or a dataview.

If it is absolutely impossible to format the data in the server, then at the very least the incoming data from the server should be first transformed to the correct format in the client. In other words, you would need an array of objects where each object has 5 properties and there would be two such objects in the array. Can you post some sample data of what is coming from server and how it needs to finally look like?