Jump to content
uniGUI Discussion Forums
mhmda

Mobile ListView with data custom design

Recommended Posts

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

Share this post


Link to post
Share on other sites

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 '';           
        }
    }
 );  

Share this post


Link to post
Share on other sites

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.... 

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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

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

But there was no change.

Share this post


Link to post
Share on other sites

list is the 'cls' for your list.

config.cls='list'

Share this post


Link to post
Share on other sites

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

post-4422-0-18365000-1496961152_thumb.jpg

post-4422-0-29296700-1496961154_thumb.jpg

  • Upvote 2

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

×