1. #1
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    148
    Vote Rating
    2
    denisputnam is on a distinguished road

      0  

    Default How to populate a drop down combo box?

    How to populate a drop down combo box?


    I have created a combo box in the NewForm below along with the store and model to populate the drop down. Can someone tell me what I need to do to get the data.qtrname from the store to populate the combo box?

    Code:
    Ext.define('MySchool.view.subject.NewForm', {    extend: 'Ext.form.Panel',
        alias: 'widget.newsubjectform',
    
    
        autoRender: false,
        draggable: true,
        floating: true,
        frame: true,
        height: 400,
        itemId: 'newsubjectform',
        width: 500,
        title: 'New Subject',
        jsonSubmit: true,
    
    
        initComponent: function() {
            var me = this;
    
    
            me.initialConfig = Ext.apply({
                jsonSubmit: true
            }, me.initialConfig);
    
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'fieldset',
                        title: 'My Fields',
                        items: [
                            {
                                xtype: 'textfield',
                                anchor: '100%',
                                fieldLabel: 'Name'
                            },
                            {
                                xtype: 'numberfield',
                                anchor: '100%',
                                fieldLabel: 'Grade Level'
                            },
                            {
                                xtype: 'numberfield',
                                anchor: '100%',
                                fieldLabel: 'Credit Hours'
                            },
                            {
                                xtype: 'textareafield',
                                anchor: '100%',
                                fieldLabel: 'Description'
                            },
                            {
                                xtype: 'textareafield',
                                anchor: '100%',
                                fieldLabel: 'Objective'
                            },
                            {
                                xtype: 'combobox',
                                anchor: '100%',
                                autoRender: true,
                                itemId: 'quarterscombobox',
                                fieldLabel: 'Quarter',
                                queryMode: 'local',
                                store: 'QuarterNameStore'
                            }
                        ]
                    },
                    {
                        xtype: 'button',
                        itemId: 'newsubjectcancel',
                        text: 'Cancel'
                    },
                    {
                        xtype: 'button',
                        itemId: 'newsubjectsubmit',
                        text: 'Submit'
                    }
                ]
            });
    
    
            me.callParent(arguments);
        }
    
    
    });
    Code:
    Ext.define('MySchool.store.QuarterNameStore', {    extend: 'Ext.data.Store',
    
    
        requires: [
            'MySchool.model.QuarterNamesModel'
        ],
    
    
        constructor: function(cfg) {
            var me = this;
            cfg = cfg || {};
            me.callParent([Ext.apply({
                autoLoad: true,
                model: 'MySchool.model.QuarterNamesModel',
                storeId: 'MyJsonStore',
                proxy: {
                    type: 'rest',
                    url: 'quarternameses',
                    reader: {
                        type: 'json',
                        root: 'data'
                    }
                }
            }, cfg)]);
        }
    });
    Code:
    Ext.define('MySchool.model.QuarterNamesModel', {    extend: 'Ext.data.Model',
    
    
        fields: [
            {
                name: 'qtrname',
                type: 'string'
            },
            {
                name: 'version',
                type: 'string'
            }
        ]
    });
    Code:
    Ext.define('MySchool.controller.quarter.QuarterNamesController', {    extend: 'Ext.app.Controller',
    
    
        models: [
            'QuarterNamesModel'
        ],
        stores: [
            'QuarterNameStore',
            'SubjectStore'
        ],
        views: [
            'subject.NewForm',
            'SubjectsGridPanel',
            'SubjectsForm'
        ],
    
    
        onNewsubjectcancelClick: function(button, e, eOpts) {
            //debugger;
    
    
            var myForm = button.up().getForm();
            myForm.reset();
            button.up().hide();
        },
    
    
        onNewsubjectsubmitClick: function(button, e, eOpts) {
            debugger;
            //var mystore = this.getSubjectStoreStore();
            var mystore = Ext.getStore("SubjectStore");
            var myForm = button.up().getForm();
            myForm.reset();
            button.up().hide();
        },
    
    
        onComboboxShow: function(component, eOpts) {
    
    
        },
    
    
        init: function(application) {
            this.control({
                "#newsubjectcancel": {
                    click: this.onNewsubjectcancelClick
                },
                "#newsubjectsubmit": {
                    click: this.onNewsubjectsubmitClick
                },
                "#quarterscombobox": {
                    show: this.onComboboxShow
                }
            });
        }
    
    
    });

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,188
    Vote Rating
    119
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Set the displayField on the ComboBox to qtrname?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    148
    Vote Rating
    2
    denisputnam is on a distinguished road

      0  

    Default


    Thank you acronan. I set that, but it still doesn't populate. I know the store is working. I have attached the response data from the IDE.

    Is there something else that you can suggest?
    Attached Files

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,188
    Vote Rating
    119
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    When you click the combo are there entries there but they are just blank? very small slivers?

    Can we get a screenshot of the combo?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    148
    Vote Rating
    2
    denisputnam is on a distinguished road

      0  

    Default


    Hi Aaron,

    I did attach a PDF of the screen in my last post. Can you not see the attachments?

    The Quarter: combo box is empty. I have attached the PDF again.

    -Denis
    Attached Files

  6. #6
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,188
    Vote Rating
    119
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Nothing happens when you click the arrow dropdown? Set the triggerAction to 'all'
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  7. #7
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    148
    Vote Rating
    2
    denisputnam is on a distinguished road

      0  

    Default


    Nothing happens when I click the down arrow. Architect has two choices for triggerAction: all or query. When I select all it does nothing, when I select query it adds it. I am assuming that the default is all.

  8. #8
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    148
    Vote Rating
    2
    denisputnam is on a distinguished road

      0  

    Default


    Okay I had to modify the accept for the header so now I am getting a very thin line, but I don't see any text.

    I have attached the screen shots in the PDF.
    Attached Files

  9. #9
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,188
    Vote Rating
    119
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    The response has "qtrName" and the model field name is "qtrname". Make sure they match.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  10. #10
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    148
    Vote Rating
    2
    denisputnam is on a distinguished road

      0  

    Default


    Hi Aaron,

    I tried that but I am only seeing the empty thin lines. I am including my updated code. I hope that you see something obvious because I am at a loss at this point.

    -Denis

    Code:
    Ext.define('MySchool.model.QuarterNamesModel', {    extend: 'Ext.data.Model',
    
    
        fields: [
            {
                name: 'qrtName',
                type: 'string'
            },
            {
                name: 'version',
                type: 'string'
            },
            {
                name: 'id',
                type: 'int'
            }
        ]
    });
    Code:
    Ext.define('MySchool.store.QuarterNameStore', {    extend: 'Ext.data.Store',
    
    
        requires: [
            'MySchool.model.QuarterNamesModel'
        ],
    
    
        constructor: function(cfg) {
            var me = this;
            cfg = cfg || {};
            me.callParent([Ext.apply({
                autoLoad: true,
                model: 'MySchool.model.QuarterNamesModel',
                storeId: 'MyJsonStore',
                proxy: {
                    type: 'rest',
                    url: 'quarternameses',
                    headers: {
                        Accept: 'application/json'
                    },
                    reader: {
                        type: 'json',
                        root: 'data'
                    }
                }
            }, cfg)]);
        }
    });
    Code:
    Ext.define('MySchool.view.subject.NewForm', {    extend: 'Ext.form.Panel',
        alias: 'widget.newsubjectform',
    
    
        autoRender: false,
        draggable: true,
        floating: true,
        frame: true,
        height: 400,
        itemId: 'newsubjectform',
        width: 500,
        title: 'New Subject',
        jsonSubmit: true,
    
    
        initComponent: function() {
            var me = this;
    
    
            me.initialConfig = Ext.apply({
                jsonSubmit: true
            }, me.initialConfig);
    
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'fieldset',
                        title: 'My Fields',
                        items: [
                            {
                                xtype: 'textfield',
                                anchor: '100%',
                                fieldLabel: 'Name'
                            },
                            {
                                xtype: 'numberfield',
                                anchor: '100%',
                                fieldLabel: 'Grade Level'
                            },
                            {
                                xtype: 'numberfield',
                                anchor: '100%',
                                fieldLabel: 'Credit Hours'
                            },
                            {
                                xtype: 'textareafield',
                                anchor: '100%',
                                fieldLabel: 'Description'
                            },
                            {
                                xtype: 'textareafield',
                                anchor: '100%',
                                fieldLabel: 'Objective'
                            },
                            {
                                xtype: 'combobox',
                                anchor: '100%',
                                autoRender: false,
                                itemId: 'quarterscombobox',
                                fieldLabel: 'Quarter',
                                displayField: 'qrtName',
                                forceSelection: true,
                                store: 'QuarterNameStore',
                                valueField: 'id'
                            }
                        ]
                    },
                    {
                        xtype: 'button',
                        itemId: 'newsubjectcancel',
                        text: 'Cancel'
                    },
                    {
                        xtype: 'button',
                        itemId: 'newsubjectsubmit',
                        text: 'Submit'
                    }
                ]
            });
    
    
            me.callParent(arguments);
        }
    
    
    });
    Code:
    Ext.define('MySchool.controller.SubjectsController', {    extend: 'Ext.app.Controller',
    
    
        selectedIndex: '0',
        models: [
            'SubjectsModel'
        ],
        stores: [
            'SubjectStore'
        ],
        views: [
            'MainPanel',
            'SubjectsGridPanel',
            'SubjectsForm',
            'SubjectsPanel'
        ],
    
    
        refs: [
            {
                ref: 'subjectsForm',
                selector: 'form'
            }
        ],
    
    
        constructor: function(cfg) {
            cfg = cfg || {};
            this.callParent(this.processSubjectsController(cfg));
        },
    
    
        processSubjectsController: function(config) {
            return config;
        },
    
    
        onSubjectsgridSelect: function(rowmodel, record, index, eOpts) {
            window.console.log( "selected row in grid." );
            window.console.log( "index=" + index );
            //debugger;
            //if ( record ) {
            //    this.getSubjectsForm().getForm().loadRecord(record);
            //}
            this.selectedIndex = index;
        },
    
    
        onSubjectdescriptiontextareaChange: function(field, newValue, oldValue, eOpts) {
            // NEED TO MARK THE GRID's RECORD DIRTY HERE BUT I DON'T HOW TO GET A HOLD OF THE RECORD INDEX OR THE RECORD.
            window.console.log( 'selectedIndex=' + this.selectedIndex );
            window.console.log( "onSubjectdescriptiontextareraChange() field=" + field );
            var mystore = Ext.getStore("SubjectStore");
            var myrecord = mystore.getAt( this.selectedIndex );
            myrecord.set( 'description', newValue );
    
    
    
    
        },
    
    
        onSubjectobjectivetextareaChange: function(field, newValue, oldValue, eOpts) {
            // NEED TO MARK THE GRID's RECORD DIRTY HERE BUT I DON'T HOW TO GET A HOLD OF THE RECORD INDEX OR THE RECORD.
            window.console.log( 'selectedIndex=' + this.selectedIndex );
            window.console.log( "onSubjectobjectivetextareraChange() field=" + field );
            var mystore = Ext.getStore("SubjectStore");
            var myrecord = mystore.getAt( this.selectedIndex );
            myrecord.set( 'objectives', newValue );
        },
    
    
        onTooldeletestudentsbysubjectClick: function(tool, e, eOpts) {
            window.console.log( 'Delete' );
        },
    
    
        onToolnewsubjectsClick: function(tool, e, eOpts) {
            debugger;
            window.console.log( 'New' );
            var newDialog = Ext.create( 'MySchool.view.subject.NewForm' );
            //window.console.log( "DEBUG" );
            //newDialog.show();
            newDialog.render( Ext.getBody() );
            newDialog.show();
        },
    
    
        onToolsearchsubjectsClick: function(tool, e, eOpts) {
            window.console.log( 'Search' );
        },
    
    
        onToolrefreshsubjectsClick: function(tool, e, eOpts) {
            // Add refresh handler code here.  Use example from chapter 2 of book.
            //debugger;
            window.console.log( 'Refresh' );
            var mystore = Ext.getStore("SubjectStore");
            mystore.reload();
            //pnl.setTitle( 'Denis' );
        },
    
    
        init: function(application) {
    
    
            this.control({
                'subjectsgridpanel': {
                    selectionchange: this.gridSelectionChange,
                    viewready: this.onViewReady
                },
                'subjectsavetool': {
                    click: this.onSubjectsavetoolidClick
                }
            });
    
    
    
    
            this.control({
                "#subjectsgrid": {
                    select: this.onSubjectsgridSelect
                },
                "#subjectdescriptiontextarea": {
                    change: this.onSubjectdescriptiontextareaChange
                },
                "#subjectobjectivetextarea": {
                    change: this.onSubjectobjectivetextareaChange
                },
                "#tooldeletestudentsbysubject": {
                    click: this.onTooldeletestudentsbysubjectClick
                },
                "#toolnewsubjects": {
                    click: this.onToolnewsubjectsClick
                },
                "#toolsearchsubjects": {
                    click: this.onToolsearchsubjectsClick
                },
                "#toolrefreshsubjects": {
                    click: this.onToolrefreshsubjectsClick
                }
            });
        },
    
    
        onViewReady: function(grid) {
    
    
            grid.getSelectionModel().select( 0 );
        },
    
    
        onSubjectsavetoolidClick: function(tool, e, eOpts) {
            window.console.log( "Save" );
            //debugger;
    
    
            var mystore = Ext.getStore("SubjectStore");
    
    
            var records = mystore.getModifiedRecords();
            for( var i = 0; i < records.length; i++ )
            {
                records[i].set( 'lastUpdated', new Date() );
                var form = this.getSubjectsForm().getForm();
                var formValues = form.getValues();
                records[i].set( 'description', formValues.description );
                records[i].set( 'objectives', formValues.objectives );
                window.console.log( 'objectives=' + formValues.objectives );
                window.console.log( 'description=' + formValues.description );
            }
    
    
            mystore.sync();
    
    
        },
    
    
        gridSelectionChange: function(model, records) {
            //debugger;
            if ( records[0] ) {
                this.getSubjectsForm().getForm().loadRecord(records[0]);
            }
        }
    
    
    });
    Code:
    Ext.define('MySchool.controller.quarter.QuarterNamesController', {    extend: 'Ext.app.Controller',
    
    
        models: [
            'QuarterNamesModel'
        ],
        stores: [
            'QuarterNameStore',
            'SubjectStore'
        ],
        views: [
            'subject.NewForm',
            'SubjectsGridPanel',
            'SubjectsForm'
        ],
    
    
        onNewsubjectcancelClick: function(button, e, eOpts) {
            //debugger;
    
    
            var myForm = button.up().getForm();
            myForm.reset();
            button.up().hide();
        },
    
    
        onNewsubjectsubmitClick: function(button, e, eOpts) {
            //debugger;
            //var mystore = this.getSubjectStoreStore();
            var mystore = Ext.getStore("SubjectStore");
            var myForm = button.up().getForm();
            myForm.reset();
            button.up().hide();
        },
    
    
        init: function(application) {
            this.control({
                "#newsubjectcancel": {
                    click: this.onNewsubjectcancelClick
                },
                "#newsubjectsubmit": {
                    click: this.onNewsubjectsubmitClick
                }
            });
        }
    
    
    });

Thread Participants: 1

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