1. #1
    Sencha User rbraddy's Avatar
    Join Date
    Jul 2009
    Location
    Houston, TX
    Posts
    142
    Vote Rating
    7
    rbraddy is on a distinguished road

      0  

    Default How to Create Custom Frame Panel in Architect

    How to Create Custom Frame Panel in Architect


    I have spent two days trying to figure this out... it's easy with ExtJS 3 in code, but can't figure out how to structure things with SA 2...

    I have a working prototype in ExtJS 3 with the original class code here and app code here.

    Now, I'm trying to adapt this ExtJS 3 code into a new class created using Ext.define (code below), which derives from Ext.panel.Panel - not sure how to properly structure, convert and integrate into ExtJS 4 under SA 2.

    I have tried creating "Overrides" with the code below, and tried saving the code as a new IFramePanel "toolbox" item, then dragging it in as a new panel. I'm not finding any useful SA Examples to show me how to create a simple derived class - how hard should this be? (or am I missing something?)

    What I really want is a working iFramePanel (like the working example code) that I can use in a Sencha Architect 2 project. When the user clicks on a tree node in a west panel, I want the IFramePanel in the center panel to update with a different web page. I need this content panel to be an IFramePanel because I plan to have many dozens of separate ExtJS 4 applications loading in it (hopefully created using SA 2, if I can get over this hump). This is how I'm going to (hopefully) build a large ExtJS 4 app in SA 2, without it being totally monolithic.

    Code:
    Ext.define('MyApp.view.IFramePanel', {
         extend: 'Ext.panel.Panel',
         alias:'iframepanel',
    
    
         name: 'iframe', 
         iframe: null, 
    //     src: Ext.isIE && Ext.isSecure ? Ext.SSL_SECURE_URL : 'about:blank', 
         src: 'http://www.google.com/', 
         maskMessage: 'Loading ...', 
         doMask: true, 
     
         constructor: function (config) {
             this.callParent(arguments); // calls Ext.panel.Panel's constructor
    
    
            this.bodyCfg = { 
                tag: 'iframe', 
                frameborder: '0', 
                src: this.src, 
                name: this.name 
            }; 
            // apply the addListener patch for 'message:tagging' 
            this.addListener = this.on; 
    
    
         },
    
    
         statics: {        
            onRender : function() { 
                MyNavPrototype.view.IFramePanel.superclass.onRender.apply(this, arguments); 
                this.iframe = Ext.isIE ? this.body.dom.contentWindow : window.frames[this.name]; 
                this.body.dom[Ext.isIE ? 'onreadystatechange' : 'onload'] = Ext.Function.bind(this); 
            }, 
     
            loadHandler: function() { 
                this.src = this.body.dom.src; 
                this.removeMask(); 
            }, 
     
            getIframe: function() { 
                return this.iframe; 
            }, 
            getUrl: function() { 
                return this.body.dom.src; 
            }, 
     
            setUrl: function(source) { 
                this.setMask(); 
                this.body.dom.src = source; 
            }, 
     
            resetUrl: function() { 
                this.setMask(); 
                this.body.dom.src = this.src; 
            }, 
     
            refresh: function() { 
                if (!this.isVisible()) { 
                    return; 
                } 
                this.setMask(); 
                this.body.dom.src = this.body.dom.src; 
            }, 
        
            /** @private */ 
            setMask: function() { 
                if (this.doMask) { 
                    this.el.mask(this.maskMessage); 
                } 
            }, 
            removeMask: function() { 
                if (this.doMask) { 
                    this.el.unmask(); 
                } 
            }
         }
     });
    So what I need to know specifically is:

    1) What is the proper way to create a new derived panel class (i.e.., IFramePanel) within SA, and create the overrides needed using ExtJS 4?

    2) Is there an easier way than adapting this ExtJS 3 IFramePanel code to achieve what I want? (I have already decided that I do not want a monolithic app with complicated dynamically-loaded code - I want to develop my app as a bunch of "modules" so I can integrate them into a large, modular app)

    Thanks in advance!

    Rick

  2. #2
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,190
    Vote Rating
    76
    ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough

      0  

    Default


    Crafting a new component based on already existing one is very easy in SA.

    You can add custom events and functions, write overrides and so.

    What makes me reply to to your question is that I noted "static" definitions.

    I'm still not an JS expert nor ExtJS one, but I'm a OO expert and static members means class's members, not instance one.

    Correct me if I'm wrong but, those methods should be instance ones instead of class's?

    Regards.
    UI: Sencha Architect 3.x / ExtJS 4 MVC
    Server side: EJB 3.1 / CDI / JPA 2 / JAX-RS / JasperReports
    Application Server: Glassfish 3.1.x
    Databases: Oracle 10g & 11g / DB2 9 & 10 / Firebird 2.5

    If you like my answer please vote!

  3. #3
    Sencha User rbraddy's Avatar
    Join Date
    Jul 2009
    Location
    Houston, TX
    Posts
    142
    Vote Rating
    7
    rbraddy is on a distinguished road

      0  

    Default


    You're probably right about the static members - at this point, that's not the issue I'm trying to resolve.

    I want to sub-class the panel class and add the IFrame functionality and do so within SA.

  4. #4
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,190
    Vote Rating
    76
    ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough

      1  

    Default


    1. Drop the component base into views node.
    2. Add as many as you need "basic function"s and write the code (getUrl() for example).
    3. Add as many as you need "custom events" (which must be fired by your component with fireEven()) so you can use them in controllers.
    4. If you need to change initComponent() or any other method, create an override class and put your code there.
    5. Test the component and when you are satisfied with it, save to tool box.

    Easy, no?
    UI: Sencha Architect 3.x / ExtJS 4 MVC
    Server side: EJB 3.1 / CDI / JPA 2 / JAX-RS / JasperReports
    Application Server: Glassfish 3.1.x
    Databases: Oracle 10g & 11g / DB2 9 & 10 / Firebird 2.5

    If you like my answer please vote!

  5. #5
    Sencha User rbraddy's Avatar
    Join Date
    Jul 2009
    Location
    Houston, TX
    Posts
    142
    Vote Rating
    7
    rbraddy is on a distinguished road

      0  

    Default


    Thanks! That's what I needed - a step-by-step plan of attack.

    Very much appreciated.

    ( we'll see how easy )

    Rick

  6. #6
    Sencha User rbraddy's Avatar
    Join Date
    Jul 2009
    Location
    Houston, TX
    Posts
    142
    Vote Rating
    7
    rbraddy is on a distinguished road

      0  

    Default


    Well, that definitely helped! I'm very close, it seems. Only issue remaining is the web page isn't loading (the mask "Loading..." is showing up fine, just no web page in an IFrame)

    I'm unclear on where the actual IFRAME is (supposed to be) getting created...

    Code:
    Prototype code:
    
    Ext.define('MyNavPrototype.view.AppViewport', {
        extend: 'Ext.container.Viewport',
        requires: [
            'MyNavPrototype.view.NavTree',
            'MyNavPrototype.view.IFramePanel'
        ],
    
    
        id: 'appviewport',
        layout: {
            type: 'fit'
        },
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'panel',
                        autoShow: true,
                        frame: true,
                        layout: {
                            type: 'border'
                        },
                        title: 'Navigation Prototype',
                        items: [
                            {
                                xtype: 'panel',
                                frame: false,
                                width: 158,
                                collapsible: true,
                                title: 'Nav',
                                region: 'west',
                                dockedItems: [
                                    {
                                        xtype: 'NavTree',
                                        dock: 'top'
                                    }
                                ]
                            },
                            {
                                xtype: 'iframepanel',
                                region: 'center'
                            }
                        ]
                    }
                ]
            });
    
    
            me.callParent(arguments);
        }
    
    
    });
    
    
    Generated Class code:
    
    Ext.define('MyNavPrototype.view.IFramePanel', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.iframepanel',
    
    
        id: 'contentPanel',
        title: 'Content Panel',
        maskMessage: 'Loading ...',
        doMask: 'true',
        iframe: '',
        name: 'contentPanel',
    
    
        initComponent: function() {
            var me = this;
    
    
            me.callParent(arguments);
        },
    
    
        getIframe: function() {
            return this.iframe;
        },
    
    
        getUrl: function() {
            return this.body.dom.src;
        },
    
    
        setUrl: function(source) {
            this.setMask(); 
            this.body.dom.src = source; 
        },
    
    
        resetUrl: function() {
            this.setMask(); 
            this.body.dom.src = this.src; 
        },
    
    
        refresh: function() {
            if (!this.isVisible()) { 
                return; 
            } 
            this.setMask(); 
            this.body.dom.src = this.body.dom.src; 
        },
    
    
        setMask: function() {
            if (this.doMask) { 
                this.el.mask(this.maskMessage); 
            }
    
    
        },
    
    
        removeMask: function() {
            if (this.doMask) { 
                this.el.unmask(); 
            } 
        }
    
    
    });
    
    
    Override code:
    
    Ext.define('MyNavPrototype.view.override.IFramePanel', {
        requires: 'MyNavPrototype.view.IFramePanel'
    }, function() {
        Ext.override(MyNavPrototype.view.IFramePanel, {
    
    
       
        src: Ext.isIE && Ext.isSecure ? Ext.SSL_SECURE_URL : 'about:blank',
        initComponent: function() {
            this.callParent(arguments);
            
            this.bodyCfg = { 
                tag: 'iframe', 
                frameborder: '0', 
                src: this.src, 
                name: this.name 
            };
            // apply the addListener patch for 'message:tagging' 
            this.addListener = this.on; 
         },
    
    
        loadHandler: function() { 
            this.src = this.body.dom.src; 
            this.removeMask(); 
        },
         
    
    
    
    
        onRender : function() { 
            this.callParent(arguments);
            if( this.body !== undefined ) {
                this.iframe = Ext.isIE ? this.body.dom.contentWindow : window.frames[this.name]; 
    // the above this.iframe code ends up "undefined" in Firebug - the "this.name" is "contentPanel"
    
                var fn1 = Ext.Function.bind(this.loadHandler, this);
                this.body.dom[Ext.isIE ? 'onreadystatechange' : 'onload'] = fn1; 
            }
        }
            
            
        });
    });

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar