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.myItemsContainer', {
        
        extend: 'Ext.container.Container',
        
        xtype: 'myitemscontainer',
        
        layout: 'hbox',
        
        itemId: 'myItemsContainer',
        
            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 screenshots showing the container before and after the resize event.

    Any hint for a solution is appreciated.
    Btw I am coding on SA 3.5.1 - EXT v6.0.1 - Classic

    Regards,
    Claudia
    Attached Images Attached Images

Similar Threads

  1. Replies: 3
    Last Post: 13 Nov 2014, 3:45 PM
  2. Responsive UI and ExtJS
    By Ronits in forum Ext: Discussion
    Replies: 15
    Last Post: 29 Oct 2014, 1:56 PM
  3. RTL In Responsive Mixin
    By ibnesayeed in forum Ext 5: Q&A
    Replies: 1
    Last Post: 30 May 2014, 12:45 PM
  4. Checkboxes not too responsive
    By rtweed in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 11 Aug 2010, 7:57 AM

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
  •