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.
Related
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.
I am using Sencha Touch 2,0,1.
I need to get an element from a View in a Controller.
At the moment I use this method, which get the View correctly, but I am not able to get the Item in the View. I do not get any error just test is undefined.
Any ideas?
In the Controller:
var test = this.getDetailView().items['editButton'];
Code in the View:
Ext.define('XXX.view.DetailView',{
...
items: [
{
xtype: 'button',
text: 'Edit XXX',
ui: 'custom-btn-dwn-timetable',
itemId: 'editButton'
}
],
...
}
There are a couple other ways to get the reference to the edit button. You can wire the edit button as a ref like this:
Ext.define('MyApp.Controller', {
extend: 'Ext.app.Controller',
config: {
refs: {
editButton: '#editButton'
}
},
Then in your controller you can call the automatically generated getterthis.getEditButton() to get the actual edit button component.
Another thing you can do is save the edit button as an instance variable on your view like this:
Ext.define('XXX.view.DetailView',{
...
items: [
this.editButton = Ext.widget{(
xtype: 'button',
text: 'Edit XXX',
ui: 'custom-btn-dwn-timetable',
itemId: 'editButton'
)}
],
...
}
So now to access your button in the controller you have to do: this.getDetailView().editButton
In general, if an element is something you access a lot you should have a saved reference to it, rather than querying the DOM (to avoid unnecessary performance hit). Using Ext.getCmp() is also slower due to execution stack (it has to go through the ComponentManager every single time just to get the reference).
You can use Ext.ComponentQuery in this case to get your button:
Ext.ComponentQuery.query('#editButton')[1];
You could try setting your button id to edit and then
Ext.getCmp('edit').hide();
I cannot change the tabbar titles in a tab Panel.
Edit: I'm working on a test app witch consists in a main tab panel with other three views, similar to the "getting started video" of the sencha-touch documentation.
Now, for localization purposes, I need to change dinamically the labels under the icons of the tab bar, representing the three links to the panels.
In the code below there is my attempt to change the label of the first button by changing the title of the related view, as the label display "Home", that is the title of the view.
I want to do that on the "activate" event of the view.
The result of this code is that if I log the title of the home view, it is changed but the tab bar button label remains the same.
I think that I miss something like "refreshing" the button, but I cannot find anything on this subject on the documentation.
I hope this edit explains better my question.
Here is the code:
Ext.define('lvzMobile.view.Main', {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar'],
xtype: 'main',
config: {
tabBarPosition: "bottom",
items: [
{
xtype: 'homePanel',
id: 'home',
},
{
xtype: 'catalogue',
id: 'catalogue'
},
{
xtype: 'infoPanel',
id: 'info'
}
],
listeners: {
activate: function() {
console.log("activate");
this.getAt(0).setTitle("emoh");
//the title changes but nothing happens in the tabbar...
}
}
}
});
Please, can you help me? I can't understand what's wrong.
The line that says:
this.getAt(0).setTitle('emoh')
…will change the title of your panel, but not the button itself. To change the button text, use:
this.getTabBar().getAt(0).setTitle('emoh')
Here's a fiddle with your code to demonstrate.
While there, here's a tip: use alias: 'widget.main' instead of xtype: 'main'. xtype is for configs, alias is for defining the alias which in turn can be used later with xtype (use prefix widget. to be used as a widget, store. to be used as a store, etc.).
Are there any color picker for extjs (such as photo shop color picker) that developed only on extjs (not in jQuery).
I’m using (Ext.ux.ColorPicker) ux.colorpicker but, it can’t fill my requirement.
Thanks,
Thanuja.
ExtJS has a simple colorpicker.
xtype: 'colorpicker'
From the help:
Ext.create('Ext.picker.Color', {
value: '993300', // initial selected color
renderTo: Ext.getBody(),
listeners: {
select: function(picker, selColor) {
alert(selColor);
}
}
});
You can also look at this one which is more Photoshop-esque and works with Ext JS 4x+, but does require canvas support.
I realize this is an old question. but nevertheless for people looking to have these two libraries play nice... here is what I did. The problem lay in that jscolor expects all the inputs with class "color" to be available on window.load, which is called via jscolor.install(). Of course, ExtJs elements are not available at that time. Try this:
Ext.create("Ext.form.field.Text",{
renderTo: Ext.getBody(),
fieldCls:"color",
name:"TestPost",
listeners: {
afterrender: {
delay:200,
fn:function(item){
jscolor.init();
}
}
}
});
Running jscolor.init() will start it all up. If you like, you can comment out the jscolor.install() call at the bottom of the jscolor.js file, so long as you call jscolor.init() as a listener that runs after the rendering of the textfield you want to be your color picker.
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 :)