1. #11
    Sencha User
    Join Date
    Aug 2011
    Posts
    10
    Vote Rating
    0
    eistrati is on a distinguished road

      0  

    Default Thanks, but ...

    Thanks, but ...


    This is pretty cool, thanks a lot! But here is what I meant (part of my view):

    Code:
    initialize: function() {
        var field = this.get('id-multiselectfield');
        if (field.getDisplayField() === 'text') {
            field.applyValue('v1,v2,v3');
            field.updateValue('v1,v2,v3');
        }
    }

  2. #12
    Sencha User
    Join Date
    Jan 2013
    Posts
    5
    Vote Rating
    0
    wha is on a distinguished road

      0  

    Default Not Display Data on Select Field.

    Not Display Data on Select Field.


    Hi, I've a problem on multiselect field. No data displayed on select field but store count is work. When i tap multi select field i got this error, Uncaught TypeError: Cannot call method 'split' of undefined" Here is my code. Please suggest me what is wrong in my code.

    var topper =
    {
    xtype:'multiselectfield',
    name: 'topper',
    label: 'Topper',
    //store: 'TopperStore',
    itemId: 'topper',
    displayField : 'text',
    valueField : 'value',
    usePicker : false, //required
    options : [
    {text: 'Ed', value: 'Spencer'},
    {text: 'Tommy', value: 'Maintz'},
    {text: 'Aaron', value: 'Conran'},
    {text: 'Jamie', value: 'Avins'}
    ]
    }

    And this is multiselect.js
    PHP Code:
    Ext.define('ipos.view.MultiSelect', {    extend'Ext.field.Select',    alias 'widget.multiselectfield',    xtype 'multiselectfield',    usePicker false,  //force list panel, not picker
        
    getTabletPicker: function() {  //override with modified function        var config = this.getDefaultTabletPickerConfig();        if (!this.listPanel) {            this.listPanel = Ext.create('Ext.Panel', Ext.apply({                centered: true,                modal: true,                cls: Ext.baseCSSPrefix + 'select-overlay',                layout: 'fit',                hideOnMaskTap: false,                items: {                    xtype: 'list',                    mode: 'MULTI', //set list to multi-select mode                    store: this.getStore(),                    itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + '}</span>',                    listeners: {                        select : this.onListSelect,                        itemtap  : this.onListTap,                        hide : this.onListHide, //new listener                        scope  : this                    },                    items: { //new button to trigger formatting/setting new field value with joined string                        xtype: 'button',                        text: 'Done',                        ui: 'action',                        height: '20px',                        width: '50%',                        docked: 'bottom',                        style: 'margin-top: 10px; margin-bottom: 10px; margin-left: auto; margin-right: auto;',                        listeners: {                            tap: this.onButtonTap,                            scope: this                        }                    }                }            }, config));        }        return this.listPanel;    },        applyValue: function(value) {  //override with modified function        var record = value,            index;        this.getOptions();        if (!(value instanceof Ext.data.Model)) {            index = this.getStore().find(this.getValueField(), value, null, null, null, true);
                
    if (index == -1) {                index this.getStore().find(this.getDisplayField(), valuenullnullnulltrue);            }            //We do not want to get record from store //record = this.getStore().getAt(index);             this.element.dom.lastChild.firstChild.firstChild.value = value; //display csv string in field when value applied        }        return record;    },
        
    updateValue: function(newValueoldValue) {  //override with modified function        this.previousRecord = oldValue;        this.record = newValue;        // String does not have methods //this.callParent([newValue ? newValue.get(this.getDisplayField()) : '']);        this.fireEvent('change', this, newValue, oldValue);    },
        
    getValue: function() {  //override with modified function        var record = this.record;        return (record) // Use literal string value of field // ? record.get(this.getValueField()) : null;    },
        
    showPicker: function() {  //override with modified function        //check if the store is empty, if it is, return        if (this.getStore().getCount() === 0) {            return;        }        if (this.getReadOnly()) {            return;        }        this.isFocused = true;        //hide the keyboard        //the causes https://sencha.jira.com/browse/TOUCH-1679        // Ext.Viewport.hideKeyboard();        if (this.getUsePicker()) {            var picker = this.getPhonePicker(),                name   = this.getName(),                value  = {};
                
    value[name] = this.record.get(this.getValueField());            picker.setValue(value);            if (!picker.getParent()) {                Ext.Viewport.add(picker);            }            picker.show();        } else { //reworked code to split csv string into array and select correct list items            var listPanel = this.getTabletPicker(),                list = listPanel.down('list'),                store = list.getStore(),                itemStringArray = new Array(),                values = this.getValue().split(','),                v = 0,                vNum = values.length;            if (!listPanel.getParent()) {                Ext.Viewport.add(listPanel);            }            for (; v < vNum; v++) {                itemStringArray.push(values[v]);            }            v = 0;            for (; v < vNum; v++) {                var record = store.findRecord(this.getDisplayField(), itemStringArray[v], 0, true, false, false );                list.select(record, true, false);            }            listPanel.showBy(this.getComponent());            listPanel.down('list').show();        }    },
        
    onListSelect: function(itemrecord) {  //override with empty function    },
        
    onListTap: function() {  //override with empty function    },
        
    onButtonTap: function() {        this.setValue('');        this.listPanel.down('list').hide(); //force list hide event        this.listPanel.hide({            type : 'fade',            out  : true,            scope: this        });    },
        
    onListHide: function(cmpopts) {        var me this,            recordArray this.listPanel.down('list').selected.items,            itemStringArray = new Array(),            0,            vNum recordArray.length;        for (; vNumv++) {            var value this.getDisplayField();            itemStringArray.push(recordArray[v].data.value);        }        if (itemStringArray.length 0) {            me.setValue(itemStringArray.join(','));            this.listPanel.down('list').deselectAll();        } else {            me.setValue('None');        }    }}); 

  3. #13
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

  4. #14
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    Quote Originally Posted by vadimv View Post
    thanks for sharing! you know, that your demo on github is not working?

  5. #15
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    @ingo.hefti , just added the UX in the sencha fiddle: https://fiddle.sencha.com/#fiddle/r9

  6. #16
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    Quote Originally Posted by vadimv View Post
    @ingo.hefti , just added the UX in the sencha fiddle: https://fiddle.sencha.com/#fiddle/r9
    cool! thanks!! btw: love your component!!!

  7. #17
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by vadimv View Post
    @ingo.hefti , just added the UX in the sencha fiddle: https://fiddle.sencha.com/#fiddle/r9
    I added the fiddle to the first post of this thread for a live preview and code view that will update if the fiddle is ever updated.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #18
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    Hey Mitchell,

    thanks, that might be helpful for other users.....even if I'm not the starter/owner of this thread, mine is here: http://www.sencha.com/forum/showthre...ld.Multiselect

    Vadim

  9. #19
    Sencha User
    Join Date
    Aug 2013
    Posts
    3
    Vote Rating
    0
    darpan214 is on a distinguished road

      0  

    Default When I followed the above instructions to use MultiSelect field, It didn`t work.

    When I followed the above instructions to use MultiSelect field, It didn`t work.


    I put the code into my Form Panel, created MultiSelect.js file under app/view/ folder.
    Copy the whole content int that MultiSelect.js file.

    But when I run my application, it browser throws an error.
    The Error Message is:
    Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: widget.multiselectfield
    It throws an error from sencha-touch-all-debug.js file.
    Saying that,
    instantiateByAlias: function() {
    var alias = arguments[0],
    args = arraySlice.call(arguments),
    className = this.getNameByAlias(alias);


    if (!className) {
    className = this.maps.aliasToName[alias];


    //<debug error>
    if (!className) {
    throw new Error("[Ext.createByAlias] Cannot create an instance of unrecognized alias: " + alias);
    }
    //</debug>


    //<debug warn>
    Ext.Logger.warn("[Ext.Loader] Synchronously loading '" + className + "'; consider adding " +
    "Ext.require('" + alias + "') above Ext.onReady");
    //</debug>


    Ext.syncRequire(className);
    }
    It makes sense too as how can it recognize the new xtype? What should I do to resolve this issue?
    I got stuck in this situation. I want to select multiple values. For that I tried to use Checkedfield but I am not able to get the values from store for checkedfiled entries. Any idea , what should i use tool so that I can select multiple entries and entries should be from the store itself.
    Thanks in advanced. This is the first time I am writing thread.

    Thanks,
    Darpan.

  10. #20
    Sencha User
    Join Date
    Aug 2013
    Posts
    3
    Vote Rating
    0
    darpan214 is on a distinguished road

      0  

    Default


    Well, I got this problem. But now, when I use Store instead of Options shown in Sencha Fiddle, It did not work. So, How can I link this field with my store? I already add configs like Store :'mystore_id', displayField :' column name' , valueField : 'column_name' (i.e. id). But Still, It is not working.Thanks in advance. I got stuck here for 20 days. Please reply.