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]
}]
});
}
});
Related
Let's say I have a concrete view named "view." I would like, at runtime, be able to call Ext.create("view_1") or Ext.create({ xtype: "view_5" }) and they will create instances of "view".
So any xtype matching the regex: /view_[0-9]+/ should create a "view" instead.
Is this possible, if so how?
More details,
We added the ability for our users to create custom reports. They define the menu name, the title, the set of columns, and the data constraint to be used. Each custom report is constructed using the same xtype view.
The problem arise when we save the state for these custom reports. Normally, we use the xtype as key for storage. So if all custom reports are the same xtype they override each other's state.
The direct workaround is to have different xtype for each custom report. So "view_1", "view_5", "view_1008"...view_[0-9]+ are the xtypes associated with custom report #1, custom report #5, custom report #1008...custom report [0-9]+. But they all should be constructed using xtype view.
If we create aliases, we would need to add all reasonable/possible form of view_[0-9]+. I am not sure this approach scales very well when we have more types of dynamic views.
Isn't possible to create a view from regex.
In my opinion, the best way you can do is to set alias as list of strings.
Example:
Ext.define('SomeView', {
alias: ['widget.view_1', 'widget.view_2', 'widget.view_3', 'widget.view_4' ...],
});
Update ( according to the comment ) :
Maybe you want to create multiple views (same definition) with id like:
Ext.create("SomeView", {
id: "view_1",
});
Ext.create("SomeView", {
id: "view_2",
});
Update :
The other way is to override Ext.create function.
Example on https://fiddle.sencha.com/#view/editor&fiddle/32lj
Ext.apply(Ext, {
_create: Ext.create
});
Ext.override(Ext, {
create: function () {
var name = arguments[0],
nameType = typeof name;
if(nameType == 'string'){
let regex = /widget\.viewx_[0-9]+/;
let found = name.match(regex);
if (found) {
name = "widget.viewx";
}
}
return Ext._create(name, arguments[1], arguments[2], arguments[3]);
}
});
And usage:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create("Ext.panel.Panel", {
width: 300,
height: 300,
renderTo: Ext.getBody(),
items: [{
xtype: 'viewx',
fieldLabel: "AA"
}, {
xtype: 'viewx_1',
fieldLabel: "AA"
}, {
xtype: 'viewx_2',
fieldLabel: "AA"
}]
});
}
});
I can't seem to figure out how to do this and google has been no help. I am using the ExtJS Spreadsheet model. I am trying to show the column with the row numbers, but I want to remove/hide the actual row numbers. I only want to keep the column that contain the row numbers. Any ideas on how I might go about doing this?
That should be easily done. As with every column, you have to add a custom renderer to the rownumberer column. So how do you get to that column?
For this, the spreadsheet selModel has a function getNumbererColumnConfig which you want to override. The unoverridden function from sources:
getNumbererColumnConfig: function() {
var me = this;
return {
xtype: 'rownumberer',
width: me.rowNumbererHeaderWidth,
editRenderer: ' ',
tdCls: me.rowNumbererTdCls,
cls: me.rowNumbererHeaderCls,
locked: me.hasLockedHeader
};
},
so, to override, you would do the following:
selModel: {
type: 'spreadsheet',
// Disables sorting by header click, though it will be still available via menu
columnSelect: true,
pruneRemoved: false,
extensible: 'y',
getNumbererColumnConfig: function() {
var me = this;
return {
xtype: 'rownumberer',
width: me.rowNumbererHeaderWidth,
renderer:function() { return ' '; },
editRenderer: ' ',
tdCls: me.rowNumbererTdCls,
cls: me.rowNumbererHeaderCls,
locked: me.hasLockedHeader
};
}
},
Tested in a Sencha fiddle
Explain me important question, please!
I created a Label with list of options:
var labelCombo = Ext.create('Ext.form.Label', {
forId: 'hostT',
text: 'My Awesome Field',
margins: '0 20 0 20'
});
Now I need to change config options by event of other component:
xtype: 'button', text: 'Refresh', handler : function() {
//actions here
}
I tried to change config like so:
Ext.apply(labelCombo, {text: 'New text'})
But without success. Is there possibility to change config options by event?
Considering the you are trying to change the text value of the label..
if you specify "myLabel" as your label's itemId, then you could use
Ext.ComponentQuery.query('#myLabel')[0].setText("New text");
to update text of the label.
I am getting an object using Ext.component.Query. I need to check whether the object exists or not. If object exists, I need to remove the object. Can anybody tell me how to do this?
Thanks
As other posters have mentioned, the method you're looking for is Ext.ComponentQuery, which returns an array which you can then check the length of via length, which will in turn tell you if the object exists or not. If the object exists, it can be destroyed via the destroy() method of the Ext.AbstractComponent
I have made a jsFiddle example demonstrating what you're trying to do here: http://jsfiddle.net/mPYPw/
Code from the fiddle:
Ext.create('Ext.panel.Panel', {
name : 'myPanel',
title: 'Panel 1',
width: 200,
html: '<b>Its a panel!</b>',
renderTo: Ext.getBody()
});
Ext.create('Ext.panel.Panel', {
name : 'myPanel',
title: 'Panel 2',
width: 200,
html: 'Look, another panel!',
renderTo: Ext.getBody(),
dockedItems: [{
xtype: 'toolbar',
dock : 'bottom',
items: [{
text: 'Destroy all panels!',
handler: function(){
// Here we can query for the panels
var panels = Ext.ComponentQuery.query('panel[name=myPanel]'),
trees = Ext.ComponentQuery.query('treepanel');
// #param {Ext.panel.Panel[]} panels Array of panel components
if(panels.length > 0){
alert("About to destroy " + panels.length + " Panels!");
Ext.each(panels, function(panel){
panel.destroy();
});
}
// There are no tree panels
if(!trees.length){
alert("There are no tree panels to destroy!");
}
}
}]
}]
});
Simple check with Ext.ComponentQuery
var check = Ext.ComponentQuery.query('yourXtype');
if (check.length > 0)
//do something
else
//do other something
I know the documentation was messed up on one of the versions... I don't know if it is still the same in Ext JS 4.2, but in 4.1.1 you can query for Ext JS objects by xtype using something similar to this:
Ext.ComponentQuery.query('xtype');
i.e.
Ext.ComponentQuery.query('gridpanel');
I think Ext.ComponentQuery-method-query explains it.
FIRST NOTE THAT Ext.getCmp("id") is suitable for small Apps..
If u tend to hav a big app u could go for a Component Query .
This can be done in two ways Either u could use a "Xtype" or "component Id"(note component id must be prefixed with a #).
I am trying to create my own Date/Time field. I know there are a few that others have made, I'm making my own .
My question is as follows. I want to create a new object, DateTime, which extends Ext.Panel. I specify some properties for width, height, etc but I also specify the values for the items property which will contain a date field and a time field. When I try to actually instantiate the created object, I get an error saying "Object or property not supported". When I go into the error, it seems that the items collection throws an error The code is as follows:
var dateField = new AppealDate({
id: 'dateField',
tabIndex: 0,
fieldLabel: '',
msgTarget: 'under'
});
var timeField = new Ext.form.TimeField({
id: 'timeField',
tabIndex: 0,
fieldLabel: '',
msgTarget: 'under'
});
var DateTime = Ext.extend(Ext.Panel, {
id: '',
xtype: 'panel',
fieldLabel: '',
layout: 'table',
layoutConfig: {
columns: 2
},
items: [dateField, timeField]
});
var dateTimeField = new DateTime(); //this throws an error
Your class is missing initComponent. You also need to render the panel somewhere.
DateTime = Ext.extend(Ext.Panel, {
initComponent: function() {
// define dateField, timeField here.
this.dateField = new AppealDate({
id: 'dateField',
msgTarget: 'under'
});
this.timeField = new Ext.form.TimeField({
id: 'timeField',
msgTarget: 'under'
});
Ext.apply(this, {
items: [this.dateField, this.timeField]
});
DateTime.superclass.initComponent.call(this);
}
});
var dateTimeField = new DateTime();
dateTimeField.render(Ext.get('someDiv'));
As a comment outside of your direct question, "DateTime" is a terrible name for a Panel subclass. You want someone coming along later to know what kind of class they are dealing with -- "DateTimeField" would be much better, based on how you're using it (although that implies a Field subclass as explained below...).
However, note that another potential issue since you are intending to use this Panel as a Field is that a FormPanel is going to expect its form fields to support the Ext.form.Field interface, which your "field" will not (i.e., you won't be able to add your DateTime object into a form's items config). So if your goal is to create a truly reusable component that can be treated as a Field, you're going to want to add methods like getValue, setValue, markInvalid, etc. that internally interact with your constituent fields. It's not a trivial task to get it all working smoothly.
(Not sure if this is your goal, but thought I would mention it since I've gone down this road myself).