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!
Related
In my extjs6 project, in the current page I have a column layout. Inside column 2 I have a chart. How can I make the chart fill that column in height and width? Everything I try is not working.
Below is my view, column 1 has small components so no need to expand contents. I've tried 'fit' height '100%', nothing seems to work properly. also, I am populating the chart AFTER the view is created. not sure if that matters
Ext.define('xxx.view.historical.Historical', {
extend: 'Ext.Panel',
xtype: 'app-historical',
controller: 'historicalController',
itemId: 'historicalItemId',
viewModel: 'historicalVM',
requires: [
'xxx.view.historical.HistoricalController',
'xxx.util.GlobalVar',
'Ext.chart.*'
],
title: 'Historical',
layout: 'fit',
items: [{
xtype: 'tabpanel',
margin: 10,
tabBar: {
layout: {
pack: 'left'
},
border: true
},
style: {
'border-radius': '4px 4px 4px 4px',
'box-shadow': '0 0 5px rgba(0, 0, 0, 0.3)'
},
defaults: {
iconAlign: 'top',
bodyPadding: 0
},
items: [{
title: 'Profit By Instrument',
autoScroll: true,
layout: {
type: 'column'
},
width: '100%',
items: [{
columnWidth: 0.20,
items: [{
xtype: 'combobox',
fieldLabel: 'Account',
emptyText: 'Select Account',
editable: false,
margin: 5,
displayField: 'AcctNum',
valueField: 'AcctNum',
bind: {
store: '{myAccountSummaryStore}'
},
listeners: {
select: 'onComboboxSelect'
},
queryMode: "local"
//combobox to select account
}, {
xtype: 'fieldcontainer',
fieldLabel: 'Instruments',
defaultType: 'checkboxfield',
itemId: 'itemIdCheckboxContainer',
margin: 5,
//cls: 'my-class',
items: [{
boxLabel: 'Anchovies',
name: 'topping',
inputValue: '1',
id: 'checkbox1',
cls: 'ownClass'
}]
}, {
xtype: 'button',
text: 'Select All'
}, {
xtype: 'button',
text: 'Deselect All'
}]
}, {
//COLUMN 2
columnWidth: 0.80,
items: [{
xtype: 'chart',
title: 'this is my title',
itemId: 'chartId',
margin: 5,
width: '100%',
height: '100%',
legend: {
docked: 'bottom'
},
axes: [{
type: 'numeric',
position: 'left',
fields: ['cumulativePl'],
title: 'Pl'
}, {
type: 'time',
position: 'bottom',
fields: ['filedate'],
title: 'Filedate',
//renderer: 'onAxisLabelRender',
label: {
rotate: {
degrees: -40
}
}
}]
}]
}]
}, {
title: 'Profit By Account',
autoScroll: true,
items: []
}]
}]
});
Just set the column layout to fit, it should work:
columnWidth: 0.40,
layout: {
type: 'fit'
},
Check out this FIDDLE
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'}) }
}
}
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');
ExtJS 4.1.1a
Simple authorization form (login & passowrd).
Even browser not prompt to save entered login and password values unlike standard html form with input's.
Sample code: http://jsfiddle.net/AllanStark/mKMfh/1/
Ext.create('Ext.window.Window', {
title: 'Test',
height: 430,
width: 335,
bodyPadding: '20 0 0 0',
draggable: false,
resizable: false,
closable: false,
layout: {
type: 'vbox',
align: 'center'
},
bodyStyle: {
background: '#FFFFFF'
},
items: [{
xtype: 'image',
width: 150,
height: 150,
src: 'images/logo.gif'
},{
xtype: 'form',
url: 'login.php',
standardSubmit: true,
border: 0,
width: 170,
padding: '20 0 20 0',
defaultType: 'textfield',
layout: 'vbox',
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'qtip',
width: '100%'
},
items: [{
xtype:'textfield',
fieldLabel: 'Login',
name: 'login',
allowBlank: false
},{
xtype:'textfield',
fieldLabel: 'Password',
name: 'pass',
inputType: 'password',
allowBlank: false,
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
var form = field.up('form').getForm();
form.submit();
}
}
}
}],
buttons: [{
text: 'Ok',
formBind: true,
disabled: true,
handler: function() {
var form = this.up('form').getForm();
form.submit();
}
},{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}]
}]
}).show();
To open the password dialog the html-attribut autocomplete must be "on". In Extjs its "off" and there's no method to change it only a 'workaround'.
So add this event to the listeners of password and username:
afterrender:function(cmp){
cmp.inputEl.set({
autocomplete:'on'
});
}
Ext.create('Ext.window.Window', {
title: 'Test',
height: 430,
width: 335,
bodyPadding: '20 0 0 0',
draggable: false,
resizable: false,
closable: false,
layout: {
type: 'vbox',
align: 'center'
},
bodyStyle: {
background: '#FFFFFF'
},
items: [{
xtype: 'image',
width: 150,
height: 150,
src: 'images/logo.gif'
},{
xtype: 'form',
url: 'login.php',
standardSubmit: true,
border: 0,
width: 170,
padding: '20 0 20 0',
defaultType: 'textfield',
layout: 'vbox',
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'qtip',
width: '100%'
},
items: [{
xtype:'textfield',
fieldLabel: 'Login',
name: 'login',
allowBlank: false,
listeners: {
// ------
afterrender:function(cmp){
cmp.inputEl.set({
autocomplete:'on'
});
}
// ------
}
},{
xtype:'textfield',
fieldLabel: 'Password',
name: 'pass',
inputType: 'password',
allowBlank: false,
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
var form = field.up('form').getForm();
form.submit();
}
},
// ------
afterrender:function(cmp){
cmp.inputEl.set({
autocomplete:'on'
});
}
// ------
}
}],
buttons: [{
text: 'Ok',
formBind: true,
disabled: true,
handler: function() {
var form = this.up('form').getForm();
form.submit();
}
},{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}]
}]
}).show();
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...