We Keep Coding

How to add custom attributes to AlloyUI form builder?

I want to do something like this jsfiddle example, I need to put some custom attributes on left panel properties. Below I tried to make similarly but I can't drag the field
YUI().use('aui-form-builder',function (Y) {
Y.MyFormCustom = Y.Component.create({
NAME: 'form-node',
ATTRS: {
type: {
value: 'custom'
},
customAttr: {
validator: Y.Lang.isString,
value: 'A Custom default'
}
},
EXTENDS: Y.FormBuilderFieldBase,
prototype: {
getPropertyModel: function () {
var instance = this;
var model = Y.FormBuilderFieldBase.superclass.getPropertyModel.apply(instance, arguments);
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute'
});
return model;
}
}
});
Y.FormBuilder.types['custom'] = Y.MyFormCustom;
var availableFields = [
{
iconClass: 'form-builder-field-icon-button',
label: 'Button',
type: 'custom'
}
];
myform= new Y.FormBuilder({
availableFields: availableFields,
boundingBox: '#myHolder'
}).render();
I don't know why the form is not appearing. Any help will be appreciated.

Your example has been very helpful to me because I also needed to extend the Form Builder fields.
The fix to the above is simple.
Replace the line:
Y.FormBuilder.types['custom'] = Y.MyFormCustom;
by
Y.FormBuilderField.types['custom'] = Y.MyFormCustom;
This solution is inspired from the source code found in the Alloy UI API.
See link:
AlloyUI Form Builder
Cheers

Is there a possibility to add a HTML element dynamically inside a dialog of a plugin in CK-EDITOR?

I am creating a widget in ck-editor where when user clicks a toolbar button,a dialog is opened.In a dialog there is text field and one search button,rest area in a dialog is for search results to be shown.
Is it possible that user enters some text in a text field , hit search button and by using some API I display some 50 search results(scrollable) in a dialog of a plugin below the text field and search button?
Right now I am using this code (just a dummy to check if I can add elements dynamically)-
CKEDITOR.dialog.add('simplebox', function(editor){
return {
title: 'Reference',
minWidth: 600,
minHeight: 400,
onShow: function() {
alert(CKEDITOR.dialog.getCurrent().definition.getContents("new_reference").elements);
},
contents: [
{
id: 'new_reference',
label:'New Reference',
elements: [
{
id: 'type',
type: 'select',
label: 'Type',
items: [
[ editor.lang.common.notSet, '' ],
[ 'Book' ],
[ 'Journal' ],
[ 'URL' ],
[ 'PHD Thesis']
]
},
{
type: 'text',
id: 'reference',
label: 'Reference',
validate: CKEDITOR.dialog.validate.notEmpty( "Search field cannot be empty." )
},
{
type: 'button',
align:'horizontal',
id: 'referencebutton',
label:'Search',
title: 'My title',
onClick: function() {
var linkContent = { type : 'html', id : 'test', html : '<div>just a test</div>' };
// this = CKEDITOR.ui.dialog.button
var dialog = CKEDITOR.dialog.getCurrent();
//alert(dialog.getContentElement('new_reference','reference').getValue());
var definition = dialog.definition;
//alert(definition.title);
definition.getContents("new_reference").add(linkContent);
// CKEDITOR.dialog.addUIElement('list',function(){
// definition.getContents("new_reference").add(linkContent);
// });
alert(CKEDITOR.dialog.getCurrent().definition.getContents("new_reference").elements);
}
}
]
},
{
id: 'old_reference',
label:'Old Reference',
elements: [
{
id:'author',
type:'text',
label:'Author'
}
]
}
]
};
});
Inside onShow method I am printing the no. of UI elements inside a content of a dialog.It shows 3 objects. After click of a button,it shows 4 objects since one has been added via code but it does show in the UI?
Any clues on this?
Thanks

Your approach is OK but by calling
definition.getContents("new_reference").add(linkContent);
you're modifying CKEDITOR.dialog.definition, which is used only the first time the dialog is opened – to build it. Then, once built, if you close the dialog and open it again, the editor uses the same DOM to display it. What I mean is that CKEDITOR.dialog.definition is a blueprint, which is used once and has no further impact on the dialog.
To interact with live dialog, use the following
CKEDITOR.ui.dialog.uiElement-method-getDialog,
CKEDITOR.dialog-method-getContentElement (returns CKEDITOR.ui.dialog.uiElement),
CKEDITOR.dialog-method-getValueOf,
CKEDITOR.dialog-method-setValueOf
like
onClick: function() {
var dialog = this.getDialog();
// get the element
console.log( dialog.getContentElement( 'tabName', 'fieldId' ) );
// get the value
dialog.getValueOf( 'tabName', 'fieldId' ) );
// set the value
dialog.setValueOf( 'tabName', 'fieldId', 'value' ) );
}

One way to get around this problem is to use the onShow function and insert an html object in the dialog tab.
onShow : function() {
var element = document.createElement("div");
element.setAttribute('id', "someId");
document.getElementsByName("new_reference")[0].appendChild(element);
}
Then in the onClick function, just access the element and set the content you want, like this:
onClick : function() {
document.getElementById("someId").innerHTML='<div id="example-'+count+'">Hello World</div>';
}
By doing this, you should be able to get data to show in your dialog. Hope it helps.

tinyMCE plugin accessing element

I'm trying to write a tinymce plugin, so I checked out the tutorial "Creating a plugin" on http://www.tinymce.com/. Inserting and Replacing Content is no problem, everything works fine.
Now i want to change the value of the textbox automatically after changing the value of the listbox. As an example, after changing the listbox element, the value of the active element should be written to the textbox above. How can I access this element?
tinymce.PluginManager.add('myexample', function(editor, url) {
// Add a button that opens a window
editor.addButton('myexample',
{
text: 'Example',
onclick: function()
{
// Open window
editor.windowManager.open({
title: 'Example Plugin',
body: [
// Text
{type: 'textbox', name: 'title', label: 'Text', value: 'temp'},
// Listbox
{type: 'listbox', name: 'test', label: 'Ziel',
'values':
[
{text: 'Eins', value: '1'},
{text: 'Zwei', value: '2'}
],
onselect: function(v)
{
console.log(this.value());
// CHANGE THE VALUE OF THE TEXTBOX ...
// ????
}
}
],
onsubmit: function(e)
{
console.log(e.data.title, e.data.test);
}
});
}
});
});

I know this is an old question, but I was facing the same issue and I found this answer in another forum that saved my day.
The standard tinymce way to do this is to save the popup window in a variable:
var win = editor.windowManager.open({ //etc
And then for accessing the element:
win.find('#text'); // where text is the name specified
I hope this can help someone else in the future.

Now I found a solution. The best method is not to use the internal form-designer. You can use an IFrame with an external html-page, then you can work with document.getElementById(...)
Here you can find an example

Dynamically loading a non-class in ExtJS 4

I have two classes in ExtJS 4 (a grid and a form) with correlated properties (column and field definitions).
I want to create a common definition file for them and dynamically load it:
# app/common/Columns.js
Ext.ns('myapp.common');
myapp.common.Columns =
[
{
text: 'Name',
dataIndex: 'name',
},
{
text: 'Email',
dataIndex: 'email',
}
];
# app/view/Grid.js
Ext.define
(
'myapp.view.Grid',
{
extend: 'Ext.grid.Panel',
columns: myapp.common.Columns
}
);
# app/view/Form.js
Ext.define
(
'myapp.view.Form',
{
extend: 'Ext.form.Panel',
items: myapp.common.Columns.map
(
function(v)
{
return {
name: v.dataIndex,
fieldLabel: v.text,
};
}
);
}
);
As you can see, app.common.Columns is not a class.
I know I can convert it into a class and override the form's and the grid's constructors to use it, but I'd like to keep it simple.
Do I need to add a <script> tag for app/common/Columns.js manually or there is a way to load it dynamically?

I don't think you can load file dynamically using ExtJs loader without having a class defined there. Their loader is very picky about exactly matching class name to file name. I just tried your sample - it doesn't seems to be working.

Populating combo from XmlStore with Ext js designer

I am trying to get working a simple (noob) examle of Combo loaded with data from Xml file.
Here is my xml:
<?xml version="1.0" encoding="UTF-8"?>
<accounts>
<account>
<name>Savings Account</name>
<id>1</id>
</account>
<account>
<name>Current Account</name>
<id>2</id>
</account>
</accounts>
When I configure and add XmlStore, it reports 2 records found.
Here is the code for the XmlStore:
cteo = Ext.extend(Ext.data.XmlStore, {
constructor: function(cfg) {
cfg = cfg || {};
cteo.superclass.constructor.call(this, Ext.apply({
storeId: 'cteo',
url: 'cteo.xml',
record: 'account',
data: '',
fields: [
{
name: 'name',
mapping: 'name'
},
{
name: 'id',
mapping: 'name'
}
]
}, cfg));
}
});
new cteo();
finally, this is the code for the combo:
MyPanelUi = Ext.extend(Ext.Panel, {
title: 'My Panel',
width: 400,
height: 250,
initComponent: function() {
this.items = [
{
xtype: 'label',
text: 'Cuenta Origen'
},
{
xtype: 'combo',
store: 'cteo',
displayField: 'name',
valueField: 'id'
}
];
MyPanelUi.superclass.initComponent.call(this);
}
});
It must be something simple, but I am stuck...

This will not do anything:
store: 'cteo',
You need to pass in the object reference that you assigned earlier, not a string:
store: cteo,
Alternately, you could call Ext.StoreMgr.lookup('cteo'), but judging by your code I assume that the variable reference was your intention.
One comment on your code. Doing this:
cteo = Ext.extend(Ext.data.XmlStore, {
...
cteo();
...is a bit strange, and is most likely creating a global variable in the window scope (assuming that cteo is not defined as a var somewhere earlier). Think of it as defining a custom class, then creating a new instance of the class you defined. Also, think about your naming -- a store subclass should be a specific type of store, which should be evident in the name. Typically, your code should look more like this:
Ext.ns('MyNamespace');
MyNamespace.CteoStore = Ext.extend(Ext.data.XmlStore, {
...
});
var cteoStore = new CteoStore();
Oh yeah, one other thing. You do not need to override the constructor for the sole purpose of providing default configs. Just do this:
MyNamespace.CteoStore = Ext.extend(Ext.data.XmlStore, {
storeId: 'cteo',
url: 'cteo.xml',
record: 'account',
data: '',
fields: [
{
name: 'name',
mapping: 'name'
},
{
name: 'id',
mapping: 'name'
}
]
});
This is also more useful since these configs are overrideable, unlike in your example. This makes it more reusable (like if you ever wanted to assign a different id to another instance).

Check out this thread at sencha site:
http://www.sencha.com/forum/showthread.php?105818-(noob)-Populating-combo-from-XmlStore-with-Ext-js-designer