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:

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

Answer 1

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

Answer 2

Can you show what you are trying to achieve?

I think the best way is to change the json record and add data as [subject,s1,s2,s3,s4]