sencha touch: 5 simple questions

Question

I am new to sencha touch and I have some simple questions. I don't need 100% working code as answers, but if someone could point me in the correct direction, this would be great. But keep in mind, sencha touch is new to me. I use sensha touch 1.x.

Let me first explain what my app does. It shows a list with items (fetched from a db via json proxy). You can tap on a item, which shows a form. You can then update or delete the item. On the list screen you can also add a new item. Quite simple :-)

Here are my questions:

1/ Datepickerfield:

In the form there is a datepickerfield . The default format is month/day/year . I live in Europe so the formate should be day/month/year . With slotorder , I can change this. But the field itself still has the wrong format. I tried to fix this with a listener:

change: function() {
this.fieldEl.dom.value = this.getValue().format('d/m/Y'); 
}

This works when selecting a date. But when tapping an item from the list, the datepickerfield remains the wrong format. I tried using other listeners like afterrender , scope , etc. But nothing works.

2/ Numberfields:

In the model I have a field duration . It is of the type time in the sql-table. So the format is hh:mm:ss . In the form I have 3 numberfields . One for the hour, one for the minutes and one for the seconds.

How can I make the field duration split up into 3 parts and filled in the 3 numberfields when tapping an items from the list?

3/ Contextual selectfield

In the form there is a selectfield with values that depend on the user that is logged in. If user 1 is logged in, the values should be x , y , z . If user 2 is logged in, the values should be x , a , b , etc.

So, when opening the form the selectfield should be pre-filled with data. It should call a function from the server to fetch the correct data. How can this be achieved?

4/ Refresh list like twitter

I want the list to fetch additional items when reaching the end (like twitter). I found something on the Internet: PullRefresh plugin. But I can't make it work.

Any ideas?

5/ Style the list

Is it possible to style each item of a list separately? You can use styleHtmlCls , etc but that styles the whole list.

Thanks a lot in advance.

Answer 1

1 - This is easy set:

picker: {
slotOrder: ["day","month","year"]
}

2 - I dont understand 2 give more clarity

3 - You need to use local storage for this

4 - For paging try this link sencha list paging plugin

5 - You cant directly style each item differently but you can define a style for each item in the list by setting its style config

Answer 2

For those who are interested, my solutions.

1/ This code Ext.apply(Ext.util.Format, {defaultDateFormat: 'd/m/Y'}); which sets the format for all the dates in the application.

2/ I created in my model 3 extra fields. It are 3 "convert" fields for the field "duration" which is in format "hh:mm:ss". This is the code (the same for the fields duration_m and duration_s):

name: 'duration_h', 
            convert: function(value, record) 
{
           var duration= record.get('duration'), 
                 splits    = duration.split(":"), 
                 duration_h = splits[0];
           return duration_h;             
} 

In my form I use now 3 numberfields linked to those 3 extra fields. When saving you data you must not forget to do PHP Code: model.set('duration_h', ''); Otherwise those fields are not set in the model and keep being empty.

3/ and 4/ I did not yet solved.