i'm using the latest sencha touch release, but found a problem with the datepicker.
This works as expected:
var view=new Ext.field.DatePicker({label:"Test"});
But if I do it in this way:
var view = new Ext.field.DatePicker({
label: "Test",
picker: {
yearTo: "2020"
}
});
Nothing happens if I click on the datepicker-field. After some time the site even "crashs".
I'm using Chrome 26.0.1410.64 m for testing.
Is there maybe a bug within ST 2.2?
Using the new keyword is not the proper way to create a component in Sencha Touch 2.x
Use Ext.create:
var view = Ext.create('Ext.field.DatePicker', {
label: "Test",
picker: {
yearTo: 2020 // without the quotes
}
});
Hope this helps
Related
I am new to sencha and would like to have the indexBar option to a listview which is launched by the selectfield. Tried with
defaultTabletPickerConfig:
{
listeners:
{
painted: function(panel)
{
var list = panel.down('list');
list.setIndexBar(true);
}
}
}
But this code doesn't work, please help.
If you new to sencha please do not use defaultTabletPickerConfig setting.
Please describe more what you want to get, share more code you have written.
The Sencha store is automatically adding a ajax loader mask when populating the store, but I want to hide it since I have made a more generic mask which is shown every time the app does a ajax request.
How can I hide the store load mask? Tried to look in the documentation, but didnt find any appropriate field/method there:
See attachement:
The property exists: loadingText, which you have set to null.
{
xtype: 'list',
store: 'Store',
loadingText: null, // for ST 2.3.0 set it to false
....
}
Cheers, Oleg
Olegtaranenko: Your solution does remove the loadmask, but setting the
loadingText to 'null' also seems to break the "PullToRefresh" plugin
functionality for a list.
By 'break', I mean that after pulling the arrow down to refresh, the
ui remains in this state, and does not hide the PullToRefresh section
at the top.
Is there a way to hide the additional loadmask, while retaining the
ability to pull to refresh?
For anyone that is reading this in future and is trying to achieve what I have described above, I worked around the issue with PullToRefresh by changing the original Sencha touch 1.1.1 code (line 45346 of sencha-touch-debug-with-comments.js). This is not ideal, but provides a quick workaround.
Original (PullToRefresh breaks)
onBeforeLoad: function() {
if (this.isLoading && this.list.store.getCount() > 0) {
this.list.loadMask.disable();
return false;
}
},
Workaround
onBeforeLoad: function() {
if (this.isLoading && this.list.store.getCount() > 0) {
try{ this.list.loadMask.disable(); }
catch(err) { }
return false;
}
},
Just add on your View
viewConfig: {
loadMask: false
}
I have implemented this calendar in my app developed in sencha touch 2.0 and I face a problem.When I run my application source code in a web browser, Calendar works fine. But when I generate the production & package of the app the calendar not work and following issues occur.Moreover these issues also occur when app run in a device:
1): Cell not select in the month view of calendar.
2): Next and Previous not work in the month, week and day view of calendar.
3): This seems to me that on tap events cannot get bind
Example :
this.element.on({
tap: this.onTableHeaderTap,
scope: this,
delegate: 'td'
});
this.element.on({
tap: this.onTimeSlotTap,
scope: this,
delegate: this.getItemSelector()
});
Please help me to get rid of this hurdle.
I shall be very thank full to you.
Create your class obj like this and add this in your child class constructor:
companyCalender = Ext.create('myapp.view.TouchCalendarView',{
viewConfig : {
mode : 'month',
weekStart : 0,
value : new Date()
}
});
Ext.apply(this.initialConfig, config);
Ext.apply(this, config);
myapp.view.CompanyCalender.superclass.constructor.apply(this, arguments);
this.add(companyCalender);
i am trying to make the same app with the miamicode, i am at step 3
http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-3/
i try to make the button that goes to new note (switch to a new screen and create a new note)
the code at the example is this:
onNewNoteCommand: function () {
console.log("onNewNoteCommand");
var now = new Date();
var noteId = (now.getTime()).toString() + (this.getRandomInt(0, 100)).toString();
var newNote = Ext.create("NotesApp.model.Note", {
id: noteId,
dateCreated: now,
title: "",
narrative: ""
});
this.activateNoteEditor(newNote);
}
the activateNotesList function is this :
activateNotesList: function () {
Ext.Viewport.animateActiveItem(this.getNotesListView(), this.slideRightTransition);
on my own example i try just to go the editview without passing data.
so i try this:
onNewNoteCommand:function()
{
var noteEditor = this.getNoteEditor();
// Ext.Viewport.add(noteEditor); also tried this.
Ext.Viewport.setActiveItem(noteEditor);
that code runs with no errors but the screen doesn't change.
any suggestion? whats the difference on add ?
how do i set the viewport (haven't created any custom viewport) to card? is this the problem that setactiveitem doesn't work? any other way to switch between views?
Are there some errors in google chrome browser's console? Ctrl+Shift+J to open.
Also you have to check if noteEditor equals Object or Number.
From sencha docs: setActiveItem( Object/Number activeItem )
I am designing an app in sencha touch2. I have a panel object in my JS file. I need to dynamically set the text/html for this component. The store for this component is defined at the application level. Following is the thing I worked out:
Ext.define('class_name',{
....
config : {
pnlObj : null,
...
}
initialize : function() {
this.config.pnlObj = Ext.create('Ext.Panel');
var store = Ext.data.Storemanager.lookup('some_store');
store.on('load',this.loadStore,this);
this.setItems([{
//some items here
{
flex : 2,
// id : 'somepnl',
config : this.config.pnlObj
}
}]);
},
loadStore : function(store, rec) {
var text = rec.get('text');
var panel = this.config.pnlObj;
// var panel = Ext.getCmp('somepanl');
panel.setHtml(text);
}
});
When I inspect the inspect the element using Firebug console, I can find the panel added there. But I am not able to set the html dynamically. no html text is set there. I tried adding it using panel.add() & panel.setItems() method which doesn't work. If I give an id to that panel(somepanel here) and try to access it using Ext.getCmp('smpanel') then in that case it works fine. I have found that using Ext.getCmp() is not a good practice and want to avoid it as it might somewhere break my code in the future.
I guess the way I am instantiating the panel object is creating some issue. Can someone suggest the best way of doing it?
The recommended way to manipulate your components in Sencha Touch 2 is using controller, through refs and control configs. For example, your panel has a config like this: xtype:'myPanel', then in your controller:
refs: {
myPanel: 'myPanel'
}
control:{
myPanel: {
on_an_event: 'set_html_for_my_panel'
}
}
Lastly, define your function:
set_html_for_my_panel: function()
{
this.getMyPanel().setHtml('my_updated_html');
}
P/S: Behind the scene, Sencha Touch 2 uses Ext.ComponentQuery for refs in controllers