Mobile List Layout Support Image?

[Masteritec]

Hi,

May i know any mobile component can be support list with image.

Thanks

[x11]

there are no such components

[x11]

http://forums.unigui.com/index.php?/topic/14114-listview/

use TunimDBListGrid + XTemplate

[x11]

add columns to TunimDBListGrid

in JS - {0} - this is column index

TunimDBListGrid.ClientEvents.UniEvents

function beforeInit(sender, config){
	config.loadMask = true;
	config.loadingText = 'загрузка...';
	config.emptyText = 'даних немає'; 
	config.grouped = false;
	
	var descr = '<table class="tblResDescr">' +
                     '<tr>' +
                        '<td class="tdDbgRowID">ID {0}</td>' +
						'<td class="tdBtnPopup"><button class="btnPopup" data-id="{0}" type-id="{13}"><i class="fas fa-angle-down"></i></td>' +
                     '</tr>' +                     
                     '<tr>' +
                        '<td colspan="2">{1} ({2} {3})</td>' +
                     '</tr>' +                   
                     '<tr>' +
                        '<td colspan="2" class="tdDbgRowDescr">{6}, {5}-кімн, {7}, {8}</td>' +
                     '</tr>' +
                     '<tr>' +
					 '<td colspan="2">' +
					 '<div style="display: flex; justify-content: space-between">' +
                        '<div class="tdDbgRow">{4} м.кв.</div>' +
						'<div class="tdDbgRowArea">{[this.getFloors(values)]}</div>' +
					 '</div>' +
					 '</td>' +
                     '</tr>'+
                 '</table>';
  
  config.itemTpl = new Ext.XTemplate('<table class="tblRes">' +
					
                     '<tr>' +
                        '<td><img src="{12}"></td>' +
						'<td>' + descr + '</td>' +
                     '</tr>' +
                     
                     
                 '</table>',
				 {
					 getFloors: function(values){
						 if (values[11] == 1){
							 return values[10] + ' пов.'
						 }
						 else {
							 return values[9] + '/' + values[10]
						 }
					 }
				 }
				 );
}

 

[andyhill]

Can we have the corresponding CSS too ? Thanks

[x11]

Yes

[Masteritec]

On 10/25/2020 at 12:29 AM, x11 said:

add columns to TunimDBListGrid

in JS - {0} - this is column index

TunimDBListGrid.ClientEvents.UniEvents

function beforeInit(sender, config){
	config.loadMask = true;
	config.loadingText = 'загрузка...';
	config.emptyText = 'даних немає'; 
	config.grouped = false;
	
	var descr = '<table class="tblResDescr">' +
                     '<tr>' +
                        '<td class="tdDbgRowID">ID {0}</td>' +
						'<td class="tdBtnPopup"><button class="btnPopup" data-id="{0}" type-id="{13}"><i class="fas fa-angle-down"></i></td>' +
                     '</tr>' +                     
                     '<tr>' +
                        '<td colspan="2">{1} ({2} {3})</td>' +
                     '</tr>' +                   
                     '<tr>' +
                        '<td colspan="2" class="tdDbgRowDescr">{6}, {5}-кімн, {7}, {8}</td>' +
                     '</tr>' +
                     '<tr>' +
					 '<td colspan="2">' +
					 '<div style="display: flex; justify-content: space-between">' +
                        '<div class="tdDbgRow">{4} м.кв.</div>' +
						'<div class="tdDbgRowArea">{[this.getFloors(values)]}</div>' +
					 '</div>' +
					 '</td>' +
                     '</tr>'+
                 '</table>';
  
  config.itemTpl = new Ext.XTemplate('<table class="tblRes">' +
					
                     '<tr>' +
                        '<td><img src="{12}"></td>' +
						'<td>' + descr + '</td>' +
                     '</tr>' +
                     
                     
                 '</table>',
				 {
					 getFloors: function(values){
						 if (values[11] == 1){
							 return values[10] + ' пов.'
						 }
						 else {
							 return values[9] + '/' + values[10]
						 }
					 }
				 }
				 );
}

 

Can provide us demo source? Thanks

[x11]

https://www.youtube.com/watch?v=HfuhDBrSu6k

video + sources

[x11]

http://forums.unigui.com/index.php?/topic/15004-building-mobile-listview-with-floating-action-button/

 

[Masteritec]

Thank you