1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Answers
    1
    Vote Rating
    2
    infernoz is on a distinguished road

      0  

    Default Answered: Adding components to an Ext.window.Window

    Answered: Adding components to an Ext.window.Window


    Hello,

    I am attempting to create an Ext.window.Window that will pop up at a particular time in my application. The window has a fit layout and includes a panel. The panel will initially have one object in it which consists of a text field and a combobox.

    If the user wants to add additional text field/combobox pieces to the window, they can do so by pressing a button.

    I initially started out with one text field/combobox in the window and it looks great. The issue arises when a new field/combobox is added, the contents looks real funky and not aligned.

    I currently am using an absolute layout for the panel because vbox produced similar issues. Absolute and vbox dont seem to work for me (no matter what I place for y: for absolute...) Why is the additional content not showing up in the layout that I would like (Each field/combobox object gets added in order vertically, not overlapping each other?

    WindowBeforeAdd.jpg


    WindowAfterAdd.jpg

    --Object representing my textfield, combobox
    Code:
    Ext.require(['DMT.view.OrgComboBox']);
    
    Ext.define('DMT.view.IssueIdMultiSearchData' ,{
        extend: 'Ext.panel.Panel',
        alias : 'widget.issueIdMultiSearchData',
        layout: 'hbox',
        maxHeight: 30,
        maxWidth: 570,
        items: [
            { xtype: 'textfield', fieldLabel: 'Issue Id', name: 'issueId', id: 'issueIdMultiSearchDataTextField',
                validateOnChange: true, 
                validateOnBlur: false,
                allowBlank: false, 
                width: '250'
            },
            { xtype: 'component', width: 25},
            { xtype: 'orgComboBox', name: 'idType', id: 'issueIdMultiSearchDataComboBox',
                listeners: {
                    'afterrender': function() {
                        var comboStore = this.getStore();
                        this.setValue(comboStore.first().get('idNum'));
                    }
                }
            }
        ],
        
        validate: function () {
            var textField = this.getComponent('issueIdMultiSearchDataTextField');
            var comboBox = this.getComponent('issueIdMultiSearchDataComboBox');
            
            if (textField.validate() && comboBox.validate()) {
                return true;
            }
            
            return false;
        }
    });
    -- My Window
    Code:
    Ext.require(['DMT.view.IssueIdMultiSearchData']);
    
    Ext.define('DMT.view.IssueIdMultiSearchWindow' ,{
        extend: 'Ext.window.Window',
        title: 'Issue Id Search',
        id: 'currentSearchWindow',
        height: 600,
        width: 570,
        layout: 'fit',
        buttonAlign: 'right',
        draggable: false,
        resizable: false,
        modal: true,
        
        constructor: function(config) {
            maxArrayLength = 15;
            currentWindow = this;
            issueIdSearchDataArray = config.searchDataArray;
            issueIdLocalArray = new Array();
           
            this.callParent(arguments);
            
            issueIdMultiSearchWindowPanel = this.getComponent('issueIdMultiSearchWindowPanel');
            
            for (var i = 0; i < issueIdSearchDataArray.length; i++) {
                var issueIdSearchData = issueIdSearchDataArray[i];
                issueIdMultiSearchWindowPanel.add(issueIdSearchData);
                issueIdLocalArray.push(issueIdSearchData);
            }
    
            if (issueIdSearchDataArray.length < maxArrayLength) {
                var newIssueIdSearchData = Ext.widget('issueIdMultiSearchData',{ 
                     x:0, y:10
                 });
              
                issueIdMultiSearchWindowPanel.add(newIssueIdSearchData);
                issueIdLocalArray.push(newIssueIdSearchData);
            }
            
        },
        
       items: [
            {xtype: 'panel', id: 'issueIdMultiSearchWindowPanel', layout: 'absolute'}
             
        ],
        
        buttons: [
            { text: 'Add Search Criteria', id: 'addSearchCriteriaButton',
                listeners: {
                    'click': function() {
                        var currentWindow = Ext.getCmp('currentSearchWindow');
                        if (currentWindow.isSearchDataValid() && issueIdLocalArray.length < maxArrayLength) {
                            var newIssueIdSearchData = Ext.widget('issueIdMultiSearchData',{ 
                                 x:0, y:50
                             });
                          
                            issueIdMultiSearchWindowPanel.add(newIssueIdSearchData);
                            issueIdLocalArray.push(newIssueIdSearchData);
                        }
                        else {
                            Ext.Msg.show({
                                title:'DMT Search',
                                msg: 'Cannot add additional search item. Current items are invalid and/or maximum number of items are in place to be search',
                                icon: Ext.Msg.WARNING,
                                buttons: Ext.Msg.OK
                            });
                        }
                    }
                }
            },
            { text: 'OK' }
        ],
        
        isSearchDataValid: function() {
            for (var i = 0; i < issueIdLocalArray.length; i++) {
                var currentIssudeIdSearchData = issueIdLocalArray[i];
                
                if (!currentIssudeIdSearchData.validate()) {
                    return false;
                }
            }
            
            return true;
        }
            
    });
    --Calling the window to pop up. Pops up when someone clicks on a textfield in a form
    Code:
    {
    ............
                    xtype     : 'textareafield',
                    name      : 'Multi Id Search',
                    fieldLabel: 'Multi Id Search',
                    readOnly: true,
                    autoScroll: true,
                    height: 50,
                    listeners: {
                        'focus': function() {
                            someWindow = Ext.create('DMT.view.IssueIdMultiSearchWindow', {
                                searchDataArray: multiIdSearchArray
                            });
                            someWindow.show();
                        }
                    },
                    x:0, y:50
                }
    ..............
    Thanks,

    infernoz

  2. It seems that your problem is at using id for components (see code marked with red color in your code). This way, all the added components will have the same id and this will cause problem. Try to remove these ids and use other way instead.
    Code:
    Ext.define('DMT.view.IssueIdMultiSearchData' ,{
        extend: 'Ext.form.FieldContainer',
        alias : 'widget.issueIdMultiSearchData',
        layout: 'hbox',
       /* maxHeight: 30,
        maxWidth: 570,*/
        items: [
            { xtype: 'textfield', fieldLabel: 'Issue Id', name: 'issueId', id: 'issueIdMultiSearchDataTextField',
                validateOnChange: true, 
                validateOnBlur: false,
                allowBlank: false, 
                width: '250'
            },
            { xtype: 'component', width: 25},
            { xtype: 'combobox', name: 'idType', id: 'issueIdMultiSearchDataComboBox',
                listeners: {
                    'afterrender': function() {
                        var comboStore = this.getStore();
                        this.setValue(comboStore.first().get('idNum'));
                    }
                }
            }
        ],
        validate: function () {
            var textField = this.getComponent('issueIdMultiSearchDataTextField');
            var comboBox = this.getComponent('issueIdMultiSearchDataComboBox');
            
            if (textField.validate() && comboBox.validate()) {
                return true;
            }
            
            return false;
        }
    });

  3. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,913
    Answers
    371
    Vote Rating
    179
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Does this example help at all?

    Code:
    Ext.define('CoupleOfFields', {
        extend: 'Ext.form.FieldContainer'
        , alias: 'widget.fieldct'
        
        , layout: 'hbox'
        , items: [{
            xtype: 'textfield'
            , fieldLabel: 'Field 1'
        }, {
            xtype: 'textfield'
            , fieldLabel: 'Field 2'
        }]
    });
    
    
    Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 200,
        width: 600,
        layout: 'fit',
        items: [{
            xtype: 'form'
            , items: [{
                xtype: 'fieldct'
            }]
        }]
        , bbar: [{
            xtype: 'button'
            , text: 'Add More Fields'
            , handler: function (btn) {
                btn.up('window').down('form').add({ xtype: 'fieldct' });
            }
        }]
    }).show();

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Answers
    1
    Vote Rating
    2
    infernoz is on a distinguished road

      0  

    Default tried example, but still same issue

    tried example, but still same issue


    Hello,

    I tried implementing features from your example using a fieldcontainer instead of a panel. But the same issue persists. The initial add of the first field container works fine, but additional adds fall on top of each other and make the contents look bad and unreachable to edit by the user

    another example.jpg

    Heres the new code that still isnt working
    Code:
    Ext.require(['DMT.view.OrgComboBox']);
    
    Ext.define('DMT.view.IssueIdMultiSearchData' ,{
        extend: 'Ext.form.FieldContainer',
        alias : 'widget.issueIdMultiSearchData',
        layout: 'hbox',
       /* maxHeight: 30,
        maxWidth: 570,*/
        items: [
            { xtype: 'textfield', fieldLabel: 'Issue Id', name: 'issueId', id: 'issueIdMultiSearchDataTextField',
                validateOnChange: true, 
                validateOnBlur: false,
                allowBlank: false, 
                width: '250'
            },
            { xtype: 'component', width: 25},
            { xtype: 'orgComboBox', name: 'idType', id: 'issueIdMultiSearchDataComboBox',
                listeners: {
                    'afterrender': function() {
                        var comboStore = this.getStore();
                        this.setValue(comboStore.first().get('idNum'));
                    }
                }
            }
        ],
        
        validate: function () {
            var textField = this.getComponent('issueIdMultiSearchDataTextField');
            var comboBox = this.getComponent('issueIdMultiSearchDataComboBox');
            
            if (textField.validate() && comboBox.validate()) {
                return true;
            }
            
            return false;
        }
    });
    Code:
    Ext.require(['DMT.view.IssueIdMultiSearchData']);
    
    Ext.define('DMT.view.IssueIdMultiSearchWindow' ,{
        extend: 'Ext.window.Window',
        title: 'Issue Id Search',
        id: 'currentSearchWindow',
        height: 600,
        width: 570,
        layout: 'fit',
        buttonAlign: 'right',
        draggable: false,
        resizable: false,
        modal: true,
        
        constructor: function(config) {
            maxArrayLength = 15;
            currentWindow = this;
            issueIdSearchDataArray = config.searchDataArray;
            issueIdLocalArray = new Array();
            this.callParent(arguments);
            
            issueIdMultiSearchWindowForm = this.getComponent('issueIdMultiSearchWindowForm');
            
            for (var i = 0; i < issueIdSearchDataArray.length; i++) {
                var issueIdSearchData = issueIdSearchDataArray[i];
                issueIdMultiSearchWindowForm.add(issueIdSearchData);
                issueIdLocalArray.push(issueIdSearchData);
            }
    
            if (issueIdSearchDataArray.length < maxArrayLength) {
                var newIssueIdSearchData = Ext.widget('issueIdMultiSearchData');
                issueIdMultiSearchWindowForm.add(newIssueIdSearchData);
                issueIdLocalArray.push(newIssueIdSearchData);
            }
        },
        
       items: [
               {xtype: 'form', id: 'issueIdMultiSearchWindowForm'}         
        ],
        
        buttons: [
            { text: 'Add Search Criteria', id: 'addSearchCriteriaButton',
                listeners: {
                    'click': function() {
                        var currentWindow = Ext.getCmp('currentSearchWindow');
                        if (currentWindow.isSearchDataValid() && issueIdLocalArray.length < maxArrayLength) {
                            var newIssueIdSearchData = Ext.widget('issueIdMultiSearchData');
                            issueIdMultiSearchWindowForm.add(newIssueIdSearchData);
                            issueIdLocalArray.push(newIssueIdSearchData);
                        }
                        else {
                            Ext.Msg.show({
                                title:'DMT Search',
                                msg: 'Cannot add additional search item. Current items are invalid and/or maximum number of items are in place to be search',
                                icon: Ext.Msg.WARNING,
                                buttons: Ext.Msg.OK
                            });
                        }
                    }
                }
            },
            { text: 'OK' }
        ],
        
        isSearchDataValid: function() {
            for (var i = 0; i < issueIdLocalArray.length; i++) {
                var currentIssudeIdSearchData = issueIdLocalArray[i];
                
                if (!currentIssudeIdSearchData.validate()) {
                    return false;
                }
            }
            
            return true;
        }
            
    });
    Code to instantiate the Window has stayed the same.

    Just an update I tried adding a vbox or fit layout to the form I added in the items section in my window, but an add of another fieldcontainer makes all fieldcontainers to dissappear in the window...

    Cheers,

    infernoz
    Last edited by infernoz; 10 May 2012 at 7:19 AM. Reason: adding additional steps that I took to resolve this issue

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Answers
    1
    Vote Rating
    2
    infernoz is on a distinguished road

      0  

    Default


    Seems the issue is related specifically to adding my created xtype issueIdMultiSearchData. If I add two of these guys or more to the form, I get the issue described above. If I add another object, such as a text field, the layout looks fine. Still cant figure out why I cant instantiate more than one issueIdMultiSearchData though....

  6. #5
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    It seems that your problem is at using id for components (see code marked with red color in your code). This way, all the added components will have the same id and this will cause problem. Try to remove these ids and use other way instead.
    Code:
    Ext.define('DMT.view.IssueIdMultiSearchData' ,{
        extend: 'Ext.form.FieldContainer',
        alias : 'widget.issueIdMultiSearchData',
        layout: 'hbox',
       /* maxHeight: 30,
        maxWidth: 570,*/
        items: [
            { xtype: 'textfield', fieldLabel: 'Issue Id', name: 'issueId', id: 'issueIdMultiSearchDataTextField',
                validateOnChange: true, 
                validateOnBlur: false,
                allowBlank: false, 
                width: '250'
            },
            { xtype: 'component', width: 25},
            { xtype: 'combobox', name: 'idType', id: 'issueIdMultiSearchDataComboBox',
                listeners: {
                    'afterrender': function() {
                        var comboStore = this.getStore();
                        this.setValue(comboStore.first().get('idNum'));
                    }
                }
            }
        ],
        validate: function () {
            var textField = this.getComponent('issueIdMultiSearchDataTextField');
            var comboBox = this.getComponent('issueIdMultiSearchDataComboBox');
            
            if (textField.validate() && comboBox.validate()) {
                return true;
            }
            
            return false;
        }
    });

  7. #6
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Answers
    1
    Vote Rating
    2
    infernoz is on a distinguished road

      0  

    Default Removing id worked

    Removing id worked


    Thanks vietits, removing the ids solved the problem I was having. I replaced my getComponentCall('id') with up('xtype') and down('xtype') calls.

    One additional question though.... lets say you have two or more of the same xtypes inside a component (5 text fields for instance). Say you only want to access one them and want a very specific one. How would you get that very specific text field using down()? You could assign the different text fields different ids, but that messes up the display of them.... what to do?

    Thanks,

    infernoz

  8. #7
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    You can use xtype in association with a specific property, such as 'name' or event a custom property. Example:
    Code:
    <parentComponent>.down('xtype[property="value"]');

  9. #8
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Answers
    1
    Vote Rating
    2
    infernoz is on a distinguished road

      0  

    Default


    Can the property be dynamically specified in a variable like so:

    var someVariable = 5

    <parentComponent>.down('xtype[property=someVariable]');

    ?

    Since I will be placing many instances of the same class in my panel, and will need to retrieve them based on user actions the property would have to be passed in.

    How can one retrieve ALL components underneath another component that have a particular xtype? The function down() only returns the first instance, what if you want all?

    Thanks,

    infernoz

  10. #9
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Quote Originally Posted by infernoz View Post
    Can the property be dynamically specified in a variable like so:

    var someVariable = 5

    <parentComponent>.down('xtype[property=someVariable]');

    Since I will be placing many instances of the same class in my panel, and will need to retrieve them based on user actions the property would have to be passed in.
    You can query a child of a parent by using
    Code:
    var someVariable = 5;
    <parentComponent>.down('xtype[property=' + someVariable + ']');
    How can one retrieve ALL components underneath another component that have a particular xtype? The function down() only returns the first instance, what if you want all?
    You can use <parentComponent>.query('xtype') to get all descentdant components of xtype.

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi