I am needing to do this as well.
What's the best way to use a remote store, but have some default values populate without the additem function being called?
I can *for now* just restrict the added values to be unique but that's a hack. I can't seem to figure out a way to not have the additem function get called when using a remote store...
Travis Bell
Do you mean you don't want the additem event to trigger the handler?
The simplest way would be to suspend events, use setValueEx to set the default values, then resume events.
The more complicated but complete way would be to create a new setDefaultValue method, and trace everything through to the addRecord method (where the additem event is fired) overriding these methods to pass an additional param (all the way to addRecord) that indicates that you wish to supress this event from firing.
You can then do something like:
PHP Code:
if(!supressEvent){
this.fireEvent('additem', this, val, record);
}
We've some observed behavior that looks like a bug in the component. If you define initial value on the SuperBoxSelect initial config, and shortly after this (before it's get rendered) you set value to different one, the initial value overrides the one set later.
In the component source there is a code which seems to be written to prevent such case (using preRenderValue) but it looks like broken - it doesn't work well. I attach the testcase - the expected result is to see Item2 and Item4 to be displayed, but instead it diesplay Item1 (from initial config).
We've identified possible solution to this problem, which requires modification to onRender method in SupeBoxSelect source, and adding afterRender method:
Code:onRender:function(ct, position) { Ext.ux.form.SuperBoxSelect.superclass.onRender.call(this, ct, position); .... this.setupFormInterception(); // move this code to overriden afterRender method: //if(this.preRenderValue){ // this.setValue(this.preRenderValue); // this.preRenderValue = null; //} }, afterRender: function() { Ext.ux.form.SuperBoxSelect.superclass.afterRender.call(this); if(this.preRenderValue){ this.setValue(this.preRenderValue); this.preRenderValue = null; } }
@grzegorz.borkowski
Thanks for the report, that's a scenario I hadn't considered. I will fix this in the next version.
Regards,
Dan
I have problems with submit form and getForm().load.
When i load data info form with this JSON:
1) everything working ok with hiddenName: "customers_regon"Code:{"success":true,"data":{"customers_regon":"16,9"}}
2) but i must use hiddenName: "customers_regon[]" (because submit more then one value) and with this doesn't load any values.
Before i found this plugin i use Ext.ux.form.LovCombo and this works with hiddenName: "customers_regon" because this submit in POST not :
customers_regon[]: 1 or customers_regon: 1
customers_regon[]: 2 or customers_regon: 2
but simply: customers_regon: 1,2
Can anybody help me with this?
Code:},{ xtype:'superboxselect', allowBlank: false, msgTarget: 'side', renderFieldBtns: true, fieldLabel: 'Countries', resizable: true, store: new Ext.data.JsonStore({ url: "/html/get_pages", root: "data", id: "id", totalProperty: "total", fields: [{name:"customers_regon", mapping:"id"}, {name:"label"}], autoLoad: true }), mode: 'local', displayField: 'label', valueField: 'customers_regon', //hiddenName: "customers_regon[]", hiddenName: "customers_regon", anchor: '95%', classField: 'cls', styleField: 'style', extraItemCls: 'x-flag', extraItemStyle: 'border-width:2px' }]
@dizor,
I'm currently travelling and viewing this on my phone, so I can't see your code properly, however, it appears that you haven't given the component a name - can you please try with using the name config.
Thanks,
Dan
The problem occurred because i have error in JSON - i use:
instead:Code:{"success":true,"data":{"customers_regon":"16,9"}}
@danh2000: thx for reply and great plugin!Code:{"success":true,"data":{"customers_regon[]":"16,9"}}
Thx, great plugin. Nice and detailed control. One small issue to consider and I'll be very appreciated if it is addressed, because it prevents me to use in my project.
Control posts its values even it's set as disabled. For consistency with other Ext JS controls and according to HTML standards when a control is disabled, it shouldn't post its value when the form is submitted.
Best regards,
Below is a suggestion to prevent sending values when disabled. (Changes are in red)
CAVEAT: This only works when disabled via initial config. I'm not experienced in Ext JS. I think someone will come with a more elegant solution.
Code:addItemBox : function(itemVal,itemDisplay,itemCaption, itemClass, itemStyle) { var parseStyle = function(s){ var ret = ''; if(typeof s == 'function'){ ret = s.call(); }else if(typeof s == 'object'){ for(var p in s){ ret+= p +':'+s[p]+';'; } }else if(typeof s == 'string'){ ret = s + ';'; } return ret; }; var itemKey = Ext.id(null,'sbx-item'); var box = new Ext.ux.form.SuperBoxSelectItem({ owner: this, disabled: this.disabled, renderTo: this.wrapEl, cls: this.extraItemCls + ' ' + itemClass, style: parseStyle(this.extraItemStyle) + ' ' + itemStyle, caption: itemCaption, display: itemDisplay, value: itemVal, key: itemKey, listeners: { 'remove': function(item){ if(this.fireEvent('beforeremoveitem',this,item.value) === false){ return; } this.items.removeKey(item.key); if(this.removeValuesFromStore){ if(this.usedRecords.containsKey(item.value)){ this.store.add(this.usedRecords.get(item.value)); this.usedRecords.removeKey(item.value); this.sortStore(); if(this.view){ this.view.render(); } } } if(!this.preventMultipleRemoveEvents){ this.fireEvent.defer(250,this,['removeitem',this,item.value, this.findInStore(item.value)]); } }, destroy: function(){ this.collapse(); this.autoSize().manageClearBtn().validateValue(); }, scope: this } }); box.render(); if (! this.disabled) { box.hidden = this.el.insertSibling({ tag:'input', type:'hidden', value: itemVal, name: (this.hiddenName || this.name) },'before'); } else { box.hidden = this.el.insertSibling({ tag:'input', type:'hidden', value: itemVal, name: (this.hiddenName || this.name), disabled:'disabled' },'before'); }