I'd like to use extjs grid cell edit function, besides textfield, datepicker, I also need a textfield with a button in the right to trigger a picklist modal window. It looks like to datepicker which has a calendar icon in a textfield in the right.
I tried fieldcontainer to combine a textfield with a button, however, it doesn't work. Thanks a lot for help!
Ext.define('CellPicklist', {
extend: 'Ext.form.FieldContainer',
xtype: 'cell-picklist',
layout: 'hbox',
width: 200,
items: [{
xtype: 'textfield',
}, {
xtype: 'button'
}]
});
columns: [{dataIndex: 'id',hidden: true},{text: 'Name', dataIndex: 'name', flex: 1, editor: 'cell-picklist'}]
You could either use a trigger field and implement your picker logic in the onTriggerClick method or define your own field by extending Ext.form.field.Picker, which is an abstract class for fields that show a picker on trigger click and therefore already provides some of the logic (such as displaying the picker under the trigger).
If you have a look at the class hierarchy of the datefield you will see how those classes are related:
Ext.Base
Ext.AbstractComponent
Ext.Component
Ext.form.field.Base
Ext.form.field.Text
Ext.form.field.Trigger
Ext.form.field.Picker
Ext.form.field.Date
Related
I'm ExtJs 6.0 framework developer.
I want to develop a component like date that when user click it, It open a window and this window have some textfields and other Extjs components. My problem is when I want to use this component as a grid cell editor. it does not show the component. In other words, I want to develop a custom picker.
How do I do?
You can extend Ext.form.field.Picker and implement createPicker:
An abstract class for fields that have a single trigger which opens a
"picker" popup below the field, e.g. a combobox menu list or a date
picker. It provides a base implementation for toggling the picker's
visibility when the trigger is clicked, as well as keyboard navigation
and some basic events. Sizing and alignment of the picker can be
controlled via the matchFieldWidth and pickerAlign/pickerOffset config
properties respectively.
You would not normally use this class directly, but instead use it as
the parent class for a specific picker field implementation.
Subclasses must implement the createPicker method to create a picker
component appropriate for the field.
It can look like:
Ext.define('Fiddle.view.FooPicker', {
extend: 'Ext.form.field.Picker',
xtype: 'foo-picker',
createPicker: function(){
return Ext.widget('container',{
padding: 20,
floating: true,
items: [
{
xtype: 'textfield'
},
{
xtype: 'box',
html: 'Foo'
}
]
})
}
});
https://fiddle.sencha.com/#fiddle/1139
I got grid with columns:
...
columns: [
{
xtype: 'rownumberer'
}, {
xtype: 'checkcolumn',
sortable: false,
header: 'done',
dataIndex: 'status',
flex: 2,
width: 55,
callback: function(success, model) {
this.setRawValue(success); // DOESNT WORK
this.setValue(success); // DOESNT WORK
},
}
...
I would like to change checkbox state to checked or unchecked. Functions setValue() or setRawValue() have no effect for the checkbox - moreover - there are not available for
the widget.
Is there simple function like setChecked(boolean) in extjs for checkcolumn?
It is ridiculous I have instance 'checkcolumn' but I can't find basic function.
I will be glad for any hint. Thank you.
Bogus
for record in grid store with 'fieldName' checkcolumn write
record.set('fieldName',false)
or
record.set('fieldName',true)
it make field selected/deselected
the most simple way is to do it in the store , you can add a new boolean field in the store with default of true to do that , and later just change that boolean in the store and the grid will be reflected with the changes
Basically my problem is splited into 2 parts. There are examples in the ExtJS 4 examples for extending a grid. but they are not working :( I'm using ExtJS 4 in the new recommended mvc application pattern.
Add a first column into a grid with buttons for editing and deleting
The grid is the first tab of a tabpanel. If the edit button is pressed a new tab should be created and bound to the store.
A new button should open a tab with a empty form bound to a store
Has anyone experiences with this? Any working code examples? I appreciate your help! Thx!
I have found a way to add buttons (or more correctly images).
So you need add new column with xtype: 'actioncolumn', and describe each button (image) as item.
E.g.:
...
columns: [
{
text: 'Name',
dataIndex: 'registrant_name',
flex: 1
}, {
xtype: 'actioncolumn',
width: 40,
items: [{
icon: 'path_to_img',
handler: function(grid, rowIndex, colindex) {
alert('click!');
}
}]
}
],
...
Also link on doc page:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Action
I have a toolbar like this:
tbar : {
xtype: 'toolbar',
tooltip: 'Right click to clear',
items: [
{
xtype: 'form',
padding: 2,
height:25
}]
}
My tooltip does not show up. I have done QuickTips.init(). Also, is it possible to include some dynamic text in the tooltip?
In your code, you are attempting to put a toolbar inside of a toolbar. Are you sure that is really what you are trying to do?
Your tooltip probably does not work because tooltip is not a valid property of the toolbar object.
As for dynamically altering the tooltip text, you have the getText(string) method.
According to the ExtJS API documentation, Toolbar does not have a tooltip property. In order to use the tooltip, you'll need to apply the tooltip directly to an HTML element, or use the tooltip on a valid, supported object.
Inside my FormPanel , I have a fieldset with a layout of 'column'.
I have tried several different config properties but i cannot get the label for my textfield to work. It just renders the textbox without a label.
(Obviously, if i make the layout type 'form', i have no issues). The text for the checkboxes shows fine, but the textbox label does not. Can someone point out what is wrong ?
thanks!
xtype:'fieldset',
title:'Transaction Status',
layout: 'column',
style:'margin:5px;'
,height:125//or:'-20', allowBlank:false}
,defaultType: 'checkbox'
,defaults: {
columnWidth: '.32',
border: false
},
items: [{
id:'check1-field',
name: 'check1',
boxLabel: 'DOT'
},{
id:'check2-field',
boxLabel: 'Results Matched',
name: 'check2'
},{
xtype:'textfield',
name: 'testname',
fieldLabel:'This doesnt show'
}
]
Ext Docs for TextField
"This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager."
So, since you have a layout of "column", I don't think it will render.
Best best is probably to place your check boxes in a separate field set below the text entry boxes, or just remove the column layout style and change it to form (the default).
I had the same problem with you..
I solved it using panel xtype.
set your checkboxes becomes the items of a panel.