I am using extjs datefield
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
items: [{
xtype: 'datefield',
fieldLabel: 'From',
maxValue: new Date()
}, {
xtype: 'datefield',
fieldLabel: 'To',
}]
});
when using this code in extjs 4 it works perfectly to disable all dates after today's date , It done by using maxValue= now Date() .In extjs 5 the user can't select any day after today's date but it is not disable.
How can I disable these dates ??
Thanks in advance
Not sure you can... the invalid days have been given the right classes, and have all the correct setup. But the HTML is different.
In Ext4, the template for rendering a date cell is
'<a role="presentation" hidefocus="on" class="{parent.baseCls}-date" href="#"></a>',
But in Ext5, the template is
'<div hidefocus="on" class="{parent.baseCls}-date"></div>',
The other problem is that the SASS code for the styles still assumes that the cell is a A tag, not a DIV
// include the element name since :hover causes performance issues in IE7 and 8 otherwise
a.#{$prefix}datepicker-date:hover {
color: $datepicker-item-color; // needed to override color for prevday/nextday
background-color: $datepicker-item-hover-background-color;
}
In short, this appears to be a bug in ExtJS 5 - the Javascript widget has been converted, but the CSS isn't. I suggest raising the bug with them.
Related
I've been looking at adding a simple calendar to an ExtJS app and like the features of the tui-calendar.
I've started with just trying to display a month in a panel. I've tried various layouts, length and width configs, but the calendar never fully displays. Here's a fiddle showing the results.
Any ideas what I'm missing?
Thanks in advance,
Gordon
You can use layout: 'fit' on the panel and set the div's width and height to 100% with html style, like <div id="calendar" style="width:100%;height:100%"></div>. This way you:
tell the panel (which has a fixed size) that it will have one child that should occupy all available area,
tell the div which contains the calendar to use 100% of the available place horizontally and vertically.
Ext.create('Ext.panel.Panel', {
renderTo: document.body,
height: 600,
width: 600,
layout: 'fit',
tbar: [{
xtype: 'button',
text: 'Display Calendar',
handler: function (button) {
const container = document.getElementById('calendar');
calendar = new tui.Calendar(container, options);
calendar.setDate('2023-03-01');
}
}],
items: [{
html: '<div id="calendar" style="width:100%;height:100%"></div>',
xtype: 'component'
}]
});
I'd like to note that I am not sure that this way ExtJS will manage the life cycle of the calendar object. I would recommend to keep track of the created calendar object and destroy it when the panel is destroyed. To do so, add a destroy listener event to the panel and destroy the calendar object there.
How can I disable all calendar dates and enable from dynamic array?
For example, I have array
['1.12.21', '25.11.21', '3.12.21', '8.10.21']
I should disable all dates exceptdates from array - how can I do this?
You can use the Ext.form.field.Date disabledDates configuration, and setDisabledDates method to update it, see in the documentation. The array you specify here will be interpreted as a regular expression, so in your case you can set up a negated condition to disable all but some dates.
Try the code below, also this working fiddle. This works in classic toolkit, I don't know how to do it in modern.
Ext.application({
name: 'Fiddle',
launch: function () {
const enabledDatesArray = ['01.10.21', '06.10.21', '15.10.21'];
const disabledDatesRegex = '^(?!'+enabledDatesArray.join('|')+').*$';
Ext.create('Ext.panel.Panel', {
width: 400,
renderTo: Ext.getBody(),
items: [{
xtype: 'datepicker',
format: 'd.m.y',
disabledDates: [disabledDatesRegex]
}]
});
}
});
I want to write a proof-of-concept app along these lines:
View
- a URL text input field at top with Go button
- a big DIV underneath consisting of the rest of the view
Controller
- upon Go pressed, validate the URL text
- set up the URL to the data source
- read data from the data source
- create a nested DIV element for each data, apply CSS rules
- add the element to the big DIV
Model
- define the fields
- define the default ordering
CSS
- define the styles
First, does what I have written above work within ExtJS or will I be fighting the framework? In particular, inserting plain HTML as element nodes.
Second, does anyone know of an existing project under GPL which could act as starting point? So far what I've seen are flashy examples with URLs hard-coded and set to auto-load.
There's nothing scary or otherwise disturbing in what you've written.
Although not much advertised, ExtJS handles custom HTML & CSS pretty well. You can set some using the html or tpl config options. The latter is powered by XTemplates, so you can do loops, etc. When using these options and/or custom CSS, Ext will calculate its layouts around the rendered result, accounting for your custom style automatically. Now, in practice, that's a whole lot of work for the framework, and it doesn't always work as expected, and it won't work at all on some browsers (like not so old IE, of course). One big pitfall you should be aware of is that you should always use integer value in px for your CSS, since if a dimension resolve to a decimal value in px, Ext will choke on that.
That said, since you're apparently going to back your data with a model, you should probably use a dataview. That's a component that let you use custom HTML over a regular Ext store. It then provides goodies for item selection, paging, etc. It's the base class of other advanced data views, like Ext grids.
Regarding URLs, you don't necessarily have to hardcode them in the model's proxy (or elsewhere). You can pass an URL to an existing store's load method (as documented here).
Finally, I don't know of existing projects, but your POC is really straightforward, so here's a fiddle to get you started. The code is not 100% clean, in particular defining everything in a single file, and thus missing all the requires... But it illustrates most of the points you've asked about. Read the docs about the components / methods that are used to learn how to go beyond this.
Here's the fiddle's code:
Ext.define('Foo.model.Item', {
extend: 'Ext.data.Model',
fields: ['name']
});
Ext.define('Foo.view.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onGo: function() {
var view = this.getView(),
url = view.down('textfield').getValue(),
dataview = view.down('dataview'),
store = dataview.getStore();
if (this.isValidUrl(url)) {
store.load({url: url});
} else {
Ext.Msg.alert(
"Invalid URL",
"This URL cannot be loaded here: " + url
);
}
},
// private
isValidUrl: function(url) {
return ['data1.json', 'data2.json'].indexOf(url) !== -1;
}
});
Ext.define('Foo.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
controller: 'main',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
layout: 'hbox',
margin: 3,
defaults: {
margin: 3
},
items: [{
flex: 1,
xtype: 'textfield',
emptyText: "Valid inputs are 'data1.json' or 'data2.json'",
listeners: {
specialkey: function(field, e) {
if (e.getKey() === e.ENTER) {
// custom event, for the fun of it
field.fireEvent('enterkey', field, e);
}
},
// the custom can be bound to controller in "modern ext" way
enterkey: 'onGo'
}
},{
xtype: 'button',
text: "Go",
handler: 'onGo'
}]
},{
flex: 1,
xtype: 'dataview',
margin: '0 6 6 6',
cls: 'my-dataview', // for CSS styling
store: {
model: 'Foo.model.Item',
autoLoad: false
// default proxy is ajax and default reader is json,
// which is cool for us
},
tpl: '<tpl for=".">' + '<div class="item">{name}</div>' + '</tpl>',
itemSelector: '.item'
}]
});
Ext.application({
name : 'Foo',
mainView: 'Foo.view.Main'
});
Some CSS for the data view:
.my-dataview .item {
padding: 1em;
border: 1px solid cyan;
color: magenta;
float: left;
margin: 6px;
width: 100px;
}
And an example JSON response (this is the bare minimum to be functional... read about proxies & reader to go further):
[{
name: 'Foo'
},{
name: 'Bar'
},{
name: 'Baz'
}]
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
I'am trying to display Sencha Touch 2 selectfield with very long option text but text gets truncated with Ellipsis, like Very long option t....
How to display couple lines in one option?
Code:
{
xtype: 'selectfield',
options:[
{
text: 'Very long option I wish to splint into two separate lines',
value: 0
},
{
text: 'Another very long option I wish to splint into two separate lines',
value: 1
}
]
}
I've tried using \n and <br/> but is not working.
There are 3 two ways to do this.
use labelWrap config option set to true.
This will avoid truncating text that appears on selectfield initially. Later when you tap on selectfield; you've two choices. Using picker or list. picker will be used only if you set it to true in usePicker config. If you are on tablet, desktop or mobile default list will be shown containing options. Using labelWrap config will not be usefull if options are displayed in list after tap on selectfield.
Use following CSS override to avoid truncating.
.x-list-item-label{
height: 100% !important;
}
.x-list-label{
white-space: pre-wrap !important;
}
This override along with above mentioned labelWrap config set to true will make both list and selectfield display whole text neatly. But this will override styles that may affect appearance of other lists in your app.
Third approach that can be is to override Ext.field.Select and create custom select field. In this style, you need to just override following method - getTabletPicker that generated the list displayed on tap of selectfield. Code from ST source is as fallows -
getTabletPicker: function() {
var config = this.getDefaultTabletPickerConfig();
if (!this.listPanel) {
this.listPanel = Ext.create('Ext.Panel', Ext.apply({
centered: true,
modal: true,
cls: Ext.baseCSSPrefix + 'select-overlay',
layout: 'fit',
hideOnMaskTap: true,
items: {
xtype: 'list',
store: this.getStore(),
itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + ':htmlEncode}</span>',
listeners: {
select : this.onListSelect,
itemtap: this.onListTap,
scope : this
}
}
}, config));
}
return this.listPanel;
}
Check out the line itemTpl and cls config. Here both options set styles that are defined for list. These will decide the appearance of list displayed on tap of selectfield. This approach might sound dirty. But it's useful, if you want to make some drastic changes in appearance and behaviour.