I am have formula and want execute it when store in this viewModel is changeData.
When I do this, the formula does not work when data in store changed
stores: {
currentStore: {
extend: 'Ext.store.MyStore',
trackRemoved: false
},
},
formulas: {
'executeWhenStoreChange': {
bind: '{currentStore}',
get: function () {
console.log('store change')
},
If you're looking to fire a function when data changed I would use a datachanged listener to the store(s) you want the event to fire on.
currentStore: {
listeners: {
datachanged: function(store, eOpts) {
console.log('store change');
}
}
},
If you want it for all stores just reference the function in each datachanged listener
currentStoreA: {
listeners: {
datachanged: 'onStoreDataChangeD'
}
},
currentStoreB: {
listeners: {
datachanged: 'onStoreDataChangeD'
}
},
Then in the view controller:
onStoreDataChangeD: function(store, eOpts) {
console.log('store changed');
}
Related
Am new in Ext JS community. Here I want to apply a change event to child component which is 'textfield'.
I have specified the 'onChangeSealNumber' function in the controller. But it's not getting fired.
Can someone help me into it?
I have tried many approaches, however, If I pass anonymous function on change, it will work. But it won't work when we explicitly specify as 'onChangeSealNumber'.
View File
/**
* Search Form Panel View.
* #class 'BulkTransaction.view.searchfrom.SearchForm'
*/
Ext.define('BulkTransaction.view.searchform.SearchForm', {
extend: 'Ext.container.Container',
requires: [
'Common.view.widget.RepeatingWidgetGroup',
'BulkTransaction.view.storagelocation.StorageLocation',
'BulkTransaction.view.searchform.SearchFormController',
],
alias: 'widget.searchform',
controller: 'searchformcontroller',
items: [
{
xtype: 'basepanel',
width: '100%',
reference: 'searchform',
header: false,
items: [
{
width: '100%',
xtype: 'connect-repeating-widget-group',
bind: {
store: '{topSealNumbers}'
},
bindReference: 'topSealNumbers',
widgetConfig: {
xtype: 'textfield',
fieldLabel: BulkTransaction.util.Constants.searchForm.topSealNumbers,
allowBlank: false,
bind: '{topSealNumbers.searchCriteria}',
cls: 'seal-number-field',
listeners: {
change: 'onChangeSealNumber'
}
}
}
]
}
]
});
Controler File
/**
* Controller containing the methods implementing functionality
* related to search form
*/
Ext.define('BulkTransaction.view.searchform.SearchFormController', {
extend: 'Ext.app.ViewController',
alias: 'controller.searchformcontroller',
init: function () {
const me = this;
const viewModel = me.getViewModel();
viewModel.bind({
bindTo: '{topSealNumbers}',
deep: true
}, me.onSearchCriteriaChange, me);
},
/**
* Handle change to the sealnumber details
* #private
*/
onSearchCriteriaChange: function (store) {
const me = this;
let searchCriteriaRecords;
searchCriteriaRecords = store.queryBy(rec =>{
if (!Ext.isEmpty(rec.get('searchCriteria').trim())) {
return rec;
}
});
this.fireEvent('toggleSearchButton', searchCriteriaRecords.length > 0);
},
onSealNumberChange (elm) {
const me = this,
view = me.getView();
}
});
In you controller you need to create a function named onChangeSealNumber something like this
Ext.define('BulkTransaction.view.searchform.SearchFormController', {
extend: 'Ext.app.ViewController',
alias: 'controller.searchformcontroller',
onChangeSealNumber: function(field, newValue, oldValue, eOpts) {
//do something here
},
})
You can try (MyApp - name of your application):
listeners: {change: MyApp.app.getController('SearchFormController').onChangeSealNumber()}
But as for me its not good way to work with controller. More better add into controller (inside init):
init: function (application) {
this.control({
"searchform textfield": {
change: this.onChangeSealNumber
},
});
}
As for identifier I'm not sure because as usually use itemId and name
(like `"#myItemId textfield[name=MyFieldName]"` )
I'm new in extJS and i've been working in an app for some time.
My problem is that I have an app with an MVC architecture and as I instatiate the controller I declare de stores. But when I run this app in the browser, for some reason the controller is trying to get the store from my controller folder.
I have other controllers runing in my app and all of them looks for the store in the stores folder.
Does anyone have a clue about this issue?
Thanks
Ext.define('SGE.controller.staticData.AbstractController', {
extend: 'Ext.app.Controller',
requires: [
'SGE.util.Util'
],
stores: [
'Actors',
'staticData.Categories',
'staticData.Cities',
'staticData.Countries',
'staticData.Languages'
],
views: [
'staticData.AbstractGrid',
'staticData.Actors',
'staticData.Categories',
'staticData.Cities',
'staticData.Countries',
'staticData.Languages'
],
init: function(application) {
this.control({
"staticdatagrid": {
render: this.render,
edit: this.onEdit
},
"staticdatagrid button[itemId=add]": {
click: this.onButtonClickAdd
},
"staticdatagrid button[itemId=save]": {
click: this.onButtonClickSave
},
"staticdatagrid button[itemId=cancel]": {
click: this.onButtonClickCancel
},
"staticdatagrid button[itemId=clearFilter]": {
click: this.onButtonClickClearFilter
},
"staticdatagrid actioncolumn": {
itemclick: this.handleActionColumn
},
"citiesgrid button[itemId=clearGrouping]": {
toggle: this.onButtonToggleClearGrouping
}
});
this.listen({
store: {
'#staticDataAbstract': {
write: this.onStoreSync
}
}
});
if (!Ext.getStore('countries')) {
Ext.create('SGE.store.staticData.Countries');
}
if (!Ext.getStore('languages')) {
Ext.create('SGE.store.staticData.Languages').load();
}
if (!Ext.getStore('actors')) {
Ext.create('SGE.store.staticData.Actors');
}
if (!Ext.getStore('categories')) {
Ext.create('SGE.store.staticData.Categories');
}
},
onStoreSync: function(store, operation, options){
Packt.util.Alert.msg('Success!', 'Your changes have been saved.');
console.log(store);
console.log(operation);
console.log(options);
},
render: function(component, options) {
component.getStore().load();
if (component.xtype === 'citiesgrid' && component.features.length > 0){
if (component.features[0].ftype === 'grouping'){
component.down('toolbar#topToolbar').add([
{
xtype: 'tbseparator'
},
{
xtype: 'button',
itemId: 'clearGrouping',
text: 'Group by Country: ON',
iconCls: 'grouping',
enableToggle: true,
pressed: true
}
]);
}
}
},
onEdit: function(editor, context, options) {
context.record.set('last_update', new Date());
},
onButtonClickAdd: function (button, e, options) {
var grid = button.up('staticdatagrid'),
store = grid.getStore(),
modelName = store.getProxy().getModel().modelName,
cellEditing = grid.getPlugin('cellplugin');
store.insert(0, Ext.create(modelName, {
last_update: new Date()
}));
cellEditing.startEditByPosition({row: 0, column: 1});
},
onButtonClickSave: function (button, e, options) {
button.up('staticdatagrid').getStore().sync();
},
onButtonClickCancel: function (button, e, options) {
button.up('staticdatagrid').getStore().reload();
},
onButtonClickClearFilter: function (button, e, options) {
button.up('staticdatagrid').filters.clearFilters();
},
handleActionColumn: function(column, action, view, rowIndex, colIndex, item, e) {
var store = view.up('staticdatagrid').getStore(),
rec = store.getAt(rowIndex);
if (action == 'delete'){
store.remove(rec);
Ext.Msg.alert('Delete', 'Save the changes to persist the removed record.');
}
},
onButtonToggleClearGrouping: function (button, pressed, options) {
var store = button.up('citiesgrid').getStore();
if (pressed){
button.setText('Group by Country: ON');
store.group('country_id');
} else {
button.setText('Group by Country: OFF');
store.clearGrouping();
}
}
});
Browser response
enter image description here
An ExtJs Controller pulls in the specified store files before rendering its UI. Assuming that you have not created any store files (assumption form your init function where you created the store if they do not exist), it first searches the store files to load them into the memory.
Another possible problem may be the store has a different namespace than that of the application, you will need to specify the full class name as well as define a path in the Loader's paths config or setPath method.
Refer doc ExtJs Controller's Stores.
In my code I use MVC architecture. My view Component looks like this:
Ext.define('calendar.view.event', {
extend: 'Ext.Component',
alias: 'widget.event',
renderTo: Ext.getBody(),
initComponent:function(){
this.addEvents('eventClick');
this.callParent(arguments);
},
afterRender: function() {
this.mon(this.el, 'click', this.eventClick, this); //mon( item, ename, [fn], [scope], [options] ) - zkratka pro addManagedListener.
this.callParent(arguments);
},
eventClick: function (ev, t) {
var height = this.getHeight();
this.fireEvent('eventClick', this, height, ev);
}
});
Im firing Event on click for controller which is like this:
Ext.define('calendar.controller.eventsChange', {
extend: 'Ext.app.Controller',
views: ['event'],
init: function () {
this.control({
'event': {
eventClick: function (callerObject) {
this.editEvent(callerObject)
}
}
});
},
editEvent: function (callerObject) { //oznaci jako editovatelny
callerObject.get
if(callerObject.hasCls('SpecEv') || callerObject.hasCls('activeEvent'))
{
if (callerObject.hasCls('activeEvent'))
{
callerObject.removeCls('activeEvent');
callerObject.addCls('SpecEv');
this.application.fireEvent('reRender');
}
else
{
console.log(callerObject);
callerObject.addCls('activeEvent');
callerObject.removeCls('SpecEv');
Ext.apply(callerObject, {
resizable: {
pinned:true,
dynamic:true
},
draggable: true,
});
callerObject.setLocalX(0);
var parentWidth = Ext.getCmp('SpecEv').getWidth();
callerObject.setWidth(parentWidth);
}
}
}
});
The problem comes when with
Ext.apply(callerObject, {resizable: {
pinned:true,
dynamic:true
},
draggable: true,
});
When console.log shows me the object after my apply, it says draggable:true and resizable:true. Does anyone know where the problem is?
Thanks for reponses.
It can't works, because your code only set configuration properties, which are handled only when component is initializing. So when you set these properties on already constructed object nothing happen. Component resizability and draggability will not be initialized automatically after setting these properties.
You can try use Ext.Component initResizable and initDraggable methods. But these methods are internal and undocumented.
callerObject.initResizable({
pinned:true,
dynamic:true
});
callerObject.initDraggable();
Also you can try setup Ext.util.ComponentDragger and Ext.resizer.Resizer for your existing component manually.
I have a problem with datepicker (Ext.picker.Date) on Extjs. When i select a date in the datepicker i need verify if a store XXX have changes. I check this with the boolean storeChanged, then if the store have changes i need stop the select event. How I can do this?
My current code is:
Ext.define('App.controller.ActivityController', {
extend: 'Ext.app.Controller',
views: [
'App.view.panels.ManagedActivity'
],
storeChanged: false,
init: function() {
this.control({
'ManagedActivity > panel > datepicker': {
select: this.onSelectDatepicker
}
});
},
onSelectDatepicker: function(datepicker, date) {
if(this.storeChanged) {
var store = this.getGridActivity().getStore();
store.load({
params: {
date: Ext.Date.format(date, 'd-m-Y').toString()
}
});
} else {
// how stop the event ??
}
},
});
I define a treepanel. And i try add mask() for waiting tree is loading done. But not working.
Here is my code
Ext.define('Example.example', {
extend: 'Ext.tree.Panel',
alias: 'widget.example',
title: 'example',
store: Ext.create('Ext.data.TreeStore', {
...
listeners: {
'load': function (store, records, success) {
Ext.ComponentQuery.query('example').getEl().unmask(); // not working
},
'beforeload': function (store, options) {
Ext.ComponentQuery.query('example').getEl().mask();// not working
}
}
})
});
How to make that working thank.
EIther use the undocumented ownerTree property:
beforeload: function() {
this.ownerTree.getEl().mask("Loading", 'x-mask-loading');
}
Or register your listeners in a method in order to get the scope:
Ext.define('Example.example', {
// ...
,initComponent: function() {
this.callParent(arguments);
this.getStore().on({
scope: this
,beforeload: function() {
this.getEl().mask("Loading", 'x-mask-loading');
}
});
}
});
try this one Ext.ComponentQuery.query('example').body.mask(); use body instead of getEl()