[HELPED] How to reuse a combo box among apps

[Scott]

In the app I am working on I have a combo box that displays a list of all of our trucks for the user to select from. It is attached to a store/model that auto loads from the server. I know I will need the same functionality in many different apps. I have imported the model into Architect so it is fairly easy to add to a new app and then defining a store and combo box to use the model.

My question is whether this is the right approach or whether there is a way that I can create a custom combo box (that already knows how to get the data using a store/model). Then I can just add to a new app I just add the custom combo box and I am done. Of course I will have to add the code to respond to events as that is unique to each app.

If I can create a custom combo box can anyone point me in the right direction. I don't mind researching the details and figuring it out but would like to know that it is possible before I spend too much time trying to make it work. Looking at some of the guides I am not sure if I can do this by 'Extending a Component' or if I need to create a new class or something else.

Any thoughts are appreciated.

Thanks,

Scott

[eweiler]

You can define a new combo which extends from Ext.Combobox

Some examples.

Static store:

Ext.define('Lizard.ux.Active', {
    extend: 'Ext.form.Field.Combo',
    alias: ['widget.activestatus'],
    displayField: 'val',
    valueField  : 'val',
    
    initComponent: function() {
        this.store = this.buildStore();
        this.callParent(arguments);
    },
    
    buildStore : function() {
        return Ext.create('Ext.data.Store',{
            fields : ['val'],
            data : [{
                val: '*ACTIVE'
            }, {
                val: '*INACTIVE'
            }]
        });
    }
 });

Takes in some additional configs and builds the store.
pgm : in this case, a (poorly named) key to indicate which programs are actually called
code : Value Field of combo and store
desc : description field of combo and store

/* 
//when creating instances of this combo, include lookupInfo obj
PART OF THE CONFIG IS THIS LOOKUP INFO OBJECT
lookupInfo: {
    pgm     : o.FLKUPGRP,  //: pgm group to reference
    code    : o.FLKUCDFLD, //: value field
    desc    : o.FLKUDSFLD  //: display field
},

*/


Ext.define('Lina.ux.SqlCombo', {
    extend: 'Ext.form.field.ComboBox',
    
    alias: ['widget.sqlcombo'],

    
    initComponent: function(config) {
        this.store = this.buildStore();
        this.callParent(arguments);
    },

    
    
    buildStore: function() {
        //fields
        var f = [];
        var c,d;
        
        f.push(this.lookupInfo.code);
        f.push(this.lookupInfo.desc);
        c = this.lookupInfo.code;
        d = this.lookupInfo.desc;
        

        
        this.displayField = this.lookupInfo.desc;
        this.valueField = this.lookupInfo.code;
        if (this.showCodeAndDesc) {
            f.push({
                name : 'codeAndText',
                convert : function(val, rec) {
                    var h = rec.get(c) + ": " + rec.get(d);
                    return h;
                }
            });
            this.displayField = 'codeAndText';    
        }
        
        return Ext.create('Ext.data.Store',{
            fields : f,
            scope: this,
            autoLoad : true,
            proxy : {
                type : 'ajax',
                url : 'vvcall.pgm',
                reader : {
                    type : 'json',
                    root : 'docs',
                    totalProperty: 'totalCount'
                },
                extraParams : {
                    pgm : 'wbmb300p01',
                    action : 'SqlCombo',
                    filegroup: this.lookupInfo.pgm
                }
            }
        });
    }
});

[Scott]

This looks great and will get me a long ways forward. I will digest this and give it a try in the next few days.

Thank you very much,

Scott