Using ExtJS, how to prevent a component from being rendered into DOM based on a condition? The code would probably be something like this (I'm using Sencha Architect to generate the code, so I'm not 100% familiar with the syntax)
Ext.define('MyApp.view.MyButton', {
extend: 'Ext.button.Button',
text: 'MyButton',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
listeners: {
beforerender: {
fn: me.onButtonBeforeRender,
scope: me
}
}
});
me.callParent(arguments);
},
onButtonBeforeRender: function(component, eOpts) {
if (MyCondition) {
// all good, go on with rendering this component
}
else {
// no good, abort, this component should not be rendered
}
}
});
You can just return false to stop the rendering of the component. Check the docs.
So maybe your function would look something like this:
onButtonBeforeRender: function(component, eOpts) {
if (MyCondition) {
// all good, go on with rendering this component
return true;
}
else {
// no good, abort, this component should not be rendered
return false;
}
}
Related
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 use same listener for several selectors in my controller:
init: function() {
this.control( {
'form combo[name="name1"]': {
afterrender: this.doSmt
},
'form combo[name="name2"]': {
afterrender: this.doSmt
},
'form combo[name="name3"]': {
afterrender: this.doSmt
}
} );
}
Is it possible to simplify this code and list all selectors at once?
try:
'form combo[name=name1], form combo[name=name2], form combo[name=name3]': {
afterrender: this.doSmt
}
it should work.
edit:
don't use " in the property matches!
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()
I'm having some problems binding selected data from a treepanel to a gridpanel.
When I select a node that is a leaf in the tree, I want its children to load in the bound grid below.
My solution to it is to load the entire store at once, then filter the results using the built-in functionality, but I have yet to produce the wanted results. One of the filters are producing what I want, but that's the only one (check the JSFiddle link) - and no errors are thrown.
I have created a demonstration at JSFiddle: http://jsfiddle.net/E3LPa/
I believe the problem is in this controller:
Ext.define('Exxica.controller.CalculationSidebar', {
extend: 'Ext.app.Controller',
models: [
'ResourceGroup',
'ResourceItem'],
stores: [
'ResourceGroups',
'ResourceItems'],
views: [
'ResourceItemsGrid',
'Debug'],
onTeCalculation_RightSidebar_TabPanel_ResourceGroupsSelect: function (model, selected, eOpts) {
var store = this.getStore("ResourceItems");
var item = selected[0];
if (item.get('leaf')) {
if (this.setFilter(item.get('id'), store)) store.reload();
}
},
setFilter: function (f, s) {
var fId = parseInt(f, 10);
console.log(s);
if (fId !== 0) {
s.clearFilter();
s.filter('group_id', fId);
return true;
} else {
return false;
}
},
init: function (application) {
this.control({
"#teCalculation_RightSidebar_TabPanel_ResourceGroups": {
selectionchange: this.onTeCalculation_RightSidebar_TabPanel_ResourceGroupsSelect
}
});
}
});
If anyone could help me figure out what I am doing wrong, that would be greatly appreciated.
Your sidebar class was reloading the store unnecessarily and that was probably screwing things up, try this code which has various fixes to remedy this:
Ext.define('Exxica.controller.CalculationSidebar', {
extend: 'Ext.app.Controller',
models: [
'ResourceGroup',
'ResourceItem'],
stores: [
'ResourceGroups',
'ResourceItems'],
views: [
'ResourceItemsGrid',
'Debug'],
loaded: false,
onTeCalculation_RightSidebar_TabPanel_ResourceGroupsSelect: function (model, selected, eOpts) {
var store = this.getStore("ResourceItems");
var item = selected[0];
if(!this.loaded)
{
store.load();
this.loaded = true;
}
if (item.get('leaf')) {
this.setFilter(item.get('id'), store);
}
else
{
this.setFilter(-1, store);
}
},
setFilter: function (f, s) {
var fId = parseInt(f, 10);
console.log(s);
if (fId !== 0) {
s.clearFilter();
s.filter('group_id', fId);
return true;
} else {
return false;
}
},
init: function (application) {
this.control({
"#teCalculation_RightSidebar_TabPanel_ResourceGroups": {
selectionchange: this.onTeCalculation_RightSidebar_TabPanel_ResourceGroupsSelect
}
});
}
});
I am working on MVC Pattern.
I have two function bellow, one is working and the other is not working. Take a look at my controller code;
Ext.define('MyApp.controller.program', {
extend: 'Ext.app.Controller',
stores: [
'program'
],
deleteWithConfirm: function(button, e, options) {
var viewList = Ext.ComponentQuery.query('#programGrid')[0];
var selection = viewList.getSelectionModel().getSelection()[0];
if(selection)
{
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?',
function(btn, text ) {
if(btn == 'yes') {
console.log('yes clicked');
this.getProgramStore().remove(selection); //console error message: "TypeError: this.getProgramStore is not a function"
this.getProgramStore().sync();
}
if(btn == 'no') {
console.log('no clicked');
}
}
);
}
},
justDelete: function(button, e, options) {
var viewList = Ext.ComponentQuery.query('#programGrid')[0];
var selection = viewList.getSelectionModel().getSelection()[0];
if(selection)
{
this.getProgramStore().remove(selection);
this.getProgramStore().sync();
}
},
init: function(application) {
this.control({
"#tombolHapusProgram": {
click: this.deleteWithConfirm //this is not working
//click: this.justDelete //this is working
}
});
}
});
justDelete function is working good. But when I modify that code, adding a message box confirm, the code is not working even though I defines store.
Would you please show me how to solve this problem?
You need to set the scope for the callback:
Ext.Msg.confirm('A', 'B', function() {
}, this);
Your store instance is bound to the grid anyways so just do the following:
viviewList.getStore().remove(selection)