Results 1 to 4 of 4

Thread: How to use ExtJs with OOP pattern

  1. #1

    Default How to use ExtJs with OOP pattern

    Can someone tell me why the example below fails at the last doLayout?? I'm newish to ExtJs but I can't find answers to this within the forums.

    If this is the wrong way to go about it then please can you tell me the best pattern to follow which is most similar

    Thanks

    Code:
             var defaultview = new Ext.Viewport({
                  layout: 'border',
                  renderTo: Ext.getBody(),
                  items: [{
                      region: 'north',
                      xtype: 'panel'
                  }, {
                      region: 'west',
                      xtype: 'panel',
                      width: 200
                  }, {
                      region: 'center',
                      xtype: 'panel'
                  }, {
                      region: 'east',
                      xtype: 'panel',
                      split: true,
                      width: 200
                  }, {
                      region: 'south',
                      xtype: 'panel'
    }]
                  });
    
                  var reg1 = {
                      border: false,
                      margins: '0 0 5 0',
                      height: 150,
                      xtype: 'panel',
                      id: 'northPanel',
                      html: 'Reg1!!'
                  };
    
                  var reg2 = {
                      border: false,
                      margins: '0 0 5 0',
                      height: 150,
                      xtype: 'panel',
                      id: 'westPanel',
                      html: 'Reg2!!'
                  };
    
                  var regionNorth = defaultview.items.itemAt(0);
                  var regionWest = defaultview.items.itemAt(1);
                  var regionCenter = defaultview.items.itemAt(2);
                  var regionEast = defaultview.items.itemAt(3);
                  var regionSouth = defaultview.items.itemAt(4);
    
                  
                  regionWest.add(reg1);
                  regionCenter.add(reg2);
    
                  defaultview.doLayout(); //This works
    
                  reg1.html = "Now look at me";
                  defaultview.doLayout(); //This doesn't update the panels html

  2. #2
    Ext User
    Join Date
    Dec 2007
    Posts
    95

    Default

    The reg1 variable is still a primitive object, setting properties on it won't do anything. Furthermore I don't think the .html property is used after the initial creation of the component.

    Do something like this instead:
    Code:
    var el1 = regionWest.add(reg1);
    el1.body.update("Now look at me");
    there's almost certainly a better way to do this, depending on where you're getting your data from... ie an Ext.DataView or Ext.Updater

  3. #3

    Default

    Thanks for your helpful response.

    I just want to try and avoid getting components with a get method i.e get('ElementId').

    I was hoping that I could reference any component through global variables that are created in the way you mentioned.

    So for example if I wanted a menu from the left to communicate with a grid which is sat within a Tab Panel.

    Is there any Pattern which suits this type of programming. If there is I'd love to do a little reading on it.

    Thanks

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    And why are you adding Panels to no-layout Panels?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •