CODEWITHSUNDEEP
htmlcordovasencha-touch-2
Arindam Mukherjee
Arindam Mukherjee

Reputation: 2285

How to make a list with multiple column in each row in Sencha touch?

I want a list with multiple columns in each row. The row also can consist the image. I am able to get the values from store. But unable to display them in a proper way. i need the view like below:

enter image description here

Please help. Thanks in advance

Upvotes: 3

Views: 2425

Answers (2)

Ayesha
Ayesha

Reputation: 255

Try to do with div structure means div within div according to your data.

Upvotes: 1

Kalel Wade
Kalel Wade

Reputation: 7792

The following is how I do it. Create a view for the list as seen below. Not sure how you are creating your views so add extra code if your still having trouble.

Ext.define('AppName.view.CustomList', {
  extend: 'Ext.List',
  xtype: 'customlist',
  config: {
    store: 'StoreName',
    itemTpl: Ext.create('Ext.XTemplate',
                '<div style="float:left; width: 50%">{Column1Name}</div>',
                '<div style="float:left; width: 50%">{Column2Name}</div>',
                '<div style="clear:both"></div>'
        )
  }
});

EDIT: the following is an update that would be the layout you could use. It should be close, you may need to clear:both another place and I am sure this could be cleaner but I am just giving you something to work with.

 itemTpl: Ext.create('Ext.XTemplate',
            '<div>',
              '<div style="float:left; width: 30%">{firstName}</div>',
              '<div style="float:left; width: 40%">{feedbackHeading}</div>',
              '<div style="float:left; width: 30%">{date}</div>',
            '</div>',
            '<div>',
              '<div style="float:left; width: 30%">{lastName}</div>',
              '<div style="float:left; width: 40%">{feedbackSummary}</div>',
              '<div style="float:left; width: 30%">{location}</div>',
            '</div>',
            '<div style="clear:both"></div>'
    )

Upvotes: 3

Related Questions