how to show a calendar when you click on text field icon on the left of the calendar?
Use the 'render' event to listen to clicks on the datefield, then use the onTriggerClick() function to expand the date picker:
{
xtype:'datefield',
name:'date1',
fieldLabel:'Date',
listeners:{
render:function (d) {
d.el.on('click', function () {
d.onTriggerClick();
});
}
}
}
{
xtype:'datefield',
fieldLabel:'Start Date',
name:'start_date',
dataIndex:'start_date'
}
use the items[] for the field container and put above lines for datefield in items and call it
Alin Suciu's answer is not enough for extjs 5.
Because when click datepicker image, picker does not trigger.
So i changed it a little.
it's not best way but working.
listeners: {
afterrender: function (d) {
d.getEl().on('click', function (e, t, o) {
if (e.target.id.indexOf('picker') <= 0) {
d.onTriggerClick();
}
});
}
}
if there is any better solution advice, i will change my code.
Best regards.
Related
When we have multiple parent-child grid and want to re config the grid after load call like this:
listeners: {
'afterrender': function (grid) {
var state =grid.getState();
state.columns[1].hidden= true;
grid.applyState(state);
}
}
This behaviour is even still reproducable on ExtJS 6.5.1.
For Example
https://www.sencha.com/forum/showthread.php?306941-Apply-state-after-grid-reconfigure
Here's an override I've been using to fix the hidden columns issue. I am using 6.6 so not sure if this will work in 4.4, though. Also, you may not need to suspend/resume layouts but not sure on that either.
Ext.define('MyApp.overrides.Grid', {
override: 'Ext.grid.Panel',
applyState: function () {
this.callParent(arguments);
Ext.suspendLayouts();
Ext.each(this.getColumns(), function (column) {
if (column.hidden) {
column.show();
column.hide();
}
});
Ext.resumeLayouts(true);
}
});
Well it's still an issue with applyState. When grid is having multiple hidden columns and we use applyState function it crash our grid. So we have skip the hidden property part although it's working smooth for width change , filters etc.
listeners: {
'afterrender': function (grid) {
var state =grid.getState();
state.columns[1].hidden= false;
grid.applyState(state);
grid.columns[3].hidden = true;
}
}
if you manually set hidden property of column it'll hide it.
I am trying to make a live search combo box and everything is working great except for one small detail. I want to call a search method as the user presses the down and up keys through the combo box. This does trigger a select event but the piker has no selection. When I select a combobox item with my mouse or by pressing enter the select event does get a selection. I want to launch queries using the value selected with the down and up keys while navigating the box.
Combo code
searchField = new Ext.form.ComboBox({
id:'searchField',
store: queryCacheStore,
pageSize:0,
width: 780,
triggerAction:'all',
typeAhead:false,
mode:'remote',
minChars:2,
forceSelection:false,
hideTrigger:true,
enableKeyEvents:true,
queryDelay:200,
queryMode:'remote',
queryParam:'query',
queryCaching:false,
displayField:'query',
autoSelect:false,
listConfig:{
loadingText: 'Searching...',
// Custom rendering template for each item
getInnerTpl: function() {
return '<div class="search-item">' +
'{query}' +
'</div>';
}
},
listeners: {
specialkey:function (field, e) {
if (e.getKey() == e.UP || e.getKey() == e.DOWN) {
}
},
select:function (combo, selection) {
var post = selection[0];
searchField.setValue(post.get('query'));
requestAccessList.runSearch();
},
focus:function (combo, event, opts) {
combo.store.proxy.extraParams = {
'lcm':true,
'type':RequestAccess.OBJECT_TYPE
}
}
}
});
So when
select:function (combo, selection) {
gets called with down arrow key or up arrow key then selection is null. When it gets called with enter key or mouse click it has the highlighted combobox selection. So the question is how can I get the value of the combo box from arrow key events?
OK I figured this out myself. You have to override the highlight event of the BoundListKeyNav
Ext.view.BoundListKeyNav.override({
highlightAt:function (index) {
// this.callOverridden(index); For some reason this does not work
var boundList = this.boundList,
item = boundList.all.item(index);
if (item) {
item = item.dom;
boundList.highlightItem(item);
boundList.getTargetEl().scrollChildIntoView(item, true);
searchField.setValue(boundList.getNode(index).textContent);
searchService.runSearch();
}
}
});
I added the following listConfig to a combobox to accomplish something similar:
listConfig: {
listeners: {
highlightitem: function(view, node, eOpts) {
combo.setValue(node.innerText);
}
}
}
It updates the combo box text field value on mouse over and key up/down.
I have a simple grid with one of the columns being a 'download' link placed like this:
{
header: 'Config files',
width: 130,
sortable: false,
fixed: true,
renderer: function() {
return 'Download';
}
}
This is in the view. Now moving on to the controller I placed a listener on the grid to catch whenever the link is clicked:
init : function() {
this.control({
'accountFiles a[class=downloadCfg]': {
click: function () {
alert('test');
}
}
});
}
Very basic but it doesnt work. Can it be because the link is created via the 'renderer' function of the grid? Any ideas?
#Romeo
This is how you can grab whether the Download link is clicked or not:
'accountFiles': {
itemclick: function( thisView, record, item, index, e, eOpts ) {
var t = e.getTarget('.downloadCfg');
if (!Ext.isEmpty(t))
alert('Download clicked!!');
else
alert('Other item clicked!!');
}
}
Once you have identified that the Download link is clicked, you have the record containing the complete record representing the row.
I don't know how to fix this issue, but I know another solution.
Create method in GridPanel:
doDownload: function(recordId) {
var record = this.getStore().data.get(recordId);
// do something
}
Then create change renderer to:
renderer: function(value, meta, record, rowIndex, colIndex, store) {
return 'Download';
}
Action in onclick handler tries to find grid using dom classes.
accountFiles a[class=downloadCfg]
will select all descendant of accountFiles tag which have a tag. And filter them by class attribute.
It seems to me that you confused it with ComponentQuery syntax where you select by component id not by tag.
I have created a form that displays values in plain displayfields.
There is an "edit" button next to the form and once clicked by the user, the displayfields should switch to being textfields and will, therefore, make the data editable.
This, I am guessing, would be achieved by having two identical forms, one editable and one not and one or the other would be visible, based on the user having clicked the button. Another way, perhaps, is to have the xtype dynamically selected upon clicking the button.
Can anybody point me towards a certain direction in order to do this? I am a complete newbie to ExtJS and only just started learning ExtJS4.
Thank you in advance.
M.
Start by rendering all fields as input fields with disabled:true. Then use this for the Edit button handler:
...
form.getForm().getFields().each(function(field) {
field.setDisabled( false); //use this to enable/disable
// field.setVisible( true); use this to show/hide
}, form );//to use form in scope if needed
Ext.getCmp('yourfieldid').setFieldStyle('{color:black; border:0; background-color:yourcolor; background-image:none; padding-left:0}');
Ext.getCmp('yourfieldid').setReadOnly(true);
You can toggle based on a property isEditable. Then when you click the button you change the property and just remove and add the form. It makes it cleaner if you are switching back and forth.
Ext.define('E.view.profile.information.Form', {
extend: 'Ext.form.Panel',
xtype: 'form',
title: 'Form',
layout: 'fit',
initComponent: function () {
this.items = this.buildItems();
this.callParent();
},
buildItems: function () {
return [this.buildInvestmentPhilosophy()];
},
buildInvestmentPhilosophy: function () {
var field = {
name: 'investmentPhilosophy',
xtype: 'displayfield',
editableType: 'textarea',
grow: true,
maxLength: 6000,
value: '---',
renderer: E.Format.textFormatter
};
this.toggleEditingForForm(field);
return field;
},
toggleEditingForForm: function (form) {
if (this.isEditable) {
Ext.Array.each(form, this.configureFieldForEditing, this);
}
},
configureFieldForEditing: function (field) {
if (field.editableType) {
field.xtype = field.editableType;
}
}
});
You can also try to have two items : a displayfield and a textfield with the same data source and you could hide/show the right item with your button handler.
You should not have any CSS problems
(If you did not have CSS problems I would enjoy to see you code)
I have a simple radio button:
new Ext.form.Radio({
id: 'ptype',
boxLabel:'Yes',
name: 'price_type',
value: 1
})
However Im having trouble adding a on click event ot it.
I usually use:
listeners: {
click: function (a,e) {
//event
}
}
As a config parameter, however it does not seem to work in this case.
Any advice appreciated, thanks.
Radio and checkboxes do not have a click event -- I believe you want the check event instead. Your listener should look like:
listeners: {
check: function (ctl, val) {
// val is the new checked boolean value
}
}
Note that the handler config is a handy shortcut for this (also available on buttons). Instead of the listeners syntax you could just do this:
handler: function(ctl, val) {
// etc
}
Try this:
new Ext.form.Radio({
id: 'ptype',
boxLabel:'Yes',
name: 'price_type',
value: 1
onClick: function(e){
.....
.....
}
})
If you're using a CheckBoxGroup, you should do something like this to make sure you are firing on the correct Radio.
listeners: {
check: function(checkbox, checked) {
if(checked) {
// do whatever.
}
}
}