changing grid using extjs4

Question

I am working on an extjs 4.2 app in with php mysql backend. I have a json response with student name, Exam, subject, Marks in one row. Same are sent by mysql Database. I am trying to reconfigure grid as shown below:

enter image description here

So essentially marks of Sem-1 and English are part of one record. However, marks of Sem-2 and English are part of second record. So far I can show subjects and semesters. Semesters can be shown in grid column reconfigure as well. But my understanding is one complete record can be shown in a row. Maybe done through grid tpl. Can you please help me. If changes in json are required, we can do that as well

currently My json is {"data":[{"MarkID":20,"studentID":2,"ExamName":"Semester-1","Subject":"Science",‌"MaxMarks":100,"MarksRecvd":15},{"MarkID":21,"studentID":2,"ExamName":"Semester-2‌","Subject":"Social Science","MaxMarks":100,"MarksRecvd":25}]}

So every subject-Semester combination is a record and I can easily display every record in grid.

However I am looking to combine marks of various semesters in one subject...so in a way @TheShalit is right that json can b changed and all marks are displayed in one row

You can use grouped grid with subject | sem1 | sem2 | as grid headers and name : subject as group.Check this out:docs.sencha.com/extjs/4.2.0/#!/example/build/KitchenSink/… — Dev
I am sorry but i dont understand the example. I am not sure how will it translate into a table like shown above — user2677125
No it won't.It could be the other way around to meet your requirements using grouping as shown in example. — Dev
I understand that Dev. But somehow client's requirement is a tabular format of all examination marks — user2677125
You can use dataview.Please have a look : docs.sencha.com/extjs/4.2.0/#!/api/Ext.view.View — Dev

Dev Dev · Accepted Answer · 2014-06-18T11:21:13

You can use dataview for displaying data using custom layout templates and formatting.

The View uses an Ext.XTemplate as its internal templating mechanism, and is bound to an Ext.data.Store so that as the data in the store changes the view is automatically updated to reflect the changes.

Your tpl could be something like this :

var tableTpl = new Ext.XTemplate(
        '<tpl>'+
        '<table class="tableViewDemo" width="100%" height="100%" padding="" border="1">' + 
        '<tr>' + 
        '<td width="50%" height="5%" style="padding-left:2%;">Subject</td>' + 
        '<td width="50%" height="5%" style="padding-left:2%;">Semester-1 Marks</td>' + 
        '</tr>' + 
        '</tpl>' +
        '<tpl for=".">'+
        '<table class="tableViewDemo" width="100%" height="100%" padding="" border="1">' + 
        '<tr>' + 
        '<td width="50%" height="5%" style="padding-left:2%;">{subject}</td>' + 
        '<td width="50%" height="5%" style="padding-left:2%;">{sem1}</td>' + 
        '</tr>' + 
        '</tpl>'            
    );

Here is the simple demo in context to your requirement : DataView ExJs4.2 Demo

You can modify tpl accordingly.For more details : Ext.XTemplate

changing grid using extjs4

2 Answers