Results 1 to 10 of 10

Thread: checkbox display and editor in grid

  1. #1

    Default checkbox display and editor in grid

    Hi,

    I have built component like below. Where i want to just display check box to user and when user double clicks the row, checkbox become editable. clicking the checkbox works fine, but when user unticks the checkbox render function check box does not get updates, it remains checked. How do i solve this issue? Any other way to simplify this requirement.

    Code:
     Ext.define('Abc.view.component.grid.RfColumn', {
         extend: "Ext.grid.column.Column",
         text: 'Rv.',
         width: 40,
         dataIndex: 'RF',
         xtype: 'rFColumnGrid',
         renderer: function(value) {
             return "<input class='gridCheckbox'  type='checkbox'" + ((value == 'Y') ? "checked='checked'" : "") + " disabled='disabled'>";
         },
         editor: {
             xtype: 'checkboxEditor'
         }
     });
    
    
    
    
     Ext.define('Abc.view.component.editor.CheckboxEditor', {
        extend: 'Ext.form.field.Checkbox',
        xtype: 'checkboxEditor',
        inputValue : 'Y',
        uncheckedValue: 'N'
    });

  2. #2
    Sencha User
    Join Date
    Apr 2013
    Posts
    908
    Answers
    105

    Default

    Why can't you just use built-in checkcolumn?

  3. #3

    Default

    By default it should be disabled i.e. non editable, when user double clicks on row only it should become editable with other fields. I could achive this only by method i used. If any other please suggest, happy to use it.

  4. #4
    Sencha User
    Join Date
    Apr 2013
    Posts
    908
    Answers
    105

    Default

    You can handle beforecheckchange to prevent user from changing the value.
    Also, you can consider using rowediting plugin which has clicksToEdit config.

  5. #5

    Default

    Yeah i have configured rowediting and clicksto edit to 2. If possible can you show a example for same requirement?

  6. #6

    Default

    I added listener

    listeners: {
    beforecheckchange: function(){
    return false; // disable check
    }
    },

    but checked value never goes off. From backend data comes like Y or N

  7. #7
    Sencha User
    Join Date
    Apr 2013
    Posts
    908
    Answers
    105

    Default

    Here is a simple fiddle for you:
    https://fiddle.sencha.com/#fiddle/1h33

    See if I understand what you are trying to achieve.

  8. #8

    Default

    Hi,

    Thanks for your time .Example is correct, but my interaction with checkbox happens with Y/N instead of true/false. Please see the fiddle
    https://fiddle.sencha.com/#fiddle/1h3t . From back end i get checkbox value as Y/N and when saving data i need to send them as Y/N only. Please see if you can help me on his

  9. #9
    Sencha User
    Join Date
    Apr 2013
    Posts
    908
    Answers
    105

    Default

    Updated version of your fiddle:
    https://fiddle.sencha.com/#fiddle/1h49

  10. #10

    Default

    I used this

    renderer: function(value, metaData, record) {
    var cssPrefix = Ext.baseCSSPrefix,
    cls = [cssPrefix + 'grid-checkcolumn'];


    if (value === 'Y') {
    cls.push(cssPrefix + 'grid-checkcolumn-checked');
    }
    return '<div class="' + cls.join(' ') + '"> </div>';
    },

    which is the better option?

Similar Threads

  1. Grid Editor + checkbox
    By luisoswaldo in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 27 Aug 2011, 3:35 PM
  2. Checkbox in Editor Grid
    By nguyentn in forum Ext GWT: Help & Discussion (1.x)
    Replies: 3
    Last Post: 20 Mar 2010, 3:56 AM
  3. Checkbox list in grid-editor
    By EAREP in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 30 Mar 2008, 1:55 PM
  4. Cannot click a Checkbox in an Editor Grid in Tab
    By JNason in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 31 Jan 2008, 6:27 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •