cssdojodijit.formdojo.gridx

How do I get my css to work correclty for my dojo dijit form button?


dojo requires certain css fields which are the following I believe:

My css:

.configButton .dijitButtonNode { 
  background-image: url(../images/gear16.png); 
  background-position: center center; 
  background-repeat: no-repeat; 
  width: 16px; 
  height: 16px; 
} 

Part of my structure:

                    { id: 'config', field: 'config', name: 'Config', width: '61px', 
                        widgetsInCell: true, 
                        navigable: true, 
                        allowEventBubble: true, 
                        decorator: function(){ 
                                //Generate cell widget template string 
                                return [ 
                                        '<button data-dojo-type="dijit.form.Button" ', 
                                        'data-dojo-attach-point="btn3" ', 
                                        'class="configButton" ', 
                                        'data-dojo-props="onClick: function(){', 
                                                'alert(\'Configuration\');', 
                                        '}"></button>' 
                                ].join(''); 
                        }, 
                        setCellValue: function(data){ 
                                //"this" is the cell widget 
                                this.btn3.set('label3', data); 
                        } 
                    } 

I cannot get my button to work correctly, specifically the icon image. I only get a collapsed button within my GridX cell.


Solution

  • Try this code:

    setCellValue: function(gridData, storeData, cellWidget){
           cellWidget.btn3.set('label3', data);
    }