extjs how to pass parameters from container to a nested container - extjs

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.

Related

how to use a component within another component in extjs

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',

Aligning a textfield to right in a container

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!

ExtJS - autoScroll doesn't show in nested grid

I've been trying to find an answer to this problem for the last 24 hours and couldn't find a way to resolve this. Here it is:
I'm using MVC architecture with ExtJS 4. I have a tabpanel that has some grid as items. When these grids load, they do not have a vertical scrollbar, even though I set autoScroll to 'true' and their content is bigger than the screen can show. Every post I read about this problem was resolved setting the grid's parent layout to 'fit', but, as you can see below, I already done it and still not have a scrollbar... If I define a height to the grid, the scrollbar works perfectly, but I need it to work with different heights...
I belive I might have a overnesting problem, but I just started developing with ExtJS some days ago and it stills a little confusing to me...
The question is: how can I make this structure work with autoScroll?
SO won't let me post an image here as my reputation is lower than 10, so you can find my app's structure here
Please note that I wrote "layout: 'fix'" in the image, but I meant "layout: 'fit'" :)
This is my Main view, which has 2 panels. The 'center' one is where I load the tabpanel that has the grid.
Ext.define('MyApp.view.Main', {
extend: 'Ext.container.Container',
requires:[
// 'Ext.tab.Panel',
// 'Ext.layout.container.Border',
'MyApp.view.Menus'
],
xtype: 'app-main',
layout: {
type: 'border'
},
items: [
{
region: 'north',
xtype: 'panel',
padding: '5 5 0 5',
title: 'MyApp',
items: {
xtype: 'menus'
}
},
{
region: 'center',
itemId: 'centerPanel',
xtype: 'panel',
padding: 5,
layout: 'fit'
}
]
});
This is the view that have the fieldset and the tabpanel as items:
Ext.define('MyApp.view.licencas.List', {
extend: 'Ext.form.Panel',
xtype: 'licencaslist',
title: 'Licenças de software',
border: false,
items: [
{
xtype: 'fieldset',
title: 'Dados do Veículo',
margin: 5,
items: [
{
xtype: 'combobox',
anchor: '100%',
valueField: 'id',
displayField: 'descricao',
store: 'ComboEmpresas',
typeAhead: true,
queryMode: 'local',
name: 'empresa',
fieldLabel: 'Empresa'
},
{
xtype: 'combobox',
editable: false,
valueField: 'id',
displayField: 'descricao',
store: 'ComboSoftwares',
queryMode: 'local',
name: 'software',
fieldLabel: 'Software'
},
{
name: 'valor',
fieldLabel: 'Valor empresa:',
xtype: 'numberfield',
minValue: 0,
maxValue: 100000,
allowDecimals: true,
disabled: true,
},
{
name: 'contrato',
fieldLabel: 'Contrato:',
xtype: 'textfield',
disabled: true,
},
{
name: 'demonstracao',
xtype: 'checkbox',
fieldLabel: 'Demonstração',
disabled: true,
}
]
},
{
xtype: 'licencastabpanel',
border: false,
margin: 5
}
],
initComponent: function() {
this.callParent(arguments)
}
});
And finally this is the grid where I need the autoScroll property...
Ext.define('MyApp.view.licencas.placas.List', {
extend: 'Ext.grid.Panel',
xtype: 'licencasplacaslist',
store: 'EmpresaVeiculos',
border: false,
forceFit: true,
autoScroll: true,
plugins: [new Ext.grid.plugin.CellEditing({
clicksToEdit: 1,
})],
dockedItems: [
{
dock: 'top',
xtype: 'toolbar',
items: [
{
text: 'Alterar todos',
iconCls: 'money-16',
action: 'alterartodos',
xtype: 'button'
},
'->',
{
xtype: 'trigger',
name: 'searchfieldLicencasPlacas',
itemId: 'searchfieldLicencasPlacas',
emptyText: 'Filtrar por placa...',
width: '500px',
hideLabel: true,
selectOnFocus: true,
triggerCls: 'x-form-search-trigger'
}
]
}
],
columns: [
Ext.create('Ext.grid.RowNumberer'),
{
text: "Placa",
dataIndex: 'placa',
width: 70
},
{
text: "Serial",
dataIndex: 'serial',
width: 70
},
{
text: "Condutor",
dataIndex: 'condutor'
},
{
text: "Ativo",
dataIndex: 'ativo',
width: 50
},
{
text: "Data Início",
dataIndex: 'data_inicio',
format: 'd.m.Y',
width: 60
},
{
text: "Data Fim",
dataIndex: 'dt_fim',
format: 'd.m.Y',
width: 60,
editor: {
xtype: 'datefield',
format: 'd.m.Y'
}
},
{
text: "Contrato",
dataIndex: 'contrato',
width: 70,
editor: {
xtype: 'textfield'
}
},
{
text: "Software",
dataIndex: 'valor_software',
renderer: 'usMoney',
width: 70,
editor: {
xtype: 'numberfield',
minValue: 0,
maxValue: 1000,
allowDecimals : true
}
},
{
text: "Comunicação",
dataIndex: 'valor_comunicacao',
renderer: 'usMoney',
width: 70,
editor: {
xtype: 'numberfield',
minValue: 0,
maxValue: 1000,
allowDecimals : true
}
},
{
text: "Comodato",
dataIndex: 'valor_comodato',
renderer: 'usMoney',
width: 70,
editor: {
xtype: 'numberfield',
minValue: 0,
maxValue: 1000,
allowDecimals : true
}
},
{
text: 'Empresa para faturar',
dataIndex: 'fatura',
width: 200,
editor:
{
xtype: 'combobox',
displayField: 'descricao',
valueField: 'descricao',
store: 'ComboFaturas',
name: 'software',
queryMode: 'local'
}
}
],
initComponent: function() {
this.callParent(arguments)
}
});
Please, note that I removed all "layout: 'fit'" (except from the Main view, which has influence over other views) from the code as it wasn't working anyway... :)
Please, let me know if I need to provide you any extra information. I tried to make it easier to understand with the image below.
Thank you guys!
It works as follows:
grid ignores autoScroll config option
grid needs a height, either explicit or controlled by a layout of its parent container
if grid does not have a height, it tries to expand itself vertically according to the number of records loaded in the store so that it does not show the scrollbar
fit layout can only have one item - if it is a grid then its height (and width) is controlled by the size of the parent container
To summarize: If you want a grid to scroll it must have a height.

Extending extjs views

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 [];
}
});

I have made a layout of tab panel with extjs designer

I have made a layout of tab panel with extjs designer but its not displaying anything if I am running it.
Here's the code please help me :
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'extjs/s.gif';
Ext.onReady(function(){
MyTabPanelUi = Ext.extend(Ext.TabPanel, {
activeTab: 0,
width: 800,
height: 500,
title: 'Ledger',
itemId: 'ledger_tab',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'Ledger',
autoScroll: true,
items: [
{
xtype: 'editorgrid',
title: 'Ledger',
store: 'store',
height: 150,
footer: true,
stripeRows: true,
header: true,
loadMask: true,
id: 'leg_grid_up',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'textfield'
}
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
header: 'Column',
sortable: true,
width: 100,
align: 'right',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'datecolumn',
dataIndex: 'date',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'datefield'
}
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'checkbox',
boxLabel: 'BoxLabel'
}
}
],
tbar: {
xtype: 'toolbar',
height: 50,
items: [
{
xtype: 'container',
layout: 'column',
width: 794,
height: 43,
items: [
{
xtype: 'spacer',
width: 588,
height: 18
},
{
xtype: 'spacer',
width: 200,
height: 18
},
{
xtype: 'datefield'
}
]
}
]//toolbar items
}
},
{
xtype: 'container',
height: 70
},
{
xtype: 'editorgrid',
title: 'Ledger',
height: 150,
id: 'leg_grid_down',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'textfield'
}
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
header: 'Column',
sortable: true,
width: 100,
align: 'right',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'datecolumn',
dataIndex: 'date',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'datefield'
}
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'checkbox',
boxLabel: 'BoxLabel'
}
}
],
tbar: {
xtype: 'toolbar'
}
},
{
xtype: 'container'
}
]//ledger panel
}
];//this
MyTabPanelUi.superclass.initComponent.call(this);
}
});
});
});
You need to render it onto some HTML tag. You can use the renderTo property to render the panel onto the body tag or some div tag with an id set.
Let's assume you are planning to render to the body tag. You need to add renderTo : Ext.getBody(). The Ext.getBody method simply returns the body tag.
MyTabPanelUi = Ext.extend(Ext.TabPanel, {
activeTab: 0,
width: 800,
height: 500,
renderTo: Ext.getBody(),
.
.
.
You aren't rendering it.
Try rendering it to Ext.getBody():
MyTabPanelUi.render(Ext.getBody());

Resources