1. #31
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    This only creates an array of 2 elements:
    Code:
    plugins: [new Ext.ux.plugins.GroupHeaderGrid(), radioButtons]
    You want:
    Code:
    plugins: [new Ext.ux.plugins.GroupHeaderGrid()].concat(radioButtons)

  2. #32
    Ext User Alexey Demchenko's Avatar
    Join Date
    Sep 2008
    Location
    Ukraine, Kyiv
    Posts
    5
    Vote Rating
    0
    Alexey Demchenko is on a distinguished road

      0  

    Default


    Hello Condor,

    You made great plugin, but I have a need to create RadioRow instead of using your RadioColumn. Would you please answer, just basically, what way I should follow to do such thing?

  3. #33
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    The easiest solution is to use a CheckboxSelectionModel with singleSelect:true and change the CSS so the checkbox looks like a radio (you can use the images from this plugin).

  4. #34
    Ext User Alexey Demchenko's Avatar
    Join Date
    Sep 2008
    Location
    Ukraine, Kyiv
    Posts
    5
    Vote Rating
    0
    Alexey Demchenko is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    The easiest solution is to use a CheckboxSelectionModel with singleSelect:true and change the CSS so the checkbox looks like a radio (you can use the images from this plugin).
    Yes, you are right, but it's good for one checkbox column. I just slightly changed your code to get RadioRow plugin.

    PHP Code:
    Ext.grid.RadioRow = function(config){
        
    Ext.apply(thisconfig);
        if(!
    this.id){
            
    this.id Ext.id();
        }
        
    this.renderer this.renderer.createDelegate(this);
    };

    Ext.grid.RadioRow.prototype = {
        
    init : function(grid){
            
    this.grid grid;
            
    this.grid.on('render', function(){
                var 
    view this.grid.getView();
                
    view.mainBody.on('mousedown'this.onMouseDownthis);
            }, 
    this);
        },

        
    onMouseDown : function(et){
            if(
    t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
                
    e.stopEvent();

                var 
    index this.grid.getView().findRowIndex(t);
                var 
    record this.grid.store.getAt(index);

                if(
    record.get(this.dataIndex)) {
                    return;
                }

                for(var 
    0;this.grid.store.getCount(); ++i) {
                        var 
    rec this.grid.store.getAt(i);
                        if(
    rec.get(this.dataIndex)) {
                            
    rec.set(this.dataIndexfalse);
                        }
                        
                }

                
    record.set(this.dataIndextrue);

            }
        },

        
    renderer : function(vprecord){
            
    p.css += ' x-grid3-check-col-td';
            return 
    '<div class="x-grid3-check-col'+ (v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
        }
    }; 

  5. #35
    Ext User DeepikaSaxena's Avatar
    Join Date
    Nov 2009
    Posts
    8
    Vote Rating
    0
    DeepikaSaxena is on a distinguished road

      0  

    Default Radio Button Rendering issue

    Radio Button Rendering issue


    Hi Condor,

    I implemented the RadioColumn Plugin and it is working fine for selecting the radio buttons.
    But i have the following issues.

    1. the Radio button image is not changing on un selecting. the renderer is not being called on un selection.

    2. I could select more than one Radiobutton of a column. Is there any way to restrict this behaviour and make sure that only one button can be selected in a Column.

    Thanks in advance.
    --Deepika

  6. #36
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    - Which Ext version are you using?
    - How did you configure your grid (did you also register the radio columns as plugins?).

    ps. This plugin is for the Ext 2.x and probably needs a few changes for Ext 3.x.

  7. #37
    Ext User DeepikaSaxena's Avatar
    Join Date
    Nov 2009
    Posts
    8
    Vote Rating
    0
    DeepikaSaxena is on a distinguished road

      0  

    Default RadioColumn Rendering issue

    RadioColumn Rendering issue


    Condor,

    Thanks for the quick response.

    I am using Ext 2.2.1 version, and i have i am using the plugin as below.
    Code:
    //Radio Column
    var radioColumn = new Ext.grid.RadioColumn({
    	header   : "Class Leader",
           dataIndex: 'radiocolumnvalue',
    	align: 'center',
           width    : 95
    });	
    
    var cm = new Ext.grid.ColumnModel([
    		radioColumn,
    			
    		{
    			header: "Student Id",
    		 	id:'stuId',
    			width: 150,
    			dataIndex: 'studentId',
    			sortable: false			
    		},
    		{
    			header: "Student Name",
    			id:'stuName',
    			width: 100,
    			dataIndex: 'studentName',
    			sortable: false
    		}	
            
        ]);
    
    // Create the editor grid
        var grid = new Ext.grid.EditorGridPanel({
    		id: 'grd-' + this.id,
    		store       : new Ext.data.JsonStore({
    				  fields: ['radiocolumnvalue','studentId', 'studentName'],
    				  url: this.studentsUrl			
    				}),
            cm          : cm,
            width       :550,
            height      :200,
    	title       :'Class Details',
            frame       :false,
            plugins     :radioColumn
    		
    });
    I referred your example.html and passing same value to radiocolumnvalue from the server.
    The JsonStore data is
    Code:
    {[1,101,"David"],[1,102,"James"],[1,103,"Stephen"],[1,104,"Smith"],[1,105,"Jessica"],[1,106,"Robert"]}
    And The Radio Button status is not changed on selecting/un selecting.
    My Requirement is something like selecting a single student among the group of students, say as Class Represent.

    Thanks.
    --Deepika

  8. #38
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Ah, you misunderstood what this plugin is for!

    It allows one column per row to be checked, not one radio over all rows.

    For that you would use a RowSelectionModel with singleSelect:true or a SingleSelectCheckColumn.

    ps. You might want tweak the css to show a radio instead of a checkbox image.

  9. #39
    Ext User DeepikaSaxena's Avatar
    Join Date
    Nov 2009
    Posts
    8
    Vote Rating
    0
    DeepikaSaxena is on a distinguished road

      0  

    Default singleSelectCheckColumn shows error

    singleSelectCheckColumn shows error


    Condor,
    I have implemented The singleSelectCheckColumn as shown below
    Code:
    var singleSelectCheckColumn =      Ext.extend(Ext.ux.CheckColumn, {
        onMouseDown : function(e, t){
            if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
                e.stopEvent();
                var index = this.grid.getView().findRowIndex(t),
                    dataIndex = this.dataIndex;
                this.grid.store.each(function(record, i){
                    var value = (i == index);
                    if(value != record.get(dataIndex)){
                        record.set(dataIndex, value);
                    }
                });
            }
        }
    });
    
    var cm = new Ext.grid.ColumnModel([
            singleSelectCheckColumn,
                
                {
                    header: "Student Id",
                     id:'stuId',
                    width: 150,
                    dataIndex: 'studentId',
                    sortable: false            
                },
                {
                    header: "Student Name",
                    id:'stuName',
                    width: 100,
                    dataIndex: 'studentName',
                    sortable: false
                }    
            
        ]);
    It didnt work for me, ending up with the error in Firebug
    Code:
    sp is undefined
    http://localhost:8081/studentExample/ext-2.2.1/adapter/ext/ext-base.js
    Line 9.

    Do I need to upgrade my Ext version to 3.X?

    Please help.
    --Deepika

  10. #40
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    For Ext 2.x it would be:
    Code:
    Ext.ns('Ext.ux');
    Ext.ux.SingleSelectCheckColumn = Ext.extend(Ext.CheckColumn, {
        onMouseDown : function(e, t){
            if(Ext.fly(t).hasClass('x-grid3-cc-'+this.id)){
                e.stopEvent();
                var index = this.grid.getView().findRowIndex(t),
                    dataIndex = this.dataIndex;
                this.grid.store.each(function(record, i){
                    var value = (i == index);
                    if(value != record.get(dataIndex)){
                        record.set(dataIndex, value);
                    }
                });
            }
        }
    });
    (assuming you included the Ext.CheckColumn code from ext/examples/grid/edit-grid.js)