[CLOSED] [#1463] [4.2.0] ResponsiveConfig gives js error

Hi All,
ResponsiveConfig based on https://examples4.ext.net/#/Miscella...ponsive/Basic/ fails on Ext.Net.Mobile,
because of in generated js plugin config has ptype property ( plugins:[{ptype:"responsive"}] ) but createPlugin function waits 'type' property

Code:

---

@(
  Html.X().Viewport()
  .Items(
          Html.X().Panel()
            .ResponsiveConfig(rules =>{

                                  var r = new ResponsiveRule();
                                  r.Rule = "tall";
                                  r.Config.Add(X.Panel().Title("tall"));
                                  rules.Add(r);

                                  var r2 = new ResponsiveRule();
                                  r2.Rule = "wide";
                                  r2.Config.Add(X.Panel().Title("wide"));
                                  rules.Add(r2);

                        })
          .Items(
                          Html.X().Panel().Html("1. part"),
                          Html.X().Panel().Html("2. part")
          )
  )
)

---

Code:

---

Ext.onReady(function(){Ext.create("Ext.net.Viewport",{items:[{xtype:"panel",plugins:[{ptype:"responsive"}],responsiveConfig:{"tall":{title:"tall"},"wide":{title:"wide"}},items:[{xtype:"panel",html:"1. part"},{xtype:"panel",html:"2. part"}]}]});});

---

Code:

---

Uncaught Error: [Ext.create] Invalid class name or alias 'null' specified, must be a non-empty string
    at Object.create (ext-mobile.axd?v=4.1.0:9512)
    at Object.factory (ext-mobile.axd?v=4.1.0:5851)
    at constructor.createPlugin (ext-mobile.axd?v=4.1.0:47429)
    at constructor.applyPlugins (ext-mobile.axd?v=4.1.0:47415)
    at constructor.setter [as setPlugins] (ext-mobile.axd?v=4.1.0:6567)
    at Ext.Configurator.configure (ext-mobile.axd?v=4.1.0:7070)
    at Ext.Configurator.<anonymous> (ext-mobile.axd?v=4.1.0:4609)
    at Ext.Configurator.configure (ext-mobile.axd?v=4.1.0:4662)
    at constructor.initConfig (ext-mobile.axd?v=4.1.0:7963)
    at constructor (ext-mobile.axd?v=4.1.0:13033)

---

Hi again,
I fixed this error with an extension method,

Code:

---

public static class Extensionss
{
        public static void FixResponsivePlugin(this ComponentBase owner)
        {
            var plugin = owner.Plugins.FirstOrDefault(p => ((p is GenericPlugin) && ((p as GenericPlugin).TypeName == "responsive")));
            if (plugin != null)
            {
                var responsivePlugin = (GenericPlugin)plugin;
                responsivePlugin.CustomConfig.Add(new ConfigItem("type", "responsive"));
            }
        }

        public static TBuilder FixResponsivePlugin<TAbstractComponent, TBuilder>(this ComponentBase.Builder<TAbstractComponent, TBuilder> builder)
          where TAbstractComponent : ComponentBase
          where TBuilder : ComponentBase.Builder<TAbstractComponent, TBuilder>
        {
            builder.ToComponent().FixResponsivePlugin();
            return builder as TBuilder;
        }
}

---

Code:

---

@(
  Html.X().Viewport()
  .Items(
          Html.X().Panel()
         
            .ResponsiveConfig(rules =>
            {

                var r = new ResponsiveRule();
                r.Rule = "tall";
                r.Config.Add(X.Panel().Title("tall"));
                rules.Add(r);

                var r2 = new ResponsiveRule();
                r2.Rule = "wide";
                r2.Config.Add(X.Panel().Title("wide"));
                rules.Add(r2);

               
            })
          .Items(
              Html.X().Panel().Html("1. part"),
              Html.X().Panel().Html("2. part")
          )
          .FixResponsivePlugin()
  )
)

---

It seems working for now

Hello! Thanks for the interesting patch using extension methods!

We've logged (and fixed) this error on github under #1463, and it will make it out for the public on release 4.2.0. Fix is already available for premium subscription users!