I'm trying to use the "Ext.dataview.List" in my sencha application, but I'm receiving the following error when loading the page that contains the component:
Uncaught Error: [Ext.create] Unrecognized class name / alias: Ext.List
I tried to add multiple requires to the page (Ext.dataview.List, the ones listed in the "Requires" of the component documentation..) but without success. I'm kinda lost on what could be happening, and I haven't found any specific information of what could be the problem. I've never had this problem with another components, just indicating the "xtype" works okay.
Someone has an idea of which can be the problem?
I'm creating the component like this, with sencha version 6.2:
var list = Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
});
There are Two toolkits for EXJS : Classic and Modern. The Classic Toolkit is essentially Ext JS 5’s view layer and is used to create Desktop applications.
The Modern Toolkit is for targeting modern browsers from Desktop to Mobile and, at this stage, is made up of Sencha Touch’s view layer.
Currently there is no "EXt.List" in Classic toolkit. To solve this problem make sure you're using the Modern version or change your approach to your desired result.
Related
I am using golden layout in single page application. Golden layout normal 'open in new window' works pretty well (https://jsfiddle.net/shafaq_kazmi/xs5r6mma/6/)
var myLayout = new GoldenLayout({
content: []
}, $('#layoutContainer'));
myLayout.registerComponent('example', function(container, state) {
container.getElement().html('<h2>Hello World</h2>');
});
myLayout.createDragSource($("#button"), {
type: 'component',
componentName: 'example',
componentState: {
text: 'Button'
}
});
myLayout.init();
But when I am trying to integrate it in SPA, when I popout any widget, the whole application gets loaded in popup window instead of the particular widget. Do I need to have some specific configurations to fix this behavior? How can I achieve the actual popout feature.
Any help on this?
Here is PR which fixed the issue with GL when used with SPA. Use latest js from github and try again
https://github.com/deepstreamIO/golden-layout/pull/152
i have a xtype "checkbox", i want change boxlabel by dynamic
{
xtype:'checkbox',
id: 'abc',
checked: false,
uncheckedValue: '0',
inputValue: 1,
boxLabel: 'change',
name:'abc'
}
i using
Ext.getCmp('abc').setBoxLabel('not working'); // it's not working
or
Ext.getCmp('abc').update('loss checkbox'); // it's working but checkbox's disappear.
How can i do that? thanks
In Ext JS 4.2+ use setBoxLabel()
In Ext JS 4.1+ I've just found this workaround can help:
Ext.getCmp('abc').getEl().down('label.x-form-cb-label').update('New Label')
getBoxLabel should be working (see this jsFiddle).
Maybe what you want to use is fieldLabel and setFieldLabel?
A cleaner approach (IMO)
For ExtJs 4.1.1 (this was officially added in later versions of the framework)
I found the override recommended by Condor https://www.sencha.com/forum/showthread.php?71968-Set-Checkbox-boxLabel-dynamically to be the best option because this works even if the checkbox is not rendered which is not the case in DrakES solution.
Ext.override(Ext.form.Checkbox, {
setBoxLabel: function(boxLabel){
this.boxLabel = boxLabel;
if(this.rendered){
//NOTICE I CHANGED THIS LINE FROM THE ONE IN THE ORIGINAL SENCHA FORUM
this.getEl().down('label.x-form-cb-label').update('New Label');
}
}
});
Now you can use .setBoxLabel() :)
I have an textfield in Sencha Touch 2 and a button. I would like to get the input of the textfield when button is pressed. I tried it with Ext.ComponentQuery, but it didn't work. Have someone an example how to do that?
{
xtype: 'textfield',
cls: 'inputfields',
id: 'title',
},
{
xtype: 'button',
ui: 'action',
name: 'textfieldButton',
handler : function(){
// what should go here ?
}
}
My way of doing it is Ext.getCmp('title').getValue();
Also please refer to the Docs (Docs API). They are really Helpful.
You could do:
var value = Ext.ComponentQuery.query('#title')[0].getValue();
// test by writing in console
console.log(value);
TIP 1: It's helpful to have API reference of Sencha open all the time when you use this framework (likewise for any other framework, programming language etc.). For speed, I suggest downloading it.
TIP 2: In Chrome Ctrl+Shift+I for developer tools; you can access console there.
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.
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 :)