Mobile ListView with data custom design

[mhmda]

Online demo: http://5.189.151.122:8037/m

 

Project: http://3msoft.net/mhmd/unimlistview.rar

 

 

 

 

 

 

[topajin]

Very good! Thank you very much

[epos4u]

thank you mohammad, this is really awesome and great way to learn

 

is it possible to replace a avatar.png with image from a database

 

Thank you

[rasaliad]

Thank you, a very good and productive example!!!!

[sinab]

thank you my friend

[mehmet07]

How do I change the color of the conditionally post?

[mhmda]

Sorry I don't understand.

[Abaksoft]

Very nice Mohammed,

الف شكر

[mehmet07]

I'm sorry my english is bad.

 

 

[mhmda]

Use function inside itemTpl:

config.itemTpl= new Ext.XTemplate(
    '<table class="lsttbl">'+
                 '<tr>'+                 
                  '<td class="lsttbl_title" style="width:100px;padding-bottom:10px;">שם מוצר:</td>'+
                  '<td class="lsttbl_info" style="color:#e91e63;padding-bottom:10px;">{3}</td>'+
                 '</tr>'+
                 '<tr>'+                  
                  '<td class="lsttbl_title" style="padding-bottom:10px;">כמות:</td>'+
                  '<td class="lsttbl_info" style="padding-bottom:10px;">{4}</td>'+
                 '</tr>'+
                 '<tr>'+                  
                  '<td class="lsttbl_title" style="padding-bottom:10px;">זמן:</td>'+
                  '<td class="lsttbl_info" style="padding-bottom:10px;">{5}</td>'+
                 '</tr>'+                                                                
                '</table>'+
                '<img src="files/images/ic_prdct{7}.png" style="position:absolute;left:20px;top:15px;"/>'+
                '{[this.getReady(values)]}',
    {
      getReady: function(values) {
            if(values[6]) return '<img src="files/images/ready.png" style="position:absolute;left:20px;top:20px;"/>';
            else return '';           
        }
    }
 );  

[mehmet07]

thanks mohammad .  i will try.

[mehmet07]

works perfect , thanks

[mehmet07]

Is it possible to make a list like in the picture?

[mhmda]

of course:

 

For two columns use this (add this to mainmodule css):

.list .x-list-item {
	display: inline-block;
	width: 50%;
} 

For 3 columns:

.list .x-list-item {
	display: inline-block;
	width: 33%;
} 

Just divide the 100% width to what you want, for 4 columns use 25% and so on.... 

[epos4u]

Brother Mohammad, ur totally awesome brother

 

i think you should write a beginners guide to UniGui

 

thank you for all your help in this forum

[mehmet07]

Mohammad is a great person.

thanks

[mhmda]

You all welcome....

[mehmet07]

Mainmodule has no css feature. i add server module CustomCSS.

.list .x-list-item {
    display: inline-block;
    width: 50%;
}

But there was no change.

[mhmda]

list is the 'cls' for your list.

config.cls='list'

[mehmet07]

thanks mohammad

[Farshad Mohajeri]

Perfect!

[valramosr]

I can use this at DbGridMobile?

I need change my DBGrid, to use order style.

[Georges Soares]

Based on this example I've put up a new customization, with several new features, and even with Floating Button, as soon as I can put more information and details

[epos4u]

Based on this example I've put up a new customization, with several new features, and even with Floating Button, as soon as I can put more information and details

 

 

looks great

[Georges Soares]

If you want to see a little more of what I was able to do, go to the link below, it's an application that was initially developed 100% in android studio, then I migrated part in android studio and visual studio .net, now I migrated to uniGUI and I'm happier with Result, in fact we now have 3 framework running there:

 

1. APK made in Android Studio running internal the uniGUI

2. UniGUI application running and communicating with Android Studio via J.Script

3. Gallery of images in VS C # .Net

 

I also use components from Paulo da Fenix (http://app.fenixerp.com.br/unigui/), very top and some run on mobile.

 

https://play.google.com/store/apps/details?id=br.com.angelsistemas.guiadaserra2013&hl=pt_BR