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,445
    Vote Rating
    129
    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,445
    Vote Rating
    129
    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,445
    Vote Rating
    129
    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,445
    Vote Rating
    129
    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