Discovered Mohammad's Project

[RobYost]

http://forums.unigui.com/index.php?/topic/8954-me-myself-cart-a-new-mobile-app-with-full-source-code/

 

I have been studying this project from Mohammad.

 

I wanted to emulate how he did his grid with multiple lines and different formatting within.

It looks like this is how it is done:

config.itemTpl= new Ext.XTemplate(
    '<table class="lsttbl" border="0" height="40px">'+
                 '<tr>'+                 
                  '<td class="lsttbl_title" style="width:50px;vertical-align:top;">Item:</td>'+
                  '<td class="lsttbl_info" colspan="4" style="color:#e91e63;vertical-align:top;">{1}</td></tr><tr>'+                                                                  
                  '<td class="lsttbl_title" style="width:50px;vertical-align:bottom;">Quantity:</td>'+
                  '<td class="lsttbl_info" style="width:40px;text-align:center;vertical-align:bottom;">{2}</td>'+
                  '<td class="lsttbl_title" style="width:50px;vertical-align:bottom;">Price:</td>'+
                  '<td class="lsttbl_info" style="width:40px;text-align:left;vertical-align:bottom;">{3} $</td>'+
                  '<td></td>'+                  
                 '</tr></table>'+
                 '<img onclick="javascript:frmUserMain.grdNewCart.deleteItem(\'{0}\')"'+
                  ' src="files/images/del1.svg" height="24px" style="position:absolute;right:10px;top:18px;"/>'
 );  

This is a real breakthrough to see that I can use tables within a DBRow.

 

It looks to me that {0}...{3} is the data. Is this from TVCLDBColumns[0..4]?

 

I tried something very simple in the Column Resize Demo Project.

C:\Program Files (x86)\FMSoft\Framework\uniGUI\Demos\Touch\DBGrid Column Resize

 

function beforeInit(sender, config)
{
 config.itemTpl= new Ext.XTemplate('<p> a {1} b {2} c {3} </p>');  
}

It still shows the rows normally.

 

Is there something else I need to do to make this work?

 

Thanks for sharing your code.

[RobYost]

I am interested in how he made the panel at the top of the [My cart] tab. With Share/Edit/Delete/Lock

 

I found the code for that in Ext.data.Store (under ClientEvents)

 

I understand the table part. But I don't understand the sender.SetGrouper.

or what Ext.Defer means.

function store.load(sender, records, successful, operation, eOpts)
{
  sender.setRemoteSort=false;
  sender.setGrouper({
        groupFn: function (item) {
            if(item.get('8')=='true')                          
             return '<span style="display:none;">'+item.get('0')+'</span>'+
             '<table class="tblSlati" style="table-layout:fixed;">'+
             '<tr class="spaceUnder">'+
             '<td><img height="30px" src="files/images/mshare10.svg"'+
              ' style="margin:auto;" onclick="javascript:frmUserMain.grdAllCarts.showsharethiscart(\''+item.get('0')+'\')"/></td>'+
             '<td><img height="30px" src="files/images/medit2.svg"'+
              ' style="margin:auto;" onclick="javascript:frmUserMain.grdAllCarts.friendEditCart(\''+item.get('0')+'\')"/></td>'+
             '<td><img height="30px" src="files/images/mcancelshare.svg"'+
              ' style="margin:auto;" onclick="javascript:frmUserMain.grdAllCarts.friendCancelShareCart(\''+item.get('0')+'\')"/></td>'+                                          
              '</tr><tr>'+
              '<td>Shared</td><td>Edit</td><td>Remove sharing</td>'+
              '</tr></table>'+
              '<hr class="style3"/>'+
              '<table class="tblSlati" style="font-size:14px;">'+
              '<tr class="spaceUnder"><td>'+item.get('1')+'   '+item.get('2')+' '+item.get('7')+
              ' <span dir="ltr">₪ '+ item.get('6')+'</span>'+
              '</td></tr></table>';    
            else
             return '<span style="display:none;">'+item.get('0')+'</span>'+
             '<table class="tblSlati" style="table-layout:fixed;">'+
             '<tr class="spaceUnder">'+
             '<td><img height="30px" src="files/images/mshare3.svg"'+
              ' style="margin:auto;" onclick="javascript:frmUserMain.grdAllCarts.sharethiscart(\''+item.get('0')+'\')"/></td>'+
             '<td><img height="30px" src="files/images/medit2.svg"'+
              ' style="margin:auto;" onclick="javascript:frmUserMain.grdAllCarts.editCart(\''+item.get('0')+'\')"/></td>'+
             '<td><img height="30px" src="files/images/mdel1.svg"'+
              ' style="margin:auto;" onclick="javascript:frmUserMain.grdAllCarts.delthiscart(\''+item.get('0')+'\')"/></td>'+ 
             '<td><img height="30px" src="files/images/mlock2.svg"'+
              ' style="margin:auto;" onclick="javascript:frmUserMain.grdAllCarts.lockthiscart(\''+item.get('0')+'\')"/></td>'+                
              '</tr><tr>'+
              '<td>Share</td><td>Edit</td><td>Delete</td><td>قفل</td>'+
              '</tr></table>'+
              '<hr class="style3"/>'+
              '<table class="tblSlati" style="font-size:14px;">'+
              '<tr class="spaceUnder"><td>'+item.get('1')+' '+item.get('2')+' '+item.get('7')+
              ' <span dir="ltr">$ '+ item.get('6')+'</span>'+
              '</td></tr></table>';           
        },
       sortProperty: '1'
    }); 
    Ext.defer(function() {frmUserMain.grdAllCarts.deselectAll();}, 550);

[Sherzod]

Hi,

 

http://docs.sencha.com/touch/2.3.1/#!/api/Ext.data.Store-cfg-grouper

http://docs.sencha.com/touch/2.3.1/#!/api/Ext-method-defer

[RobYost]

From the above example, I tried this in the Column Resize Demo Project.

function store.load(sender, records, successful, operation, eOpts)
{
   sender.setGrouper({
      groupFn: funtion (record) {
         return '<p> Company Name' + record.get('1') + </p>';
      }, sortProperty: '1'
   });   
}

>>>  But the demo project hangs at the very beginning and doesn't load.

>>>  What did I do wrong?

 

 

The Sencha documentation for setGrouper is:

Ext.define('People', {
extend: 'Ext.data.Store',

config: {
   fields: ['first_name', 'last_name'],

       grouper: {
           groupFn: function(record) {
               return record.get('last_name').substr(0, 1);
           },
           sortProperty: 'last_name'
       }
   }
});

does sender = store?

what is in records, successful, operation, and eOpts?

 

Are these concepts for Sencha only or do they work in javascript?

[Sherzod]

Hi,

 

From the above example, I tried this in the Column Resize Demo Project.

function store.load(sender, records, successful, operation, eOpts)
{
   sender.setGrouper({
      groupFn: funtion (record) {
         return '<p> Company Name' + record.get('1') + </p>';
      }, sortProperty: '1'
   });   
}

>>>  But the demo project hangs at the very beginning and doesn't load.

>>>  What did I do wrong?

 

Incorrect:

groupFn: funtion (record) {

return '<p> Company Name' + record.get('1') + </p>';

 

Correct:

groupFn: function (record) {

return '<p> Company Name' + record.get('1') + '</p>';

[RobYost]

Sorry about the typo.

 

I copied this right out of ExtEvents. But it still hangs on startup.  This is using DB Sort Column Sort Demo:

C:\Program Files (x86)\FMSoft\Framework\uniGUI\Demos\Touch\DBGrid Column Sort

 

This is the only code I changed in that demo.

function store.load(sender, records, successful, operation, eOpts)
{
   sender.setGrouper({
      groupFn: function (record) {
         return '<p> Company Name' + record.get('1') + </p>';
      }, sortProperty: '1'
   });   
}

 

[Sherzod]

 

Sorry about the typo.

 

I copied this right out of ExtEvents. But it still hangs on startup.  This is using DB Sort Column Sort Demo:

C:\Program Files (x86)\FMSoft\Framework\uniGUI\Demos\Touch\DBGrid Column Sort

 

This is the only code I changed in that demo.

function store.load(sender, records, successful, operation, eOpts)
{
   sender.setGrouper({
      groupFn: function (record) {
         return '<p> Company Name' + record.get('1') + </p>';
      }, sortProperty: '1'
   });   
}

 

 

return '<p> Company Name' + record.get('1') + </p>';

 

return '<p> Company Name' + record.get('1') + '</p>';

[RobYost]

I am trying to not be a bother to you, but it now comes up like it should, but the DataGrid looks unchanged.

 

From looking at Mohammad's code, I would think that the rows should be replaced with:

Company Name Kauai Dive Shop

Company Name Unisco

Company Name Sight Diver

etc...

 

What can I do to make it easier for you to help me?

 

Do you want me to attach the demo project I am using?

 

Am I making a wrong assumption how to replace the DataGrid's row information?

[mhmda]

Try to make a test case.

[RobYost]

Thanks, Mohammad,

 

I've attached a test program. 

 

It is the demo column sort.  With the following added to ClientEvents->ExtEvents->Ext.data.store->load

function store.load(sender, records, successful, operation, eOpts)
{
   sender.setGrouper({
      groupFn: function (record) {
         return '<p> Company Name' + record.get('1') + '</p>';
      }, sortProperty: '1'
   });   
}

 

DBGrid Column Sort.zip

[mhmda]

In my project I used 'UnimDBListGrid' NOT 'UnimDBGrid'.

[RobYost]

Thanks that worked.

 

Where can I see the difference between 'UnimDBListGrid' NOT 'UnimDBGrid'?

[mhmda]

The 'Grouper' property in design time in the inspection panel at left side in the IDE.

[x11]

Hi!

How display a picture in XTemplate from DataSet + UnimDBListGrid/UnimDBGrid?

thanx

[x11]

How display a picture in XTemplate from DataSet + UnimDBListGrid?