I am using ExtJs 3.4
I am having a big problem with button 'Finish workflow' - I would like to right align that button. Everything that I've tried so far didn't work. Is there any way to do this?
var wndFinishWorkflow = new Ext.Window({
width: 500,
height: 300,
border: false,
padding: '20px',
closeAction: 'hide',
modal: true,
title: 'Finish workflow',
items: [
{
xtype: 'form',
border: false,
items: [
{
xtype: 'displayfield',
disabled: true,
fieldLabel: 'Workflow ID',
value: '49949494'
}]
},
{
xtype: 'form',
border: false,
items: [
{
xtype: 'displayfield',
disabled: true,
fieldLabel: 'WF status',
value: 'Finished'
}]
},
{
xtype: 'form',
border: false,
items: [
{
fieldLabel: 'Razlog',
xtype: 'appcombo',
width: 300,
store: new Ext.data.JsonStore({
idProperty: 'Id',
fields: ['Id', 'Name']
}),
displayField: 'Name',
valueField: 'Id',
editable: false,
allowBlank: false
}]
},
{
xtype: 'form',
border: false,
items: [
{
xtype: 'textarea',
width: 300,
fieldLabel: 'Komentar'
}]
},
{
xtype: 'form',
border: false,
items: [
{
xtype: 'button',
text: 'Finish workflow',
cls: 'x-btn-important',
handler: function () {
},
}]
}
]
});
You can use toolbar with '->' to move the items to right:
var wndFinishWorkflow = new Ext.Window({
width: 500,
height: 300,
border: false,
padding: '20px',
closeAction: 'hide',
modal: true,
title: 'Finish workflow',
layout: 'form',
items: [{
xtype: 'displayfield',
disabled: true,
fieldLabel: 'Workflow ID',
value: '49949494'
}, {
xtype: 'displayfield',
disabled: true,
fieldLabel: 'WF status',
value: 'Finished'
}, {
fieldLabel: 'Razlog',
//xtype: 'appcombo',
xtype: 'combo',
width: 300,
store: new Ext.data.JsonStore({
idProperty: 'Id',
fields: ['Id', 'Name']
}),
displayField: 'Name',
valueField: 'Id',
editable: false,
allowBlank: false
}, {
xtype: 'textarea',
width: 300,
fieldLabel: 'Komentar'
}],
bbar: {
xtype: 'toolbar',
items: ['->', {
xtype: 'button',
text: 'Finish workflow',
cls: 'x-btn-important',
handler: function () {
console.log('Button Click');
}
}]
}
}).show();
Related
I have two js files, the maincomp and the nestedcomp. nestedcomp would be used as a reusable component and that is why I need to send parameters to it. This maincomp file:
Ext.define('mycomponents.maincomp', {
extend: 'Ext.window.Window',
itemId: 'maincomp',
xtype: 'maincomp',
modal: true,
bodyPadding: 10,
height: 350,
width: 270,
closeAction: 'destroy',
resizable: false,
renderTo: Ext.getBody(),
requires: [
'mycomponents.nestedcomponent'
],
layout: {
type: 'table',
columns: 1
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
labelAlign : 'right',
width: 265,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Age',
name: 'age',
labelAlign : 'right',
width: 265,
allowBlank: false
}
{
xtype: 'nestedcomp'
}
]
});
and this is my nestedcomp file:
Ext.define('mycomponents.nestedcomponent', {
extend: 'Ext.container.Container',
id: 'nestedcomp',
xtype: 'nestedcomp',
items: [
{
xtype: 'textfield',
fieldLabel: 'Address',
name: 'address',
id: 'address',
labelAlign : 'right',
width: 265,
allowBlank: false
}
],
constructor: function (config) {
this.callParent(arguments);
this.initConfig(config);
return this;
},
initComponent: function () {
}
});
Maybe this is very naive question but the thing is I have no idea on how to pass parameters from maincomp to nestedcomp. I went into the official documentation, and google for an answer, but I was unable to find a solution in order to achieve this, so my question is how to pass parameters from one component into its nested components?
I mostly pass extra parameters to nested component in initComponent:
Ext.define('mycomponents.maincomp', {
extend: 'Ext.window.Window',
itemId: 'maincomp',
xtype: 'maincomp',
modal: true,
bodyPadding: 10,
height: 350,
width: 270,
closeAction: 'destroy',
resizable: false,
renderTo: Ext.getBody(),
requires: [
'mycomponents.nestedcomponent'
],
layout: {
type: 'table',
columns: 1
},
initComponent: function () {
this.items = [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
labelAlign : 'right',
width: 265,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Age',
name: 'age',
labelAlign : 'right',
width: 265,
allowBlank: false
},
{
xtype: 'nestedcomp',
abc: this.xyz
}
];
this.callParent(arguments);
}
});
Or i just do something method on this view in ViewController like form.loadRecord(r), form.setValues(v) where form is the Ext.form.Panel after view is rendered.
I'm using Extjs for testing purposes and I'm stucked trying to use a component within another. Here is what I have:
This is the main component:
var component = Ext.create('mypackages.mycomponent');
Ext.define('mypackages.maincomp', {
extend: 'Ext.window.Window',
itemId: 'maincomp',
xtype: 'maincomp',
modal: true,
bodyPadding: 10,
height: 350,
width: 270,
closeAction: 'destroy',
resizable: false,
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 1
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Age',
name: 'age',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Phone',
name: 'phone',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
item: component
}
]
});
and this is the component I would like to render:
Ext.define('mypackages.component', {
extend: 'Ext.Component',
id: 'component',
alias: 'component',
items: [
{
xtype: 'textfield',
fieldLabel: 'Address',
name: 'address',
id: 'address',
labelAlign : 'right',
width: 265,
allowBlank: false
}
],
constructor: function () {
this.callParent();
console.log('I am entering here!!!');
}
});
As you can see I'm tring to load the component like this item: component and it is actually calling the component due to the browser's console shows me the I am entering here!!! message. The problem is the component is not displayed after Phone textfield. What am I missing here? Is it necessary to force the component to be shown? If so, how can I achieve this?
You want to declare your own field type:
Ext.define('mypackages.component', {
extend: 'Ext.container.Container',
xtype: 'myaddressfield',
items: [
{
xtype: 'textfield',
fieldLabel: 'Address',
name: 'address',
id: 'address',
labelAlign : 'right',
width: 265,
allowBlank: false
}
],
constructor: function () {
this.callParent();
console.log('I am entering here!!!');
}
});
Ext.define('mypackages.maincomp', {
extend: 'Ext.window.Window',
itemId: 'maincomp',
xtype: 'maincomp',
modal: true,
bodyPadding: 10,
height: 350,
width: 270,
closeAction: 'destroy',
resizable: false,
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 1
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Age',
name: 'age',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Phone',
name: 'phone',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
xtype: 'myaddressfield'
}
]
});
In main component :
First: remove the first line. You dont need to create new instance here.
var component = Ext.create('mypackages.mycomponent');
Next change invalid line:
{
item: component
}
To:
{
xtype: 'newComponent'
}
And finally set the alias in second component:
alias: 'widget.newComponent',
I am trying to align a textfield to the right
From : _____________ To:____________
**Textbox here** **Textbox here**
I use column layout for from and to inputs, but I cannot get the textbox align to the right in each column.
Ext.define('AY.view.Temperature', {
requires: "Ext.form.field.ComboBox",
extend: 'Ext.form.Panel',
alias: 'widget.tempForm',
title: 'Temperature Convertor',
layout: 'column',
autoShow: true,
initComponent: function() {
this.items = [
{
xtype: 'form',
bodyStyle : Ext.isIE
? 'padding:5px 5px 5px 5px;'
: 'padding:5px 5px 5px;',
// border: 'true',
items: [
{
xtype:'combo',
fieldLabel: 'From',
store: tempTypes,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
},
{
xtype: 'tbspacer',
height: 10
},
{
xtype: 'panel',
layout: {
type:'hbox',
align: 'middle'
},
items:[
{
xtype: 'tbfill',
flex: 1
},
{
xtype: 'textfield',
hideLabel: true,
ctCls : 'spaces',
name: 'from',
flex: 2,
allowBlank: 'false'
}
]
}
]
},
{
xtype :'form',
items: [
{
xtype: 'combo',
fieldLabel: 'To',
store: tempTypes,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
},
{
xtype: 'textfield',
name: 'to',
hideLable: true,
readOnly: 'true'
}
]
}]
/*buttons:[{
text: 'convert',
handler: function(){
// convertTemp()
}
}]*/
//console.log("Here it is "+tempTypes);
this.callParent(arguments);
}
How do I introduce empty space before the textfield?
Like so (see the fiddle):
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
layout: 'anchor',
defaults: {
anchor: '100%'
},
title: 'Temperature Convertor',
autoShow: true,
items: [
{
xtype: 'combo',
fieldLabel: 'From',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr'
}, {
xtype: 'tbspacer',
height: 10
}, {
xtype: 'fieldcontainer',
anchor: '100%',
layout: {
type: 'hbox'
},
items: [{
xtype: 'container',
width: 105, // need to match the fieldLabel width
height: 10
}, {
xtype: 'textfield',
flex: 1,
ctCls: 'spaces',
name: 'from',
allowBlank: 'false'
}]
} // rest of the form...
],
renderTo: Ext.getBody()
});
Note: You must not nest forms in other forms! And renderTo: Ext.getBody() must not be used for nested items!
I need to create several views, with the same content, having only a grid that will be a little different from each others.
My idea is to create a base view, but I don´t know how change this grid in the inherited classes.
Base:
Ext.define('App.view.cadastro.FiltroBase',{
extend: 'App.controls.CoWindow',
alias: 'widget.filtrobase',
modal: false,
width: 800,
height: 400,
layout: 'vbox',
items: [
{
xtype: 'container',
layout: {
type: 'hbox',
align: 'middle'
},
width: '100%',
defaults: {
padding: 4
},
items: [
{
xtype: 'label',
text: i18n.procurarPor
},
{
xtype: 'combobox',
itemId: 'comboBox',
queryMode: 'local',
forceSelection: true,
width: 150
},{
xtype: 'label',
text: 'Filtro:'
},
{
xtype: 'textfield',
itemId: 'filtro',
enableKeyEvents: true,
flex: 1
},
{
xtype: 'container',
width: 100,
layout: 'fit',
items: [
{
xtype: 'button',
text: i18n.pesquisar,
action: 'pesquisar',
itemId: 'botaoPesquisa',
icon: 'assets/img/16/find.png'
}
]
}
]
},
{
xtype: 'grid', ******************
flex: 1,
width: '100%',
itemId: 'grid',
columns: [
{
text: i18n.nome,
dataIndex: 'nome',
flex: 1
}
],
dockedItems: [{
xtype: 'pagingtoolbar',
dock: 'bottom',
displayInfo: true
}]*****************
}
],
buttons: [
{
text: i18n.incluir,
action: 'incluir',
itemId: 'botaoIncluir',
icon: 'assets/img/16/new.png'
},
{
text: i18n.editar,
action: 'editar',
itemId: 'botaoEditar',
icon: 'assets/img/16/edit.png'
}
]
});
The general idea is to do something like this:
Ext.define('BaseGrid', function(){
initComponent: function(){
this.columns = this.getColumns();
this.callParent();
},
getColumns: Ext.emptyFn
});
Ext.define('SubGrid', {
getColumns: function(){
return [];
}
});
Iam Using compositfield for Combobox and edit button as side by side
for this my code is
{
xtype: 'fieldset',
title: 'Covered under warranty',
checkboxToggle: true,
labelAlign: 'right',
autoHeight: true,
width: 730,
items: [{
bodyStyle: 'padding-left:5px;',
layout: 'table',
autoHeight: true,
autoWidth: true,
layoutConfig: {
columns: 2
},
defaults: {
frame: true,
style: 'margin: 0 0 1px 3px'
},
items: [{
xtype: 'fieldset',
title: 'Warranty Manufacturer',
autoHeight: true,
width: 360,
labelWidth: 110,
items: [{
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Company',
items: [ComboComanyinWarranty, btnEdit]
}, {
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Company Location',
width: 220,
items: [ComboCompanyLocationInWarranty]
}, {
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Contact Person',
width: 220,
items: [ComboContactPersonInWarranty, {
xtype: 'button',
text: '...'
}]
}, {
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Contact Phone',
items: [{
xtype: 'displayfield',
value: ''
}]
}, {
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Contact Mobile',
items: [{
xtype: 'displayfield',
value: ''
}]
}, {
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Contact Email',
items: [{
xtype: 'displayfield',
value: ''
}]
}]
}
}
but buttons are not displaying properly bottom part of the button cut.
so please help
Thanks in advance
Maybe autoheight isn't working? Try setting it to a fixed height...