1. #1
    Ext JS Premium Member wurstkuchen's Avatar
    Join Date
    Sep 2008
    Posts
    110
    Vote Rating
    0
    wurstkuchen is on a distinguished road

      0  

    Default First steps with the Designer: One question

    First steps with the Designer: One question


    Hey,

    I'am doing my first steps with the Designer and now I have a question about the code the Designer is creating.

    This is for example the code it creates:

    PHP Code:
    Ui Ext.extend(Ext.Window, {
        
    title'New Window',
        
    width384,
        
    height224,
        
    layout'auto',
        
    activeItem0,
        
    initComponent: function() {
            
    this.fbar = {
                
    xtype'toolbar',
                
    items: [
                    {
                        
    xtype'button',
                        
    text'Neuer Button'
                    
    },
                    {
                        
    xtype'button',
                        
    text'Abbrechen'
                    
    }
                ]
            };
            
    this.items = [
                {
                    
    xtype'fieldset',
                    
    title'Field One',
                    
    layout'form',
                    
    items: [
                        {
                            
    xtype'combo',
                            
    fieldLabel'Label',
                            
    anchor'100%',
                            
    store'TheDataStore',
                            
    shadowfalse,
                            
    hideLabeltrue
                        
    }
                    ]
                },
                {
                    
    xtype'fieldset',
                    
    title'Field Two',
                    
    layout'form',
                    
    items: [
                        {
                            
    xtype'textfield',
                            
    fieldLabel'',
                            
    anchor'100%',
                            
    hideLabeltrue
                        
    }
                    ]
                }
            ];
            
    Ui.superclass.initComponent.call(this);
        }
    }); 
    I want my fields as new objects which are created before and then get listet in the item tag of the window.

    Something like this:


    PHP Code:
    Field1 = new Ext.form.Checkbox({
            
    id'Field1',
            
    fieldLabel'Field1',
            
    checkedtrue,
            
    width50,
            
    allowBlanktrue
        
    });

       
    Field2 = new Ext.form.Checkbox({
            
    id'Field2',
            
    fieldLabel'Field2',
            
    checkedtrue,
            
    width50,
            
    allowBlanktrue
        
    });

    TheNewWindow = new Ext.Window({
            
    id'TheNewWindow',
            
    title'The Window',
            
    closabletrue,
            
    width575,
            
    height700,
            
    plaintrue,
            
    layout'fit',
            
    closeAction'hide',
            
    items:[Field1,Field2],
            
    buttons: [{
                
    text'Abbrechen'
            
    }]
        }); 
    Is this possible?

    Thank you!

  2. #2
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    The Designer will only export your "top level" components...top level meaning the components that are at the root level of your Components tree on the right-hand side. However, if you switch from Design view to Code view, and then highlight your individual sub-components, you can use the "Export Code to Disk" and/or "Copy Code to Clipboard" functions at the top of the Code view. You can then manually construct your components and add them as items to your container in your code.

  3. #3
    Sencha User
    Join Date
    Oct 2007
    Posts
    21
    Vote Rating
    0
    Schlurcher is on a distinguished road

      0  

    Default


    Would be nice if we could mark sub-components to be treated as root components and automatically be exported as such if you hit the Export Project button. Also whats kind of show stopper for me is that some config options and components are missing and your only option to get some things (especially plugins) to work the way that you want is to dive into the ui.js file. Which of course would get overwritten as soon as you export again, so you have to copy it somewhere save and add changes manually. Always feels like a huge fork in the road once you reach that point.

  4. #4
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    We are undergoing a configuration refactor to support everything. However, you should make manual configurations or modifications in your .js file, not your .ui.js file. Your .js class inherits from your .ui.js class. Your suggestion isn't bad, we'll consider it for a future release. Thanks!

  5. #5
    Sencha User
    Join Date
    Oct 2007
    Posts
    21
    Vote Rating
    0
    Schlurcher is on a distinguished road

      0  

    Default


    I am well aware that fiddling around with the ui.js file means crossing a point of no return, but with the current version of the Designer, some things simply can't be done otherwise.

    As far as I understand the generated code, the only proper way to access the generated UI is AFTER initComponent, which for some things is simply too late. Or am I missing something here?

  6. #6
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    Correct, to access working/instantiated components, (e.g., via their "ref"), you do so after the superclass' initComponent is called (note, some visual behavior must only happen after the component is rendered, see the "render" event). Before that though, you can apply configuration options to your class directly (and sub-components in the "items" collection as well), including specifying plugins.

    With that said, you shouldn't "have" to do that with most configurations. When we add support for missing options, then this will be less of an issue for you. It's generally fine to set configurations on the .js class prototype or within the initComponent call directly, but accessing sub-component configurations in the "items" collection to set certain configuration options there can be burdensome.

Similar Threads

  1. Ext Designer Question
    By imegai in forum Ext Designer: Help & Discussion
    Replies: 2
    Last Post: 12 May 2010, 7:35 AM
  2. Question about combobox config in designer
    By Mango_lier in forum Ext Designer: Help & Discussion
    Replies: 18
    Last Post: 27 Apr 2010, 2:28 AM
  3. Ext Designer: How to add multiple radio buttons with designer?
    By lelapinblanc in forum Ext Designer: Help & Discussion
    Replies: 1
    Last Post: 26 Mar 2010, 1:38 PM
  4. Impressions on Ext Designer - question for the conference attendees.
    By jay@moduscreate.com in forum Community Discussion
    Replies: 23
    Last Post: 15 Aug 2009, 5:25 AM

Thread Participants: 2