1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    64
    Answers
    2
    Vote Rating
    0
    punith.mailme is on a distinguished road

      0  

    Default Answered: custom checkbox for grid.

    Answered: custom checkbox for grid.


    Hi Guys,

    Below is one of the custom grid panel which as 2 checkcolumn for checkbox and another gridcolumn,
    I have to change the CSS for checkbox to override the default checkbox image with a custom image(which i have).

    options.JPG

    1. In column 1 i need to show the chekbox with green symbol and Column 2 i need to show with red symbol.
    2 In a small analysis i found i need to overrride the .x-grid-checkheader and .x-grid-checkheader-checked under chekheader.css

    I am a noob in CSS and dont have much expertise

    3. point now is .x-grid-checkheader-checked class has to perform different ways for 2 different checkcolumn, to show green and red as explained above. So HOW to do this ???

    if i will override .x-grid-checkheader-checked in my css, this will reflect in BOTH the checkbox
    .x-grid-checkheader-checked-want {
    background-image: url('."MYIMAGE");

    But i need to diffrentiate the background-image for checkcolumn1 and checkcolumn2

    4. another alternative i tried here was to addCls() on the checkchange listener for checkbox
    var id = column.getId(); // gridcolumn-1019
    var cells = Ext.DomQuery.select('.x-grid-cell-'+id);

    console.log(cells);
    cells.addCls('x-grid-checkheader-checked-want');

    which turned out not to work.... please help.

    To summarize all the above, i have 2 checkcolumn and want to have a custom checkbox for both. checkcolumn1 will have a new checkbox img for checked showing green and checkcolumn2 will have a new checkbox img for checked showing red.
    For both unchecked will remain as default img from framework.

    Please reply.

    Thanks
    Last edited by punith.mailme; 23 Aug 2012 at 1:14 AM. Reason: updated.

  2. Solved..

    Copied CheckColumn.js from ux folder to my views, modified the renderer function where i have handled to take the record for grid and using id's of checkbox called appropriate styles.

    code from checkcolumn.js
    Code:
    renderer : function(value,metaData, record){
            var cssPrefix = Ext.baseCSSPrefix,
            cls = [cssPrefix + 'grid-checkheader-unchecked'];
            if(record.data.want===true){
                if (value) {
                    cls.push(cssPrefix + 'grid-checkheader-checkedCustomWant');
                }
            }
            else if(record.data.dwant===true){
                if (value) {
                    cls.push(cssPrefix + 'grid-checkheader-checkedCustomDont');
                }
            }
            return '<div class="' + cls.join(' ') + '"> </div>';

  3. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    64
    Answers
    2
    Vote Rating
    0
    punith.mailme is on a distinguished road

      0  

    Default


    Solved..

    Copied CheckColumn.js from ux folder to my views, modified the renderer function where i have handled to take the record for grid and using id's of checkbox called appropriate styles.

    code from checkcolumn.js
    Code:
    renderer : function(value,metaData, record){
            var cssPrefix = Ext.baseCSSPrefix,
            cls = [cssPrefix + 'grid-checkheader-unchecked'];
            if(record.data.want===true){
                if (value) {
                    cls.push(cssPrefix + 'grid-checkheader-checkedCustomWant');
                }
            }
            else if(record.data.dwant===true){
                if (value) {
                    cls.push(cssPrefix + 'grid-checkheader-checkedCustomDont');
                }
            }
            return '<div class="' + cls.join(' ') + '"> </div>';

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar