Adding DatePicker and Button via UniSession.AddJS - with Sench ui Touch Theme ?

[andyhill 17]

I have added a DatePickerField, Button and another DatePickerField to a Panel via UniSession.AddJS within the MainmForm.UnimFormReady event.

 

What I want to do is pretty it up by using the Sencha Touch ui Theme - hence why I am doing it via UniSession.AddJS.

 

Can someone advise please - thanks.

 

CODE

  UniSession.AddJS('MainmForm.UnimPanel2.insert(1, '+

  '{ '+

     'xtype: "datepickerfield", '+

     'height: 43, '+

     'padding: 3, '+

     //'color: '+QuotedStr('#33f0ff')+', '+ // MAKES NO DIFFERENCE I want Background Color = clGradientActiveCaption

     'value: new Date(), '+

     'id: "stopDatemID", '+

     'flex: 4, '+

     //'ui: "datepicker", '+ // MAKES NO DIFFERENCE

     'listeners: {change: function(el, v) {ajaxRequest(MainmForm.form, "_stopChange", ["dtIndx=0", "val=" + Ext.Date.format(v, "d/m/Y")])}}'+

  '} );');

 

  UniSession.AddJS('MainmForm.UnimPanel2.insert(2, '+

  '{ '+

     'xtype: "button", '+

     'height: 43, '+

     'padding: 3, '+

     //'ui: "button", '+ // MAKES NO DIFFERENCE

     'text: '+QuotedStr('<>')+', '+

     'id: "syncTodaymID", '+

     'flex: 1, '+

     'listeners: {tap: function(el, v) {ajaxRequest(MainmForm.form, "_syncTodaym", [])}}'+

  '} );');

 

  UniSession.AddJS('MainmForm.UnimPanel2.insert(3, '+

  '{ '+

     'xtype: "datepickerfield", '+

     'height: 43, '+

     //'color: "red", '+ // MAKES NO DIFFERENCE

     //'color: '+QuotedStr('#33f0ff')+', '+ // MAKES NO DIFFERENCE

     'padding: 3, '+

     'value: new Date(), '+

     'id: "startDatemID", '+

     'flex: 4, '+

     //'ui: "datepicker", '+ // MAKES NO DIFFERENCE

     'listeners: {change: function(el, v) {ajaxRequest(MainmForm.form, "_startChange", ["dtIndx=0", "val=" + Ext.Date.format(v, "d/m/Y")])}}'+

  '} );');

 

 

[andyhill 17]

Farshad, can you please show me how to use the Sencha Touch UI Theme with the UniSession.AddJS added components above (the datepicker dropdown is Sencha Touch UI but the closed up datepicker display is not) - thanks

[Sherzod 1132]

Hi,

 

Try to add docked config, for example:

     ...
     'id: "startDatemID", '+
     'flex: 4, '+
     'docked: "top", ' +  //<-------------
     ...

[andyhill 17]

see below

[andyhill 17]

Please see image below

 

 

[andyhill 17]

Farshad, can you please show me how to use the Sencha Touch UI Theme with the UniSession.AddJS added components above to my unimPanel - thanks.

[andyhill 17]

Farshad, I am trying to move forward - please advise.

[Sherzod 1132]

Hi,

 

In your case, should be used a custom css I guess

[andyhill 17]

For the benefit of others, I changed my panel to a toolbar - now they paint the way I want. In the future I will need to know what to add to the CSS (and where) for panels to achieve the same result.

 

Farshad, can you show me how to change the Toolbar's background color please - thanks.