We Keep Coding

FormBuilder.js: How to inherit from radio-group control?

I'm trying to create a new control for FormBuilder, it's basically a radio-group control (I mean it has the same config of a radio-group control) but I need to define a custom build() and onRender() method.
I read docs a lot of times but can't get it to work, here is a simple example of what I'm trying to do.
if (!window.fbControls) window.fbControls = new Array();
window.fbControls.push(function (controlClass) {
class controlMultipleObjects extends controlClass {
static get definition() {
return {
icon: '\uD83D\uDD89',
i18n: {
default: 'Control Multiple Items'
}
};
}
configure() {
// this.js = '//cdn.jsdelivr.net/npm/signature_pad#2.3.2/dist/signature_pad.min.js';
}
/**
* build a text DOM element, supporting other jquery text form-control's
* #return DOM Element to be injected into the form.
*/
build() {
this.dom = this.markup('div', null, {class:'multipleObjectsController', id: this.config.name});
return this.dom;
}
onRender() {
}
}
// register this control for the following types & text subtypes
controlClass.register('multipleObjects', controlMultipleObjects);
return controlMultipleObjects;
});
This basically works, the new control 'multipleObjects' is shown in form builder, but when opening the config for the control it only shows the 'Value' item. I need to show multiple values just like the radio-group, select or select-group controls.
Any ideas?
Thanks!

Take a look at https://formbuilder.online/docs/formBuilder/options/typeUserAttrs
you'll need to pass options in your formBuilder like that:
const options = {
typeUserAttrs: {
multipleObjects: {
options: {
label: 'Class',
multiple: true,
options: {
'red form-control': 'Red',
'green form-control': 'Green',
'blue form-control': 'Blue'
},
},
},
},
}
$("#fb-editor").formBuilder(options)

ExtJs form multiple button for different binding

Need to bind my form elements separately for different buttons. Using allowBlank in elements for sending binding conditions and formBind in buttons for binding the buttons. Need to do this like in this simplest way. (ExtJs 4.2.1 Classic)
Example
Ext.create('Ext.form.Panel', {
......
items: [
Ext.create('Ext.form.field.Date', {
.....,
allowBlank: false, //bind for both search & download button.
.....
}),
......, //// All rest elements bind for both search & download button.
Ext.create('Ext.form.ComboBox', {
......,
allowBlank: false, //bind for only download button.
......
})
],
buttons: [
{
text: 'Search',
formBind: true, /// Need to bind for specific field only.
},
{
text: 'Download',
formBind: true, /// Need to bind for all.
},
............
});
If any other data or details is necessary then please don't hesitate to ask.

I created a fiddle here that I think should accomplish what you're trying to do. The idea to use an event listener on the combobox, instead of the formBind config of the Download button:
https://fiddle.sencha.com/#view/editor&fiddle/289a
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
itemId: 'exampleForm',
items: [Ext.create('Ext.form.field.Date', {
allowBlank: false, //bind for both search & download button.
}),
Ext.create('Ext.form.ComboBox', {
allowBlank: false, //bind for only download button.
listeners: {
change: function (thisCombo, newValue, oldValue, eOpts) {
if (Ext.isEmpty(newValue)) {
thisCombo.up('#exampleForm').down('#btnDownload').setDisabled(true);
} else {
thisCombo.up('#exampleForm').down('#btnDownload').setDisabled(false);
}
}
},
store: ['item1', 'item2']
})
],
buttons: [{
text: 'Search',
formBind: true, /// Need to bind for specific field only.
}, {
itemId: 'btnDownload',
text: 'Download',
disabled: true
//formBind: true, /// Need to bind for all.
}]
});

There is no standard quick way to do this, you might want to write a plugin for this. I've put together one:
Ext.define('App.plugin.MultiDisableBind', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.multidisablebind',
/**
* #cfg
* Reference to the fields that this button depends on.
* Can contain either direct references, or a query selectors that will be
* executed with the button as the root
*/
depFields: null,
/**
* #property
* A map object with field ids as key, and field values as value
*/
valuesMap: null,
init: function (cmp) {
this.setCmp(cmp);
cmp.on('render', this.setup, this);
},
setup: function () {
var cmp = this.getCmp(),
depFields = this.depFields,
valuesMap = {};
if (!Ext.isArray(depFields)) {
depFields = [depFields];
}
Ext.Array.forEach(depFields, function (field) {
if (Ext.isString(field)) {
field = cmp.query(field)[0];
}
cmp.mon(
field,
'change',
Ext.Function.createThrottled(this.updateValuesMap, 300, this),
this
);
valuesMap[field.getId()] = field.getValue();
}, this);
this.valuesMap = valuesMap;
this.updateCmpDisabled();
},
updateValuesMap: function (depField, newValue) {
this.valuesMap[depField.getId()] = newValue;
this.updateCmpDisabled();
},
updateCmpDisabled: function () {
var cmp = this.getCmp(),
toDisable = true;
Ext.Object.each(this.valuesMap, function (fieldId, fieldValue) {
if (!Ext.isEmpty(fieldValue)) {
toDisable = false;
return false
}
});
cmp.setDisabled(toDisable);
}
});
You can use this plugin in your buttons like so:
xtype: 'button',
text: 'My button',
plugins: {
ptype: 'multidisablebind',
depFields: ['^form #fieldQuery', fieldVar]
}
In the depFields config you specify references to the fields that button's disabled state depends on, and the plugin will monitor these fields, so that on each field value change it will update the disabled state.
Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/28cm

I have created a fiddle for you. The code uses bind and formBind respectively for the two different buttons. May be you want something like this.

Tinymce listbox onsubmit giving [object object] rather than value

I am trying to develop a wordpress plugin and all other thing went good. but i am stuck here at the moment. i am trying to get selected value from the tinymce listbox but it returns something like [object Object] rather than value. can any one tell me why this happening and give me a solution. i am very thankful if anyone can give me a solution for this issue.
(function() {
tinymce.PluginManager.add('AP_tc_button', function( editor, url ) {
editor.addButton( 'AP_tc_button', {
text: 'My test button',
icon: 'wp_code',
onclick: function() {
editor.windowManager.open({
title: 'Select Your AD',
body: [
{
type: 'listbox',
name: 'level',
label: 'Header level',
values: [{text: 'x', value: 'x'}]
}],
onsubmit: function(v) {
alert(v);
//editor.insertContent(toString(e.value()));
}
});
}
});
});
})();

Well i found the solution i will add it here for your reference.
we have to get data from the object so i used object.data.listbox_name
onsubmit: function(v) {
alert(v.data.level)

Rally SDK 2 Grid with Timebox Filtering

Using the example from https://help.rallydev.com/apps/2.0rc2/doc/#!/guide/timebox_filtering for a timebox required app, how do I convert the cardBoard view into a grid?
This is the base code:
Ext.define('Rally.guide.ReleaseFilteredBoard', {
extend: 'Rally.app.TimeboxScopedApp',
scopeType: 'release',
onScopeChange: function(scope) {
if(!this.board) {
this.board = this.add({
xtype: 'rallycardboard',
storeConfig: {
filters: [scope.getQueryFilter()]
}
});
} else {
this.board.refresh({
storeConfig: {
filters: [scope.getQueryFilter()]
}
});
}
}
});
It seems that I can simply change the xtype to 'rallygrid' and based on docs it should work but it seems to need a model defined as well - how do I get the model details out of the timebox scope to feed into the grid?

You may wish to check out the example code for Rally.ui.grid.Grid.
Here's a quick sample of how one might apply the Timebox filter to a grid:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
grid: null,
launch: function() {
var filters = [];
var timeboxScope = this.getContext().getTimeboxScope();
if(timeboxScope) {
filters.push(timeboxScope.getQueryFilter());
}
this.getFilteredStoryModel(filters);
},
onTimeboxScopeChange: function(newTimeboxScope) {
var newFilters = [];
var updatedTimeboxScope = this.getContext().getTimeboxScope();
if (this.grid) {
this.grid.destroy();
}
if (updatedTimeboxScope) {
newFilters.push(newTimeboxScope.getQueryFilter());
}
this.getFilteredStoryModel(newFilters);
},
getFilteredStoryModel: function(queryFilters) {
Rally.data.ModelFactory.getModel({
type: 'UserStory',
success: function(model) {
this.grid = this.add({
xtype: 'rallygrid',
model: model,
columnCfgs: [
'FormattedID',
'Name',
'Owner',
'Iteration'
],
storeConfig: {
filters: queryFilters
}
});
},
scope: this
});
}
});
To show the timebox filter, choose the type of filter you desire when first setting up your Custom Page in Rally. The "onTimeboxScopeChange" callback responds to events triggered by the timebox selector setup and configured on the Custom Page container itself. No code is needed to setup the timebox selector, rather you do it via the Rally UI when creating a new Custom Page:
Select the type of filter (Release or Iteration):
(1) Note that the filter shows on the "My New Custom Page" Container. (2) Any app that you add to "My New Custom Page" will then have the timebox filter available/applied:
Add Custom HTML App:
Paste in Code and Save:
Iteration-filtered Grid:
Alternatively, if you don't want a timebox filter that applies to an entire Custom Page container, you can elect to use Rally.ui.combobox.ReleaseComboBox or Rally.ui.combobox.IterationComboBox
In your App code itself, and manage the filtering via callbacks from either of these components. This filtering would be totally "within-app" and wouldn't rely on the Custom Page-wide timebox component.

Change default editor for node in AlloYUI Diagram Builder

I have to make a diagram editor, so I'm using AlloYUI, I've added a custom node following the answer for this question.
I've successfully set new nodes and retreive it's values via diagramBuilder.toJSON()
What I'm trying to do is change the default editor widget for the custom attribute of my custom node, I'd like to change the textbox for date picker widget, but my goal is being able to use any other form elements, like a select, or a set of radio buttons.
Toying around with the javascript debugger included in WebStorm, I've found that the default fields have an 'editor' attribute where is defined a "textAreaCellEditor".
But my custom property doesn't have this attribute, So I'm trying to attach an editor, but I cannot get it to work, I've tried with this:
Y.DiagramNodeCustom = Y.Component.create({
NAME: 'diagram-node',
ATTRS: {
type: {
value: 'custom'
},
custom_attr: {
value: 'customAttr'
}
},
EXTENDS: Y.DiagramNodeTask,
prototype: {
getPropertyModel: function () {
var instance = this;
var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(
instance, arguments);
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute',
editor: Y.Component.create({
NAME: "DateField",
EXTENDS: Y.DateCellEditor
})
});
return model;
},
SERIALIZABLE_ATTRS: ['description', 'name', 'required', 'type',
'width', 'height', 'zIndex', 'xy', 'customAttr']
}
});
Y.DiagramBuilder.types['custom'] = Y.DiagramNodeCustom;
I've also tried to change the "model.push" section to:
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute',
editor: {name: "textCellEditor"}
});
and to:
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute',
editor: Y.DateCellEditor({
name: 'DateCellEditor'
})
});
But nothing works. Do you have any idea how can I change the default editor?

Thanks to Robert Frampton, who anwered my question in google groups, the way to do it is:
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute',
editor: new Y.DateCellEditor()
});
You have to create a new instance of the Y.DateCellEditor object with adding 'new' before the constructor.