Is AlloyUI Form Builder works for liferay 6.0.5. Because our site works on Liferay 6.0.5 and we can't update it with the latest version. I have placed the code mentioned in alloyui.com. I can drag and drop the fields but I can't submit the form. There is a script error in firebug M.loaded[n], I didn't understand what to do.
Suggest something on this.
I am using the below code in liferay 6.0.5 jsp pages
<script src="http://cdn.alloyui.com/3.0.0/aui/aui-min.js">
<link href="http://cdn.alloyui.com/3.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<div id="myFormBuilder"></div>
<script>
YUI().use(
'aui-form-builder',
function(Y) {
new Y.FormBuilder(
{
availableFields: [
{
iconClass: 'form-builder-field-icon-text',
id: 'firstName1',
label: 'First Name',
readOnlyAttributes: ['name'],
type: 'text',
//unique: true,
width: 75
},
{
iconClass: 'form-builder-field-icon-text',
id: 'lastName',
label: 'Last Name',
readOnlyAttributes: ['name'],
type: 'text',
//unique: true,
width: 75
},
{
iconClass: 'form-builder-field-icon-text',
id: 'preferredName',
label: 'Preferred Name',
readOnlyAttributes: ['name'],
type: 'text',
//unique: true,
width: 75
},
{
iconClass: 'form-builder-field-icon-text',
id: 'emailAddress',
label: 'Email Address',
readOnlyAttributes: ['name'],
type: 'text',
//unique: true,
width: 75
},
{
iconClass: 'form-builder-field-icon-radio',
label: 'Gender',
options: [
{
label: 'Male',
value: 'male'
},
{
label: 'Female',
value: 'female'
}
],
type: 'radio'
},
{
iconClass: 'form-builder-field-icon-button',
label: 'Button',
type: 'button'
},
],
boundingBox: '#myFormBuilder',
fields: [
{
label: 'City',
options: [
{
label: 'Ney York',
value: 'new york'
},
{
label: 'Chicago',
value: 'chicago'
}
],
predefinedValue: 'chicago',
type: 'select'
},
{
label: 'Colors',
options: [
{
label: 'Red',
value: 'red'
},
{
label: 'Green',
value: 'green'
},
{
label: 'Blue',
value: 'blue'
}
],
type: 'radio'
}
]
}
).render();
}
);
</script>
It is NOT possible to use the aui-form-builder in Liferay 6.0.
According to the Liferay Integration wiki article, Liferay 6.0 uses AlloyUI 1.0.3. After searching the source in the AlloyUI 1.0.3 tag, it seems like the aui-form-builder did not exist in that version. As far as I can tell from the API docs, aui-form-builder was added in the 2.0.x version.
Note: it is not possible to upgrade to a new major version of AlloyUI in Liferay either.
Related
The ComboBox component shows a dropdown icon for the trigger. How can I show a search icon instead? I am using ExtJS 3.X.
You can use the triggerClass config. I found a class x-form-search-trigger that seems to work. Here is a simple example:
new Ext.form.FormPanel({
items: [{
xtype: 'combo',
fieldLabel: 'Color',
mode: 'local',
triggerAction: 'all',
displayField: 'text',
valueField: 'value',
triggerClass: 'x-form-search-trigger',
store: new Ext.data.JsonStore({
data: [
{ text: 'Green', value: '1' },
{ text: 'Blue', value: '2' },
{ text: 'Red', value: '3' },
],
fields: [ 'text', 'value' ]
})
}],
renderTo: Ext.getBody()
});
Created a form in extjs-6 - modern for file upload.
After new update on chrome browser i am getting following error "Form submission canceled because the form is not connected"
I tried with rendering the form on body also, still getting the same error.
Please suggest anything i am missing.Thanks in advance.
Ext.define('LayersSurvey.view.Attachments',
{
extend: 'Ext.form.Panel',
alias: 'widget.attachments',
controller: 'Basecontrol',
closeAction: 'hide',
closable: false,
colapsible: true,
//zIndex: 9999,
scrollable: true,
renderTo: Ext.getBody(),
multipartDetection:true,
items:
[{
xtype: 'selectfield',
label: 'Floor',
labelAlign: 'left',
//labelWidth :'30%',
name: 'attachmentType',
required: true,
options:
[{
text: 'G-2',
value: '-2'
}, {
text: 'G-1',
value: '-1'
},{
text: 'G',
value: '0'
}, {
text: 'M',
value: '0.5'
},{
text: 'G+1',
value: '1'
}, {
text: 'G+2',
value: '2'
},{
text: 'G+3',
value: '3'
}, {
text: 'G+4',
value: '4'
},{
text: 'G+5',
value: '5'
}, {
text: 'G+6',
value: '6'
},{
text: 'G+7',
value: '7'
},{
text: 'G+8',
value: '8'
},{
text: 'G+9',
value: '9'
},{
text: 'G+10',
value: '10'
}],
listeners:
{
}
},{
xtype: 'filefield',
//label: "Attachment:",
name: 'photo',
//bodyAlign:'center',
accept: 'image',
listeners:
{
tap:'onMediaChange'
}
},
{
xtype:'button',
text: 'Upload',
ui: 'action',
action:'',
listeners: {tap:'onMediaUpload'}
}]
});
In the config for your form, make sure enableSubmissionForm is set to false.
In the case where I had this issue, I was using Architect to create the web app version of my app, and in Chrome I was getting the same error. By default, enableSubmissionForm seems to be true in extjs 6.x modern.
I'm trying to add a combobox to a floating (popup) form panel in ExtJS. But I'm getting a "Cannot set property 'component' of null" error and the window will not load.
I use the following code in a controller to create the window:
onTreeAddDocClick: function () {
var f = new Ext.form.Panel({
frame: false,
header: false,
floating: true,
closable: true,
items: [{
xtype: 'addDoc'
}]
});
f.show();
}
The code for the window itself is as follows:
Ext.define('OPENhrm.view.dossier.widget.popup.AddDoc', {
extend: 'Ext.form.Panel',
xtype: 'addDoc',
requires: [
'Ext.layout.container.VBox'
],
controller: "dossier-addDoc",
viewModel: {
type: "dossier-addDoc"
},
id: 'addDocForm',
frame: true,
title: 'Add document',
width: 400,
bodyPadding: '10 10 0',
layout: 'form',
closable: true,
defaults: {
anchor: '100%',
allowBlank: false,
msgTarget: 'side',
labelWidth: 50
},
items: [{
// item selector
xtype: 'filefield',
emptyText: 'Select Document',
fieldLabel: 'Document',
name: 'filePath',
id: 'filePath',
buttonText: 'upload document',
buttonConfig: {
icon : '/resources/images/icons/add.jpg'
}
}, {
xtype: 'combo',
fieldLabel: 'Test',
hiddenName: 'test',
store: new Ext.data.SimpleStore({
data: [
['Test1'],
['Test2']
],
id: 0,
fields: ['text']
}),
valueField: 'text',
displayField: 'text',
triggerAction: 'all',
editable: false
}],
// buttons
buttons: [{
text: 'Add',
handler: 'onAddDockClick'
}, {
text: 'Reset',
handler: function () {
this.up('form').getForm().reset();
}
}]
});
If I remove the combobox, the window works just fine. If I place the combobox in a form somewhere else in my application (e.g. on a page with 2 panels; a searchfilter/form and a grid with search results), it works just fine. That other page however, is not a floating/popup window.
I got it to work by defining the whole page in the controller, but as I'm using a MVC structure, that doesn't seem like the way to go. Does anyone know how to get the combobox to work in a floating window, without putting the whole code for that window in the controller?
the store works fine for the rest of the app but im not able to use that data and plot that data in the graph.
i have done some basic work with the little knowledge i have with charts.
i tried out with other examples which work but im not able to figure out the problem with this.
the console says:Uncaught TypeError: Cannot read property '1' of undefined
i have installed ruby,compass and sass
view:
Ext.define('CSBApp.view.graph', {
extend: 'Ext.chart.CartesianChart',
requires: [
'Ext.TitleBar',
'Ext.chart.CartesianChart',
'Ext.chart.series.Line',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.draw.sprite.Circle',
],
xtype: 'graph',
config: {
flex: 1,
xtype: 'chart',
store: 'mystore',
cls: 'chart',
innerPadding: 10,
animate: true,
series: [
{
type: 'line',
xField: 'date',
yField: 'amount',
title: 'Expenses',
style: {
stroke: '#003366',
lineWidth: 3
},
marker: {
type: 'circle',
stroke: '#003366',
radius: 5,
lineWidth: 3
}
}
],
axes: [
{
type: 'numeric',
position: 'left',
title: {
fontSize: 15,
text: 'Amount'
},
grid: {
even: {
fill: '#f9f9f9'
}
}
},
{
type: 'numeric',
position: 'bottom',
title: {
fontSize: 15,
text: 'date'
},
grid: {
even: {
fill: '#f9f9f9'
}
}
}
]
}
});
modal:
Ext.define('CSBApp.model.expensemodel',{
extend: 'Ext.data.Model',
config: {
identifier:{
type:'uuid'
},
fields: [
{
name:'desc',
type:'string'
},
{
name: 'amount',
type:'number'
},
{
name: 'date',
type:'date',
defaultformat: 'Y-m-d'
},
],
// autoLoad : true
}
});
store:
Ext.define('CSBApp.store.mystore',{
extend : 'Ext.data.Store',
config : {
model : 'CSBApp.model.expensemodel',
storeId : 'mysqlstore',
proxy : {
type : 'sql',
id : 'mystore',
reader: {
type: "sql"
}
},
autoLoad : true
}
});
i have kind of figured it out.
the basic problem resides in the view and how it calls the store.
so the app seems to work fine with the sql store.
the main factor is that the 'requires' files have to be correct.
here is the view:
Ext.define('CSBApp.view.graph', {
extend: 'Ext.chart.CartesianChart',
xtype: 'graph',
requires: [
'Ext.chart.series.Line',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.chart.CartesianChart',
'Ext.chart.axis.layout.CombineDuplicate',
'Ext.chart.axis.segmenter.Names'
],
config: {
store:'mysqlstore' ,
width : '100%',
layout:'fit',
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
minimum:0,
fields: 'amount'
},
{
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'date',
minimum:0,
}],
series: [{
type: 'line',
xField: 'date',
yField: 'amount',
minimum:0,
style: {
stroke: '#003366',
lineWidth: 3
},
marker: {
type: 'circle',
stroke: '#003366',
radius: 5,
lineWidth: 3,
}
}
}]
}
});
this is pretty correct if you get the store rite.
I have a form with search (filtering) fields like this:
xtype: 'form',
id: 'searchPanel',
title: 'Search',
collapsible: true,
bodyPadding: 10,
height: 210,
buttonAlign: 'left',
defaults: {
width: 400,
labelWidth: 120,
allowBlank: true,
enableKeyEvents: true
},
layout: {
type: 'table',
columns: 2
},
items: [
{
xtype: 'textfield',
name: 'txtFltrSiteName',
fieldLabel: 'Site name or alias',
id: 'txtFltrSiteName'
},
{
xtype: 'textfield',
name: 'txtMonthTraffic',
fieldLabel: 'Month traffic',
id: 'txtMonthTraffic',
style: 'margin-left: 100px;'
},
{
xtype: 'combo',
id: 'ddlFltrPM',
name: 'ddlFltrPM',
fieldLabel: 'Project manager',
displayField: 'display_name',
valueField: 'user_id',
editable: false,
store: new storeOfUsers({ filters: [{ property: 'user_group_code', value: 'projectmanager', exactMatch: true }] })
},
// and many other fields below
But when i click on search button, i have two post request. One - with filter in it, second is without.
My code for send button action:
xtype: 'button',
id: 'btn_srch_set',
text: 'Searh',
margin: '10 7 0 0',
width: '',
handler: function() {
var filters = new Array();
var site_name = Ext.getCmp('txtFltrSiteName').getValue();
if(site_name.length > 0)
filters.push({dataIndex: 'site_name', type: 'string', value: site_name});
var project_name = Ext.getCmp('txtFltrProjectName').getValue();
if(project_name.length > 0)
filters.push({dataIndex: 'project_name', type: 'string', value: project_name});
var pm = Ext.getCmp('ddlFltrPM').getValue();
if(pm && pm > 0)
filters.push({dataIndex: 'project_manager_id', type: 'int', value: {'eq':pm}});
// many other fields
listOfSites.filters.removeAll();
if(filters.length > 0)
listOfSites.filters.addFilters(filters);
listOfSites.store.load();
}
P.S.
When I overwrite in search button handler function this line:
filters.push({dataIndex: 'project_manager_id', type: 'string', value: pm});
Evrything is ok and there is only one request, so problem might be here. But i'm stuck and have no idea why it works such way.
Thanks for any help,
Stanislav.
UPD*
var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier reuse
encode: true, // json encode the filter query
local: false,
filters: [{
type: 'string',
dataIndex: 'site_name'
}, {
type: 'date',
dataIndex: 'startdate'
}, {
type: 'string',
dataIndex: 'project_name'
// more fields below
Try following
if(filters.length > 0)
listOfSites.filters.addFilters(filters);
else
listOfSites.store.load();
addFilters() may already call sync()