1

I have a scenario like to display the records coming from a database query 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.

The following is the code which displays the records in only one column (one below another)

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], '0,000') / Ext.util.Format.number(analyst_audit_qa[1], '0,000');

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('{1}', Ext.util.Format.number(analyst_audit_qa[2], '0,000'));
}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
        });
}
maincont.doLayout();

Can you please help me on this? Please let me know if you need anything more.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Kiran Kumar
  • 181
  • 1
  • 4
  • 13
  • Nope, this code does not define whether the data is shown in vertical, column or horizontal layout. The definition of `maincont`, especially the `layout` definition, defines how the data is displayed, and it should be quite easy to switch to another layout. – Alexander Dec 12 '15 at 01:50
  • yes, it doesnt define to display in vertical but by default, it adds the DIV's in a vertical way.. I want to convert that in to horizontal @Alexander, if you have any suggestions please let me know... thanks – Kiran Kumar Dec 12 '15 at 02:35

2 Answers2

0

You have to add some css class to the displayfields to make them inline (display:inline-block). I would also recommend you to use tpl instead of adding displayfields. Just create a container/panel, add tpl config with the desired html and set db data to it. It will be faster. In tpl you can use sth like this:

<tpl for=".">
    <div style="display:inline-block;width:100px;">some value</div>
    <tpl if="xindex % 5 = 0"><br/></tpl>
</tpl>

Here, it will add a line break after every 5 value.

abeyaz
  • 3,034
  • 1
  • 16
  • 20
0

Since you are adding one component (in this case: displayfield) per record, it should suffice to define a checkboxgroup layout on the container.

I have prepared a fiddle for you, showing the layout:

https://fiddle.sencha.com/#fiddle/12g4

Alexander
  • 19,906
  • 19
  • 75
  • 162