Ext.ux.touch.grid

[csextjs]

Thank you guys for you help.
I've tried both codes below.
However I still get Loading message and stops there.

applyStore : function() {
        var store = new macc.store.Customer({autoLoad: true});
        return store
}

applyStore : function() {
        var store = new macc.store.Customer();
        store.load();
        return store
}

[Abhi_aec]

Can someone please help on post #185?

[redned]

I posted this post in the thread for the Sencha Touch 1 version. But it is more relevant here.
I am trying to place a grid inside a panel. This panel is used in a card layout which switches depending on user actions. This panel will be used to display customer information. The page is not showing correctly and a grid layout is not present. It looks more like a list. Also the items from the store are not displaying. Can anyone point me in the right direction, please?

Ext.define('GFD.view.CustDetails', {
  extend: 'Ext.ux.touch.grid.View',
  paths : {
        'Ext.ux.touch.grid': './Ext.ux.touch.grid'
    },
  requires:[
    'Ext.ux.touch.grid.View',
    'Ext.ux.touch.grid.feature.Feature',
    'Ext.ux.touch.grid.feature.Sorter',
    ],
  xtype: 'custdetails',
  id:'custdetailsPanel',
  config: {
    items: [
    {
      xtype: 'spacer',
      height: '50px'
    },
    {
      xtype: 'touchgridpanel',
      title: 'Cust Details',
      id: 'custGrid',
      store: 'CustomerStore',
      columns:[
          {
              header: 'Customer Number', 
              dataIndex: 'cust_no', 
              style: 'padding-left: 1em;',
            width: '40%',
          },
          {
              header: 'Order Date', 
              dataIndex: 'order_date',
              style: 'padding-left: 1em;',
            width: '40%',
          },
          {
              header: 'Telephone.', 
              dataIndex: 'tel_no',
              style: 'padding-left: 1em;',
            width: '40%',
          },
          {
              header: 'Contact', 
              dataIndex: 'contact_name',
              style: 'padding-left: 1em;',
            width: '40%',
          },
      ],
    }
    ],
  }
});

[mitchellsimoens]

Include the CSS?

[redned]

Include the CSS?

Thank you! Very stupid on my part! Still no sign of the data even though it is visible in the DOM when using the inspector. I suspect it is something to do with my store.

[mitchellsimoens]

If you can see the rows with data in the DOM but not visually, that will likely be a layout/sizing issue.

[redned]

Great, thanks. Another issue I just noticed is it is only displaying two of the headings. Any ideas on that?

EDIT: Never mind solved it.

[newpen]

Oh good one, I like it.

Blog tips - Car news

[visus]

Hi, I'm trying to use the Ext.ux.touch.grid to create something like a tree-grid. When you tap on an item, I'd like to show (incl. animation) another component (a list, another dataview, a container, whatever; it doesn't really matter as long as it has a specific height) below the tapped item. When I tap on the item again, the extra component should hide.

My question is: What would you do? How would you implement that?

[csextjs]

I have this in Ext.ux.grid.touch.view with editable.

{   header    : 'Packs',
    dataIndex : 'packs', 
    width     : '10%',
    style     : "text-align: center;",
    editor : {
        xtype : 'numberfield'
    }
},

How can I listen for the CHANGE or BLUR event in the controller?
I've tried many suggestions from the forum, but could not make it work.
If I attach listeners right below the xtype: 'numberfield', it works but I need to be
able to reference it in the controller for further processing.

thank you.