[Solved] Ext js statictextfield - change text color depending on value

116 Posts

theboxer Reply #1, 14 years, 8 months ago

Hello,

I have window with statictextfield that is displaying numbers only.
What I want is, that the number is not 0 its color is red. When it will be 0, default color.

I tried to post '<span style="red">3</span>' as value (from getProcessor) but it didn't work. <span style="red">3</span> displayed instead of 3 in red color.

Is it possible to do it by layouts, templates, renderers or something like that (not understand theese things...)? [ed. note: TheBoxer last edited this post 14 years, 8 months ago.]

--
John
@theboxer

24,544 Posts

BobRay Reply #2, 14 years, 8 months ago

There are *many* ways to change the color of a bit of text, but we need to know a lot more about your situation in order to help you.

For example, where is the value coming from, where is the "window" coming from, how is the number put into the "window", are any standard MODX snippets involved, and is this in the front end or the manager?

---------------------------------------------------------------------------------------------------------------
PLEASE, PLEASE specify the version of MODX you are using . . . PLEASE!
MODx info for everyone: http://bobsguides.com/MODx.html

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

116 Posts

theboxer Reply #3, 14 years, 8 months ago

Hi Bob, thanks for reply, its window in manager, here is my shorted window definition (full definition is here https://github.com/TheBoxer/BookIt/blob/dev/assets/components/bookit/js/mgr/widgets/board.grid.js)

Bookit.window.NewBook = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        id: 'bookit-window-newbook'
        ,title: _('bookit.newBook')
        ,closeAction: 'close'
        ,width: 500
        ,url: Bookit.config.connectorUrl
        ,baseParams: { 
        	action: 'mgr/bookit/board/saveBook'
        }
        ,fields: [{
        	layout:'column'
               ,border: false
               ,anchor: '100%'
               ,defaults: {
                   labelSeparator: ''
                  ,labelAlign: 'top'
                  ,border: false
                  ,layout: 'form'
                  ,msgTarget: 'under'
               }
            ,items:[{
                columnWidth: .7
                ,items: [{
		            xtype: 'bookit-extra-userlist-live'
		            ,fieldLabel: _('bookit.fullname')
		            ,name: 'fullname'
		            ,width: 300
		            ,listeners: {
		                'select': {fn:this.findUser,scope:this}
		            }
		        },{
		            xtype: 'textfield'
		            ,fieldLabel: _('bookit.phone')
		            ,name: 'phone'
		            ,width: 300
		        },{
		            xtype: 'textfield'
		            ,fieldLabel: _('email')
		            ,name: 'email'
		            ,width: 300
		        }]
            },{
                columnWidth: .3
                ,items: [{
                	xtype: 'statictextfield'
                    ,fieldLabel: _('bookit.credit')
                    ,name: 'credit'
		        },{
                	xtype: 'statictextfield'
                    ,fieldLabel: _('bookit.warnings')
                    ,name: 'warnings'
		        },{
                	xtype: 'statictextfield'
                    ,fieldLabel: _('bookit.debt')
                    ,name: 'debt'
		        }]
            }]
        }]
        ,buttons: [{
            text: config.cancelBtnText || _('cancel')
            ,scope: this
            ,handler: function() { this.close(); }
        },{
            text: config.saveBtnText || _('save')
            ,scope: this
            ,handler: this.submit
        }]
    });
    Bookit.window.NewBook.superclass.constructor.call(this,config);
 
};

Ext.extend(Bookit.window.NewBook,MODx.Window);
Ext.reg('bookit-window-newbook',Bookit.window.NewBook);

Values for statixtextfield warnings and some others are filled by newBookWindow.setValues(r.object); called from some ajax request - that's not important...

I tried to post there html code but that didn't work, get same html code on output (like htmlspecialchars was applied).

Again thanks for any help

--
John
@theboxer

24,544 Posts

BobRay Reply #4, 14 years, 8 months ago

I know very little about ext JS (and not that much about JS), but you might try something like this:

style : function() {
   return this.getValue() < 1? 'text-color:red' : 'text-color:blue';
},

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

116 Posts

theboxer Reply #5, 14 years, 8 months ago

Thanks for showing the right way Bob,

I haveto change your code a bit, but you give me a thought

Because the value can change after selecting other values from selectbox (that is in window), I have to do it using this code:

if(r.object.warnings > 0){
    newBookWindow.fp.getForm().getEl().dom[11].style.setProperty('color', 'red');
}else{
    newBookWindow.fp.getForm().getEl().dom[11].style.removeProperty('color');
}

in newBookWindow is instance of that window and dom[11] is field of warnings.

Think that this is not best way, but it works

Again, thanks for your time.

--
John
@theboxer