I'm trying to set up an Extensible Calendar Pro in my ExtJs 4.1 application, but I still get a name is undefined error.
EDIT:
I solved the original problem, but directly went in another.
Updated code:
Ext.define('ZeuS.view.panels.ZeusMainPanel',{
extend: 'Ext.panel.Panel',
id : 'zeusMainPanel',
alias : 'widget.zeus',
requires : [
'Extensible.Extensible',
'Extensible.calendar.CalendarPanel',
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.data.EventModel',
'Extensible.calendar.view.*'
],
autoShow : true,
layout : 'border',
border : false,
initComponent : function(){
this.items = [{
/*
* Some other Ext Elements
*/
}, {
region : 'east',
xtype : 'extensible.calendarpanel',
name : 'zeus-calendar',
width : 500,
eventStore: Ext.create('Extensible.calendar.data.EventStore', {
data: Ext.create('Extensible.calendar.data.EventModel',{
StartDate: '2101-01-12 12:00:00',
EndDate: '2101-01-12 13:30:00',
Title: 'My cool event',
Notes: 'Some notes'
})
})
}
];
this.callParent(arguments);
}
});
Now it loads all classes correctly when the Extensible singleton is included, but nothing works. I just have a white screen and no functions in the controller or anywhere else are called. When I remove it from the requires list it comes up with this error: Extensible.log is not a function
Do I use the plugin at all right?
Any advice?
Extensible.log is defined on the Extensible singleton, so it should always be available if your dependencies and includes are set up correctly. You really should post in the Extensible forums with additonal details (Ext version, Extensible version, script include markup) as this is basically a product support question.
EDIT: By the way, there is no such thing as Extensible.Extensible, which might be part of your problem. Also you cannot use wildcard requires statements for non-Sencha classes. You might try getting a basic example working first before trying to create a complex layout with it.
Related
I'm working on Ext JS MVC app, that needs to be localized. Trying to reproduce official docs (http://docs.sencha.com/extjs/6.2.0/guides/core_concepts/localization.html).
Locale file load correctly.
Console message:
[W] Overriding existing mapping: 'viewmodel.users' From
'clt.locale.en.view.users.UsersModel' to 'clt.view.users.UsersModel'.
Is this intentional?
but overriding values don't display (they should be grid columns headers.
Model looks like this:
Ext.define('clt.view.users.UsersModel', {
extend: 'Ext.app.ViewModel',
requires:[
// something
],
// singleton: true,
data: {
key1: 'value1',
key2: 'value2',
keyN: 'valueN',
},
stores: {
// something
}
});
Values binding to view like this:
bind: { text: '{key1}' }
If I make this model singleton, localization starts working (grid headers displayed localized values), but grid data is empty.
So, what's the problem? Help me understanding it.
Update. Problem resolved. I found thread on Sencha forum with solution: add localized elements in config object in localization file. Example:
Ext.define('clt.locale.en.view.users.UsersModel', {
override: 'clt.view.users.UsersModel',
config: {
data: {
key1: 'value1',
// some other keys
}
}
});
Warnings are not a good sign. In your case, you don't apply an override like you should. The message
[W] Overriding existing mapping: 'viewmodel.users' From 'clt.locale.en.view.users.UsersModel' to 'clt.view.users.UsersModel'. Is this intentional?
says that first, clt.locale.en.view.users.UsersModel (your localized version) is loaded, and after that, clt.view.users.UsersModel (non-localized version) is loaded and completely replaces the localized version.
What you want to do is the following:
Ext.define('clt.view.users.UsersModel', {
extend: 'Ext.app.ViewModel', // <- EXTEND ViewModel class
// define your locale-agnostic user model here
});
Ext.define('clt.locale.en.view.users.UsersModel', {
override: 'clt.view.users.UsersModel', // <- OVERRIDE implementation in the overridden class
// define your localized properties here.
});
This should remove the warning. Then you can instantiate the UsersModel
Ext.create('clt.view.users.UsersModel', {
but you get a localized version of it.
I just installed a copy of MODX Revolution 2.3.1-pl.
And everything is fine, but comboboxes are empty. I can see that combobox data comes with JSON/AJAX and JSON is correct. But anyway I cannot see a proper values on the combo box.
What's wrong with that?
First create the imaevents.combo.js file here modxcloud\assets\components\yourcomponentFolder\js\mgr\widgets and add this code in imaevents.combo.js:
Imaevents.combo.Event_status = function(config) {
config = config || {};
Ext.applyIf(config,{
store: new Ext.data.ArrayStore({
id: 0
,fields: ['event_status','display']
,data: [
['','Event Status']
,['Normal','Normal']
,['Closed','Closed']
,['Cancelled','Cancelled']
,['Full','Full']
,['Waiting list','Waiting list']
]
})
,mode: 'local'
,displayField: 'display'
,valueField: 'event_status'
});
Imaevents.combo.Event_status.superclass.constructor.call(this,config);
};
Ext.extend(Imaevents.combo.Event_status,MODx.combo.ComboBox);
Ext.reg('imaevents-combo-event_status',Imaevents.combo.Event_status);
Use this combo box by calling the xtype "imaevents-combo-event_status"
{
xtype: 'imaevents-combo-event_status'
,fieldLabel: _('imaevents.event_status')
,name: 'event_status'
,anchor: '100%'
}
Well, I found the problem is in unsupported experimental ES6 features (Chrome flag #enable-javascript-harmony) by the legacy ExtJS 3.X.
See also: Comboboxes are ed up in Chrome
I have a view defined as following:
Ext.define('senchaTest.view.ModelDetailsView', {
extend: 'Ext.Panel',
requires: [
],
xtype: 'modeldetailsview',
config: {
modelName: null
layout: 'vbox',
items: [
{
xtype: 'label',
itemId: 'modelinformationview-name-label'
}]
},
updateModelName: function(modelName) {
var components = Ext.ComponentQuery.query('.modelinformationview #modelinformationview-name-label');
if (components && components.length > 0) {
components[0].setHtml(modelName);
};
}
});
I want to reuse this view in a tab panel. I have two tabs in tab panel. Each will have an instance of the above defined view. However, each will have different data and role.
When I try to set the config values of instances of these views, only one config is used. I understand that this happens because Ext.ComponentQuery queries the same component (For example, '.modelinformationview #modelinformationview-name-label'). It returns two components from each instance of the created views, I pick the first one and use that. Hence only one view is used always.
I want to know how to reuse defined views like this. I have some idea that Controllers can play a role in achieving this. But I haven't yet figured the best way to do it. Please help.
Thanks.
this is an instance of the right modeldetailsview in the updateModelName() function, hence it is as simple as:
updateModelName: function(modelName) {
var component = this.down('[itemId=modelinformationview-name-label]');
component.setHtml(modelName);
}
[EDIT]
I made this example to show you how to reuse components identifying them by itemId: https://fiddle.sencha.com/#fiddle/45o.
I defined the Fiddle.view.Main with two instances of Fiddle.view.Reusable, then in the initialize event of the Main view I get a reference to Main view, and from it I use Ext.Container.getComponent() to get the instances of the components by itemId.
itemId is just a way of identifying an instance of a component without polluting the global id space, and you can use it both to get an item in a container with Ext.Container.getComponent('foo'); like I did in my example, or more generally with componentQuery('[itemId=foo]'); like I did to answer your question.
A simple example :
Ext.define('App.view.Mygrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
itemId: 'myGrid',
}
Then later you can add this by adding it to the items property of a parent like this :
items:
[{ xtype: 'myGrid' }]
Note that you don't need the itemId in this case. The alias property makes it so that you can instantiate views using the alias as an xtype.
Please help understanding why the commented code below does not work on ExtJs 3.4:
var mywin=new Ext.Window({
width : 200,
height: 150,
title : 'Accordion',
layout: 'accordion',
border: false,
items: [
panel1,
panel2
]
}).show();
<!--Ext.getCmp('mywin').add({ - THIS DOES NOT WORK ,while below works-->
mywin.add({
title: 'Appended panel',
id: 'addedPanel',
html : 'Add Me!'
});
mywin.doLayout();
mywin is a reference to a window object that you created. This is just a normal JS construct using variable assignment.
Ext.getCmp('mywin') attempts to look up a component that has an id property of mywin. It's typically a good idea to avoid using Ext.getCmp unless you'll only ever be creating once instance of the component, since it must be globally unique.
Ext.getCmp('x') works only if x is id of some component(Panel or window whatever you want to use). Just provide an id field(id:'component_Id') and use Ext.getCmp on the id of component.
In many scenarios you can also use lookupReference, please check extjs docs for it.
You can try using the following for getting the reference to your window (although you already have it in your mywin variable):
var winInstance = Ext.ComponentQuery.query('mywin')[0];
winInstance.add({
title: 'Appended panel',
id: 'addedPanel',
html : 'Add Me!'
});
But the problem was you were trying to reference your window component using the name of the variable, so like it's mentioned in previous answers, you would need to use an itemId: 'mywin' or id: 'mywin', since as it stands there is really no component with an itemId or id with that name.
I have an Ext TabPanel, and I am trying to set the hidden property for one of the Tabs, programmatically. I am able to select the object and call methods such as disable() and enable() but so far have been unable to find a means by which I can manipulate the Tab's 'hidden' property.
The Tab is defined as
{
id: "view-task",
hidden: false,
title: "View"
}
and the code attempting to manipulate it
twin = ( Ext.getCmp('view-task'));
twin.disable();
The above call to disable works, so the component is being correctly selected but I do not know how to manipulate the hidden property.
Any assistance will be much appreciated.
N. Euzebe
Try this:
var tabs = Ext.createWidget('tabpanel', {
items: [{
itemId: 'home',
contentEl:'script',
title: 'Short Text',
closable: true
}]
});
tabs.child('#home').tab.hide();
You can find this code in examples on the API page
You haven't explained which version of ExtJS you're using. But in version 3.x you can do the following (I don't know, but it might also work in ExtJS 4.x):
var tabPanel = Ext.getCmp('myTabPanel');
var tabToHide = Ext.getCmp('myTab');
tabPanel.hideTabStripItem(tabToHide);
To show the tab again:
tabPanel.unhideTabStripItem(tabToHide);
Hope this helps you :)