PDA

View Full Version : Correct way to create rows dynamically



bacha
10 Mar 2014, 10:24 AM
Hello,

I have created a small app to fetch the details of a student given the student id. I am using a table layout for the summary page. I have created a store to collect the mark details of the student.

The page looks like this
48225


I would like to get some pointer on how to display each marks row by row under the Mark List section. Should I be using an iterate logic or use something like grid to show the marks.

My Panel looks like this


Ext.define('App.view.DetailsPanel', {
extend : 'Ext.panel.Panel',
alias : 'widget.detailspanel',
layout : {
type : 'table',
// The total column count must be specified here
columns : 2,
tableAttrs : {
style : {
width : '100%',
height : '60%',
}
}
},
defaults : {
// applied to each contained panel
bodyStyle : 'padding:20px'
},
items : [ {
html : '<b>Student Details</b>',
border : false
}, {
html : 'Age'
}, {
html : 'Address'
}, {
html : 'Course Details',
}, {
html : 'Start Date'
}, {
html : 'End Date'
}, {
html : 'Mark List',
height : 60,
rowspan : 2
//Would like to have the iteratiion logic to dispay the details row by row in the MarkList store
}, {
html : 'Certifications'
}, {
html : 'Specialization'
} ]


});


Any help/code snippets is appreciated.

bacha
11 Mar 2014, 6:01 AM
Any help folks??

ColeHinkel
11 Mar 2014, 8:34 AM
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.Panel
Should be able to see a basic grid and the code behind it in the link.
It is "dynamic" in the aspect that it adds rows to the grid when you add records to the store that the grid is tied to.

Hope it is what you are looking for.

The documentation is very valuable for all kinds of examples, and details all the possible config options.

bacha
11 Mar 2014, 10:09 AM
I was looking for more of a basic HTML table structure. Something like this

48240

ColeHinkel
11 Mar 2014, 10:25 AM
Writing the HTML is fine if that's how you want to do it.
I've linked a grid that looks the same if you are interested.
https://fiddle.sencha.com/#fiddle/46i

Compared to my previous post, I've renamed the fields, removed the title, and added
hideHeaders: true to the config.

bacha
11 Mar 2014, 12:04 PM
Yes, this was what I was looking for.

Thanks again!!