Results 1 to 5 of 5

Thread: Using Responsive Mixin with Architect 4.1

  1. #1
    Sencha Premium Member
    Join Date
    Jan 2013
    Location
    London
    Posts
    84

    Default Answered: Using Responsive Mixin with Architect 4.1

    Hi All

    I'm trying to add the responsive mixin to a project in architect but cannot work out how to add the "responsiveConfig" settings.

    Basically I'm trying to create this;

    Code:
    Ext.define('MyApp.view.MyPanel', {
        extend: 'Ext.panel.Panel',
        mixins: ['Ext.mixin.Responsive'],
        xtype: 'mypanel',
        
        responsiveConfig: {
            tall: {
                title: 'tall'
            },
            wide: {
                title: 'wide'
            }
        },
        title: 'undecided',
        margin: 10
        
    });
    https://fiddle.sencha.com/#view/editor&fiddle/1rbv

    Architect lets me add the mixin but I can't add the responsiveConfig section ...

    If I try and add a custom property it adds it inside a " config: { } " property and it appears to get ignored


    Code:
        config: {
            myproperty: 'a value'
        },
    Anyone know how to add it?


    Thanks

    Mark

  2. I see. You have 2 options

    1# Put the panel into container (or into anything else) so it's listed as item, than add custom property.

    Attachment 55997

    2# Use process config, find the panel, config , find process config, click on add, specify any config you want there.

    Attachment 55998

    Regards
    Petr

  3. #2
    Sencha User
    Join Date
    Sep 2014
    Location
    Central Europe
    Posts
    795
    Answers
    103

    Default

    Hi Mark

    Which framework and exact version of SA are you using? I am seeing responsive config in my Panel for both 6.2, 6.0 classic.

    Regards
    Petr

  4. #3
    Sencha Premium Member
    Join Date
    Jan 2013
    Location
    London
    Posts
    84

    Default

    Hi Petr

    Architect 4.1.1 build 123 with 6.2 Modern. Having just looked I agree it's there on classic.

    Regards

    Mark

  5. #4
    Sencha User
    Join Date
    Sep 2014
    Location
    Central Europe
    Posts
    795
    Answers
    103

    Default

    I see. You have 2 options

    1# Put the panel into container (or into anything else) so it's listed as item, than add custom property.

    6OIo2Y8ATUBTDOe9LlT72ZrAHgald.jpg

    2# Use process config, find the panel, config , find process config, click on add, specify any config you want there.

    6OIo9mISaRThTsPyf8jvQE2DLVGji.jpg

    Regards
    Petr

  6. #5
    Sencha Premium Member
    Join Date
    Jan 2013
    Location
    London
    Posts
    84

    Default

    Hi Petr


    That's great, thank you. Option 1 seems to work fine.


    To clarify for future readers the issue of adding a custom property using the "add" button is ...


    If a custom property is added to the root container it is added to a config option like this;


    Code:
    Ext.define('MyApp.view.MyContainer', {
       extend: 'Ext.Container',
        alias: 'widget.mycontainer',
    
        requires: [
            'MyApp.view.MyContainerViewModel',
            'Ext.Panel'
        ],
    
        config: {
            custom_property: 'Hello!'
        },
    
        viewModel: {
            type: 'mycontainer'
        },
    
        items: [
            {
                xtype: 'panel',
                title: 'My Panel'
            }
        ]
    });


    If a custom property is added to a sub component it gets added as it's own property;


    Code:
    Ext.define('MyApp.view.MyContainer', {
       extend: 'Ext.Container',
        alias: 'widget.mycontainer',
    
        requires: [
            'MyApp.view.MyContainerViewModel',
            'Ext.Panel'
        ],
    
        viewModel: {
            type: 'mycontainer'
        },
    
       items: [
            {
                xtype: 'panel',
                custom_property: 'Hello!',
                title: 'My Panel'
            }
        ]
    });


    At least that's how it seems to work :-)

    Hopefully the 'responsiveConfig' property will make its way on to the next release of Architect now that t's supported by the Modern framework.



    ... and to document what the original code now looks like;

    https://fiddle.sencha.com/#view/editor&fiddle/1rdi

    Code:
    Ext.define('MyApp.view.MyContainer', {
        extend: 'Ext.Container',
        alias: 'widget.mycontainer',
        xtype: 'mycontainer',
        requires: [
            'Ext.Panel'
        ],
        items: [{
            xtype: 'panel',
            plugins: 'responsive',
            responsiveConfig: {
                tall: {
                    title: 'tall'
                },
                wide: {
                    title: 'wide'
                }
            },
            title: 'My Panel',
            margin: 10
        }]
    });
    Regards

    Mark
    Last edited by darkorigins; 4 Mar 2017 at 9:09 AM. Reason: overpasted

Similar Threads

  1. User Ext.mixin.Mashup in Architect
    By Chris Wallace in forum Sencha Architect 3.x: Q&A
    Replies: 2
    Last Post: 23 Feb 2015, 7:31 PM
  2. responsive config attempt breaks Architect Design View
    By worthlutz in forum Sencha Architect 3.x: Q&A
    Replies: 0
    Last Post: 13 Feb 2015, 4:28 AM
  3. Replies: 3
    Last Post: 13 Nov 2014, 3:45 PM
  4. Replies: 2
    Last Post: 21 Sep 2014, 10:30 AM
  5. RTL In Responsive Mixin
    By ibnesayeed in forum Ext 5: Q&A
    Replies: 1
    Last Post: 30 May 2014, 12:45 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
  •