All I want to do is when I click the reset button on my form it resets all fields. And I have tried everything but it does not seem to work. Here is the class that has the button in it:
App.views.HomeIndex = Ext.extend(Ext.form.FormPanel,{
floating: true,
scroll: 'vertical',
itemId: 'jobSearch',
centered: true,
modal: true,
hideOnMaskTap: false,
items: [{
xtype: 'textfield',
itemId: 'keywords',
label: 'Keywords',
labelAlign: 'top',
labelWidth: '100%',
name: 'keywords'
},{
xtype: 'textfield',
label: 'Job Title',
itemId: 'jtitle',
labelAlign: 'top',
labelWidth: '100%',
name: 'jtitle'
},{
.... //more xtypes here
,
dockedItems: [{
xtype: 'toolbar',
itemId: 'toolbar',
dock: 'bottom',
height: '36',
items: [
{ xtype: 'button', text: 'Reset',itemId: 'resetBtn',
},
{ xtype: 'spacer'},
{ xtype: 'button', text: 'Submit',itemId:'submitBtn',ui: 'action',
}
]
}]
In my App.js I have the code to handle the reset method:
//this is one way I thought of doing it. But obviously it does not work. I have tried googling all over but couldnt find a solution.
this.homeView.query('#resetBtn')[0].setHandler(function(){
var form = this.el.up('.x-panel');
//form.down('.x-input-text[name=keywords]').setValue(' ');
form.query('#jobSearch').getComponent('keywords').reset();
});
});
Ext.reg('HomeIndex', App.views.HomeIndex);
Your form's ID is "jobSearch", the name is "keyboards". You're trying to combine both.
Try:
form.query('#jobSearch').reset();
or:
document.forms['keywords'].reset();
Try this. It's a bit more ExtJS like.
var form = Ext.ComponentQuery.query('#jobSearch .form')[0];
form.reset();
Related
I have a field which is by default set as disabled. But I want to change this attribute (enable it) on button click.
{
margin: '10 50 10 50',
padding: '10 20 10 20',
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
id: 'name'
},
This is the button:
{
margin: '0 50 0 50',
padding: '10 20 10 20',
xtype: 'button',
text: "Create",
listeners: {
click: function() {
Ext.get('name').disabled = false;
}
}
}
When I click this nothing is happening. What is wrong here?
As you have provided id to your component so instead of getting by Ext.get() use Ext.getCmp().
Example
Ext.getCmp('name').setDisabled(false)
In this Fiddle, I have created a demo using same code.
Code snippet:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'panel',
title: 'Demo',
renderTo: Ext.getBody(),
layout: 'hbox',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
id: 'name'
}, {
xtype: 'button',
text: "Create",
listeners: {
click: function () {
Ext.getCmp('name').setDisabled(false);
}
}
}]
})
}
});
Note: Instead of using id use the itemId or any other config of extjs component because id can't be duplicate. So you can also do like this
Code snippet:
Ext.create({
xtype: 'panel',
title: 'Enable component using ITEM ID',
renderTo: Ext.getBody(),
layout: 'hbox',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
itemId: 'name'
}, {
xtype: 'button',
text: "Create",
handler: function() {
this.up('panel').down('#name').setDisabled(false);
}
}]
})
I'm trying to follow the tutorial of extjs about adding a form on click.
Now the "twist" is that I directly wish to create a more structured approach. So I'm using Ext.define to create both a grid and a form, for the grid.
The grid:
Ext.define('MyApp.view.main.EmployeeGrid', {
extend: 'Ext.grid.Grid',
xtype: 'employee-grid',
title: 'Employee Directory',
iconCls: 'x-fa fa-users',
listeners: {
itemtap: function() {
console.log("test");
Ext.create("MyApp.view.main.FormPanel", {});
}
},
store: {
data: [{
"firstName": "Jean",
"lastName": "Grey",
"phoneNumber": "(372) 792-6728"
}]
},
columns: [{
text: 'First Name',
dataIndex: 'firstName',
flex: 1
}, {
text: 'Last Name',
dataIndex: 'lastName',
flex: 1
}, {
text: 'Phone Number',
dataIndex: 'phoneNumber',
flex: 1
}]
});
the form:
Ext.define("MyApp.view.main.FormPanel", {
extend: "Ext.form.Panel",
xtype: 'form-panel',
title: 'Update Record',
floating: true,
centered: true,
width: 300,
modal: true,
items: [{
xtype: 'textfield',
name: 'firstname',
label: 'First Name'
}, {
xtype: 'toolbar',
docked: 'bottom',
items: ['->', {
xtype: 'button',
text: 'Submit',
iconCls: 'x-fa fa-check',
handler: function() {
this.up('formpanel').destroy();
}
}, {
xtype: 'button',
text: 'Cancel',
iconCls: 'x-fa fa-close',
handler: function() {
this.up('formpanel').destroy();
}
}]
}]
});
The problematic code is under the listeners: ... in the MyApp.view.main.EmployeeGrid class. The console is entry is logged, so I know the function is executed. However no form is shown. - What is the correct approach here?
Yes, as you said, no form is shown, because a newly created form is not shown by default.
Two solutions:
You can add to the form autoShow: true OR
You can add execute the show function on the created form: Ext.create(...).show()
However, I would recommend that you reuse the form, so instantiate a new one only once, store it on your grid, and reuse it for subsequent calls:
itemtap: function(view, index, target, record) {
if(!this.myForm) this.myForm = Ext.create("Ext.form.Panel", {});
this.myForm.loadRecord(record);
this.myForm.show();
}
For this to work, you may have to set closeAction: 'hide' on the form.
In at least some versions of ExtJS 6, it seemed to me as if IE exhibited memory leaks on component instantiation, so one should create as few new components as possible.
I'm trying to use the ExtJs filefield control to upload a file.
I use it as follows:
xtype: 'container',
margin: '15 0 0 25',
layout: 'vbox',
defaults: {
width: 400
},
items: [{
xtype: 'filefield',
itemId: 'fileChooser',
fieldLabel: 'CSV file',
labelWidth: 50,
buttonText: 'Select CSV file...'
}]
But, after I use it to choose a file (which I manage to do correctly), The fieldfile dissappears!
Did someone have the same problem?
Please try it in this way
{
xtype: 'form',
type: 'fileUploadForm',
items: [{
xtype: 'filefield',
cls:'upload-btn',
height:40,
type:'uploadButton',
name: 'file',
buttonText:'Upload New Version',
listeners: {
scope: this,
change: this.handleIconChange
}
}]
}
It should be possible to change items on a toolbar, but somehow changes are never displayed. Somehow something is wrong, and I can't find it. I also can't change text or a button state neither.
I need to change the 'all' checkbox. Changing is done in our controller by:
Ext.widget('gw_main_signals').down('#all').setValue(false);
and the view is (shortened):
Ext.define('GW.view.main.Signals', {
extend: 'Ext.grid.Panel',
alias: 'widget.gw_main_signals',
store: 'signal.Signals',
initComponent: function() {
this.bbar = Ext.
create('Ext.PagingToolbar', {
store: this.store,
displayInfo: true,
displayMsg: '{0} - {1} / {2}',
emptyMsg: ''
});
this.callParent(arguments);
},
autoScroll: true,
dockedItems: [{
xtype: 'toolbar',
itemId: 'signalToolbar',
layout: {
overflowHandler: 'Menu'
},
items: [{
xtype: 'label',
html: bundle.getMsg('state') + ':',
}, {
xtype: 'button',
text: bundle.getMsg('new'),
itemId: 'new',
enableToggle: true,
pressed: true
// pressed by default
}, '-', {
// xtype: 'button',
// xtype: 'menucheckitem',
xtype: 'checkboxfield',
boxLabel: bundle.getMsg('all'),
itemId: 'all',
}]
}],
columns: [...],
});
Thanks for any help!
I have the following code as my main javascript file for displaying a list + buttons. It all shows properly and everything like adding items to the store works great, but is there a simple way to get the list to only display values where the name equals a certain value?
Ext.define("MyProject.view.Main", {
extend: 'Ext.NavigationView',
requires: ['Ext.NavigationView', 'Ext.dataview.List'],
xtype: 'myproject-main',
config: {
items: [
{
title: 'List of Data',
layout: 'fit',
xtype: 'container',
itemId: 'listContainer',
items: [
{
xtype: 'list',
store: 'DataStuff',
itemTpl: '{name}',
emptyText: 'No data added yet'
},
{
xtype: 'container',
docked: 'bottom',
padding: '5px',
layout: 'hbox',
items: [{ xtype: 'button', itemId: 'addBtn', text: 'Add Data', ui: 'confirm', width: '50%', align: 'left' }, { xtype: 'button', itemId: 'updateBtn', text: 'Update Data', ui: 'action', width: '50%', align: 'right' }]
}
]
}
]
}
});
I had thought there was a simple filters: category I could add under the store but couldn't find anything that worked.
List displays items that provided by store. For controls list filter you should control his store fitlers.
Example
var store = list.getStore();
store.filter('category', 'first');
//or
var customFilter = function(record){
return soAnyCheckForRecods(record);
}
store.filterBy(customFilter);
More information about filters look here http://docs.sencha.com/touch/2-0/#!/api/Ext.data.Store