Results 1 to 1 of 1

Thread: Responsive containers / tpl

  1. #1
    Sencha User bressi's Avatar
    Join Date
    Jan 2016
    Posts
    20

    Default Responsive containers / tpl

    Hello everyone,


    I am looking for a solution to make some 'hboxed' containers look responsive when the viewport is getting smaller in width.


    I have already added an 'onresize' event listeners where I increase the height of my container in order to let the containers flows sequentially in the space below but the containers stay on the same line and they do not behave as responsive as I am looking for.

    Code:
    Ext.define('MyApp.widgets.myItemsContainers', {
        
        extend: 'Ext.container.Container',
        
        xtype: 'myitemscontainer',
        
        layout: 'hbox',
        
        itemId: 'itemsContainer',
        
        items: [
                    {
                        xtype: 'container',
                        flex: 1,
                        cls: 'fw-inline',
                        tpl: '<div class="prezziqta-label">Prezzo minimo</div><tpl if="p1 != null"><div class="prezziqta-data">{p1} €</div><tpl else><div class="prezziqta-data">-</div></tpl>'
                    },
                    {    xtype: 'container',
                        flex: 1,
                        cls: 'fw-inline',
                        tpl: '<div class="prezziqta-label">Prezzo netto</div><tpl if="p2 != null"><div class="prezziqta-data">{p2} €</div><tpl else><div class="prezziqta-data">-</div></tpl>'
                    },
                    {
                        xtype: 'container',
                        flex: 1,
                        cls: 'fw-inline',
                        tpl: '<div class="prezziqta-label">Valore IVA</div><div class="prezziqta-data">{p3} %</div></div>'
                    },
                    {
                        xtype: 'container',
                        flex: 1,
                        cls: 'fw-inline',
                        tpl: '<div class="prezziqta-label">Prezzo listino</div><tpl if="p4 != null"><div class="prezziqta-data">{p4} €</div><tpl else><div class="prezziqta-data">-</div></tpl>'
                    },
                    {
                        xtype: 'container',
                        flex: 1,
                        cls: 'fw-inline',
                        tpl: '<div class="prezziqta-label">Saldo</div><tpl if="p5 != null"><div class="prezziqta-data">{p5} €</div><tpl else><div class="prezziqta-data">-</div></tpl>'
                    },
                    {
                        xtype: 'container',
                        flex: 1,
                        tpl: '<div class="prezziqta-label">Prezzo vendita</div><tpl if="p6 != null"><div class="prezziqta-data">{p6} €</div><tpl else><div class="prezziqta-data">-</div></tpl>',
                        cls: 'fw-inline'
                    }
                ]
    });
    My goal would be to have some of the inner containers placed below some of the other containers [e.g. 3 containers below the first 3 containers].


    Below I've also added some screens showing the container before and after the resize event.


    Btw I am coding on SA 3.5.1 - EXT v6.0.1 - Classic
    Sorry for have posted here my issue but on the SA 3.5.1 forum it seems there is noone can answer this..

    Any hint for a solution is appreciated.


    Regards,
    Claudia
    Attached Images Attached Images

Similar Threads

  1. Responsive containers - tpl
    By bressi in forum Sencha Architect 3.x: Q&A
    Replies: 0
    Last Post: 26 Sep 2016, 7:59 AM
  2. Responsive Websites
    By arnell in forum Ext 5: Q&A
    Replies: 7
    Last Post: 3 Dec 2015, 2:09 AM
  3. Replies: 3
    Last Post: 13 Nov 2014, 3:45 PM
  4. how to responsive panel?
    By myrkh1213 in forum Ext: Q&A
    Replies: 1
    Last Post: 28 Jan 2014, 12:39 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •