var rows=[];
for(var i=0; i<5;i++)
{
var row = Ext.create(Prototype.view.RowModel);
var text = row.getComponent(0).getFieldLabel();
var text2 = row.getComponent(0).getId();
rows.push(row);
console.log(text+text2);
}
this.add(rows);
row.GetComponent(0) is confirmed to be a textfield.
When I call getFieldLabel() it crashes with the following error
Uncaught TypeError: Object [object Object] has no method 'getFieldLabel'
But the ExtJs 4.2 documentation says otherwise...?
Whatever the technique I use to reach the "label". i always receive a object Object which has no getFieldLabel(). How do I convert? Or reach it directly?
can someone help?
code of the row model :
Ext.define('Prototype.view.RowModel', {
extend: 'Ext.Container',
config: {
layout: {
type: 'hbox'
},
items: [
{
xtype: 'textfield',
itemId: 'rowLabel',
width: 100,
label: 'Vin',
labelWidth: '100%',
name: 'rowLabel1',
readOnly: true
},
{
xtype: 'numberfield',
itemId: 'UserField',
width: 100,
labelWidth: '0%'
},
{
xtype: 'numberfield',
itemId: 'ObjectField',
width: 100,
labelWidth: '0%'
},
{
xtype: 'textfield',
itemId: 'UnitLabel',
style: 'font-size:15px',
width: 60,
label: 'L/User',
labelWidth: '100%',
readOnly: true
},
{
xtype: 'numberfield',
itemId: 'FactorField',
width: 100,
labelWidth: '0%'
},
{
xtype: 'spacer',
maxWidth: 15
},
{
xtype: 'button',
handler: function(button, event) {
alert('help');
console.log('okay');
},
height: 47,
itemId: 'mybutton',
ui: 'plain',
iconCls: 'info'
}
]
}
});
You can find the textfield by itemId:
row.down('#rowLabel');
Related
I created a table using extjs where it is having three columns name, email and cars. In extjs we are having a default sorting method. here i want to add search method for all these three columns so that i can also search using the name, email and cars.
What change i need to do for the below code
The expected output is i need to get search filter option under each columns.
Ext.define('ViewerModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.viewermodel',
stores: {
mystore: {
fields: ['name', 'email', 'cars'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa#simpsons.com"
}, {
'name': 'Bart',
"email": "bart#simpsons.com"
}, {
'name': 'Homer',
"email": "homer#simpsons.com"
}, {
'name': 'Marge',
"email": "marge#simpsons.com"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}
}
});
Ext.define('APP.HorizontalBox', {
extend: 'Ext.container.Container',
requires: ['Ext.layout.container.HBox'],
xtype: 'layout-horizontal-box',
width: 750,
height: 300,
layout: {
type: 'hbox',
align: 'stretch'
},
bodyPadding: 10,
defaults: {
frame: true,
bodyPadding: 10
},
viewModel: {
type: 'viewermodel'
},
items: [{
xtype: 'grid',
title: 'Grid: click on the grid rows',
itemId: 'myGridItemId',
flex: 1.2,
margin: '0 10 0 0',
bind: {
store: '{mystore}',
selection: '{users}'
},
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 0.5
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Cars',
dataIndex: 'cars',
flex: 1
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
padding: '2 5 2 5',
text: 'Edit item',
handler: function (btn) {
var grid = btn.up('grid');
var selectedRow = grid.getSelectionModel().getSelection()[0];
var janela = Ext.create('APP.MyWindow', {
animateTarget: btn.getEl(),
//EDITED
viewModel: {
data: {
users: selectedRow
}
}
}).show();
}
}]
}],
}, {
xtype: 'form',
title: 'View',
itemId: 'panelbindItemId',
flex: 1,
margin: '0 10 0 0',
defaults: {
labelWidth: 50
},
items: [{
xtype: 'displayfield',
margin: '20 0 0 0',
fieldLabel: 'Name',
bind: '{users.name}'
}, {
xtype: 'displayfield',
fieldLabel: 'Email',
bind: '{users.email}'
}]
}]
});
Ext.define('APP.MyWindow', {
extend: 'Ext.window.Window',
alias: 'widget.mywindow',
reference: 'windowreference',
title: 'MyWindow | Edit record',
closable: true,
modal: true,
padding: '10px',
height: 150,
layout: 'fit',
initComponent: function () {
var me = this;
Ext.apply(me, {
items: [{
xtype: 'form',
layout: 'anchor',
defaults: {
padding: '5 0 5 0'
},
items: [{
xtype: 'textfield',
margin: '10 0 0 0',
fieldLabel: 'Name',
bind: '{users.name}'
}, {
xtype: 'textfield',
fieldLabel: 'Email',
bind: '{users.email}'
}]
}]
});
me.callParent(arguments);
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('APP.HorizontalBox', {
renderTo: document.body,
width: 750,
height: 400,
title: 'Title'
});
}
});
You can do it in the afterrender event of grid (Refer this post.) For example:
listeners: {
afterrender: function () {
var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
menu.add([{
text: 'Search',
iconCls: 'x-fa fa-home',
handler: function () {
console.log("Search Item");
}
}]);
}
}
Check this Fiddle.
What you are searching for is the FiltersFeature, and the usage is as follows:
xtype:'grid',
...
features:[{
ftype: 'filters',
local: true,
filters: [{
type: 'string',
dataIndex: 'name'
}, {
... (one definition for every column you want to allow filtering one)
}]
}]
Please note that you have to add a requires and maybe even load Ext.ux, as can be found in the last comment.
Other readers please be aware that FiltersFeature is ExtJS4 specific, and has been moved around for ExtJS 5 and 6.
You can also use this code where it will search the data using the date.
listeners: {
afterrender: function () {
var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
menu.add([{
xtype:'datefield',
name:'date1',
fieldLabel:'Filter By',
format: 'y-m-d',
listeners:{
renderer: Ext.util.Format.dateRenderer('y-m-d'),
field:{ xtype:'datefield',
autoSync:true,
allowBlank:false,
editor: new Ext.form.DateField(
{format: 'y-m-d'}) }
}
}
I use ExtJS version 4.2.1, and I have a table layout.
Ext.create('Ext.panel.Panel', {
width: 1300,
height: 700,
title: 'Table Layout',
layout: {
type: 'table',
columns: 3,
tdAttrs:
{
width: 500,
}
},
items: [
{
fieldLabel: 'Text1',
xtype: 'textfield',
},
{
fieldLabel: 'Text2',
xtype: 'textfield',
},
{
fieldLabel: 'Text3',
xtype: 'textfield',
},
{
fieldLabel: 'Text4',
xtype: 'textfield',
},
{
fieldLabel: 'Text5',
xtype: 'textfield',
},
{
fieldLabel: 'Text6',
xtype: 'textfield',
}],
renderTo: Ext.getBody()
});
and the result is:
each column width is 500px and I want to each textfield's width adjust with its container. somehow a autoWidth,But it doesn't now.
Add width in percents to the textfields:
Ext.create('Ext.panel.Panel', {
width: 1300,
height: 700,
title: 'Table Layout',
layout: {
type: 'table',
columns: 3,
tdAttrs: {
width: 500,
}
},
defaults: {
width: '95%'
},
items: [
// ...
],
renderTo: Ext.getBody()
});
I have a form with standard submit.
var formDettaglio = new Ext.form.FormPanel({
title: 'Dettaglio richiesta',
renderTo: 'divDettaglio',
url: '/supporto/gestioneDettaglio',
standardSubmit: true,
width: '100%',
forceFit: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
border: false
},
margin: '0 0 15 0',
items: [{
layout: {
type: 'hbox',
align: 'stretch'
},
margin: '0 10 5 10',
items: [{
xtype: 'combo',
fieldLabel: 'Prodotto/Servizio',
labelWidth: 100,
width: 450,
queryMode: 'local',
name: 'cbAssets',
store: storeAssets,
displayField: 'valore',
valueField: 'codice'
}, {
flex: 1,
xtype: 'label',
text: ' '
}, {
xtype: 'textfield',
fieldLabel: 'Data chiusura prev.',
labelAlign: 'right',
labelWidth: 120,
width: 250,
name: 'textDataPrevista',
readOnly: true
}, {
xtype: 'textfield',
fieldLabel: 'Stato',
labelAlign: 'right',
labelWidth: 50,
width: 150,
name: 'textStato'
}
]
}, {
xtype: 'textarea',
fieldLabel: 'Motivo richiesta',
labelWidth: 100,
height: 150,
margin: '0 10 5 10',
name: 'textMotivo'
}
],
dockedItems: [{
xtype: 'toolbar',
padding: '2 0 2 0',
dock: 'bottom',
ui: 'footer',
items: [{
xtype: 'tbfill'
}, {
xtype: 'button',
text: 'Salva',
style: "width:100px; height:25px;",
handler: function () {
if (formDettaglio.getForm().isValid()) {
formDettaglio.getForm().submit({
params: {
azione: 'SALVA'
},
success: function (form, action) {
alert('ok');
},
failure: function (form, action) {
alert('ko');
}
});
} else {
alert('Errore!');
}
}]
}]
});
My called function, /supporto/gestioneDettaglio, send a json response
{"success":true}
But my success function doesn't start. I tried also with breakpoint on firebug: no way.
I get back an empty page with exactly the phrase... {"success":true}
What am I doing wrong? I send JSON like any other response in my application.
You have standardSubmit set to true. If you want to do an ajax submission with the callback functionality you need to set the standardSubmit property to false.
Solved with "standardSubmit:false"
On submit click, I called
Ext.Ajax.request({ url: '/supporto/gestioneDettaglio',
params: {azione: 'SALVA'},
jsonData: { },
form: 'formDettaglio',
method:'POST',
success: function(response, opts) { alert("successfull"); },
failure:function(res,opt) { alert("request failed"); }
});
I don't understand why the Ajax request, without "jsonData: { },", didn't pass parameters... But it's ok.
Thanks!
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...