Results 1 to 4 of 4

Thread: Need help figuring out ExtJs abstract classes, example inside

  1. #1

    Question Need help figuring out ExtJs abstract classes, example inside

    Hi all,

    So I am following along a tutorial from Saki about abstract classes in extjs, I understand most everything except what is likely the most basic and important part, actually getting the damn thing to display in my application.

    This is the tutorial I am working with.

    http://blog.extjs.eu/know-how/factor...xt-extensions/

    -- Trouble Im having is this. Ive copied the source code for the AbstractFormPanel.js, and have successfully implemented a form using the following javascript.

    Code:
    Ext.onReady(function(){
    
      var nameForm = new MyApp.AbstractFormPanel({
           title:'Name Form Panel configured inline',
           width:600,
           height:200,
           renderTo:'extjswrap',
           buildItems:function(config) {
              config.items = [{
                   name:'firstName',
                   fieldLabel:'First Name'
              },{
                   name:'lastName',
                   fieldLabel:'Last Name'
              },{
                   name:'middleName',
                   fieldLabel:'Middle Name'
              },{
                   xtype:'datefield',
                   name:'dob',
                   fieldLabel:'DOB'
              }];
          }
      });
     
    });
    Great, that works. What confuses me though, is below that script on his post he says
    "Note: Although the above works, it violates the rule of not instantiating an abstract class directly. Its up to you if you will do it or not." --

    So, I go back up and look for an example of a way to do the same thing without violating the rule of instantiating the abstract class directly. So I find this code and try using this instead of the code I posted above.

    Code:
    Ext.ns('MyApp');
     
    MyApp.AddressFormPanel = Ext.extend(MyApp.AbstractFormPanel, {
         title:'Edit address data'
        ,submitUrl:'addressAction.asp'
        ,buildItems:function(config) {
            config.items = [{
                 name:'address1'
                ,fieldLabel:'Address 1'
            },{
                 name:'address2'
                ,fieldLabel:'Address 2'
            },{
                 name:'city'
                ,fieldLabel:'city'
            },{
                 xtype:'combo'
                ,name:'state'
                ,fieldLabel:'State'
                ,store:['MD', 'VA', 'DC']
            },{
                 xtype:'numberfield'
                ,name:'zip'
                ,fieldLabel:'Zip Code'
            }];
        } // eo function buildItems
     
    });
     
    // eof
    So, that doesen't work. I see it's not being rendered. So I try adding renderTo:'extjswrap' (the default div im rendering to) -- no go. So I try wrapping it inside an Ext.onReady function, doesen't work. So I try creating a new MyApp.AddressFormPanel({, and setting the renderTo there, still not working.

    So my problem is, I dont understand exactly how I am supposed to use the abstract method, without instansiating the
    abstract class in the way I did for the first code example I posted. --

    Also, side question. I just noticed I am storing the object in a variable in the first example... I shouldn't be doing that if I am doing renderTo within the object, because there is no reason to store that in a variable, correct?? (or maybe there is for callbacks or if I want to load form data into the form panel object???)

    Anyways, any help clarifying what I am not wrapping my head around would be immensely appreciated!

  2. #2

    Default

    bump

  3. #3
    Sencha Premium User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    579

    Default

    The Abstract class
    Code:
    Ext.ns('MyApp');
     
    MyApp.AbstractFormPanel = Ext.extend(Ext.form.FormPanel, {
         defaultType:'textfield'
        ,frame:true
        ,width:300
        ,height:200
        ,labelWidth:75
        ,submitUrl:null
        ,submitT:'Submit'
        ,cancelT:'Cancel'
        ,initComponent:function() {
     
            // create config object
            var config = {
                defaults:{anchor:'-10'}
            };
     
            // build config
            this.buildConfig(config);
     
            // apply config
            Ext.apply(this, Ext.apply(this.initialConfig, config));
     
            // call parent
            MyApp.AbstractFormPanel.superclass.initComponent.call(this);
     
        } // eo function initComponent
     
        ,buildConfig:function(config) {
            this.buildItems(config);
            this.buildButtons(config);
            this.buildTbar(config);
            this.buildBbar(config);
        } // eo function buildConfig
     
        ,buildItems:function(config) {
            config.items = undefined;
        } // eo function buildItems
     
        ,buildButtons:function(config) {
            config.buttons = [{
                 text:this.submitT
                ,scope:this
                ,handler:this.onSubmit
                ,iconCls:'icon-disk'
            },{
                 text:this.cancelT
                ,scope:this
                ,handler:this.onCancel
                ,iconCls:'icon-undo'
            }];
        } // eo function buildButtons
     
        ,buildTbar:function(config) {
            config.tbar = undefined;
        } // eo function buildTbar
     
        ,buildBbar:function(config) {
            config.bbar = undefined;
        } // eo function buildBbar
     
        ,onSubmit:function() {
            Ext.MessageBox.alert('Submit', this.submitUrl);
        } // eo function onSubmit
     
        ,onCancel:function() {
            this.el.mask('This form is canceled');
        } // eo function onCancel
     
    }); // eo extend
    The new class that extends the abstract class
    Code:
    Ext.ns('MyApp');
     
    MyApp.AddressFormPanel = Ext.extend(MyApp.AbstractFormPanel, {
         title:'Edit address data'
        ,submitUrl:'addressAction.asp'
        ,buildItems:function(config) {
            config.items = [{
                 name:'address1'
                ,fieldLabel:'Address 1'
            },{
                 name:'address2'
                ,fieldLabel:'Address 2'
            },{
                 name:'city'
                ,fieldLabel:'city'
            },{
                 xtype:'combo'
                ,name:'state'
                ,fieldLabel:'State'
                ,store:['MD', 'VA', 'DC']
            },{
                 xtype:'numberfield'
                ,name:'zip'
                ,fieldLabel:'Zip Code'
            }];
        } // eo function buildItems
     
    });
    Here I instantiate it
    Code:
    new MyApp.AddressFormPanel({
        renderTo:Ext.getBody()
    });

  4. #4

    Default

    thought i tried that already but ok sweet makes sense thanks!

Similar Threads

  1. Factory Functions in Ext Extensions (Abstract Classes)
    By jsakalos in forum Community Discussion
    Replies: 12
    Last Post: 1 Dec 2010, 6:31 AM
  2. Replies: 8
    Last Post: 26 May 2010, 8:35 AM
  3. Need Help Figuring Out How to make Form like this...
    By marman in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 12 Mar 2010, 1:21 PM
  4. Replies: 11
    Last Post: 20 May 2009, 11:46 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
  •