1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    asics167 is on a distinguished road

      0  

    Default check box column view in grid Panel

    check box column view in grid Panel


    Hello! please help me.. my Architect 2.1.0 build 678.
    I have gridpanel in my project..
    Code:
     dockedItems: [
                                            {
                                                xtype: 'gridpanel',
                                                dock: 'left',
                                                hidden: false,
                                                id: 'grPanelAlert',
                                                itemId: 'grPanelAlert',
                                                title: 'Оповещения',
                                                store: 'stAlert',
                                                viewConfig: {
                                                    itemId: 'grViewAlert'
                                                },
                                                plugins: [
                                                    Ext.create('Ext.grid.plugin.CellEditing', {
                                                        ptype: 'cellediting',
                                                        clicksToEdit: 1
                                                    })
                                                ],
                                                columns: [
                                                    {
                                                        xtype: 'booleancolumn',
                                                        autoRender: true,
                                                        maxWidth: 30,
                                                        width: 30,
                                                        defaultWidth: 30,
                                                        dataIndex: 'fcheck',
                                                        text: 'Отм.',
                                                        editor: {
                                                            xtype: 'checkboxfield',
                                                            boxLabel: 'Box Label'
                                                        }
                                                    },
                                                    {
                                                        xtype: 'gridcolumn',
                                                        hidden: true,
                                                        dataIndex: 'fSotrId',
                                                        text: 'FSotrId'
                                                    }, .. etc
     ],
                                                selModel: Ext.create('Ext.selection.CellModel',
    with first boolean column.. i want use selection model - cell select.. ( only!)
    grid.png
    i see column with word - true or false ...
    but i want see checkbox..
    i think - cant see checkbox because : xtype: 'booleancolumn',
    instead of xtype: 'checkbox'..
    and only i edit column i can see checkbox

    grid-edit.png

    please help me - i want see checkbox all the time - view and edit

  2. #2
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    asics167 is on a distinguished road

      0  

    Default


    no ideas? up..

  3. #3
    Sencha User
    Join Date
    Oct 2009
    Posts
    42
    Vote Rating
    2
    berntkau is on a distinguished road

      1  

    Default


    Hi asics167!

    This is a problem which has been discussed in several occasions in the past. When I studied the api docs of extjs 4.2 I was happy to see that the previously 'CheckColumn' extension now was incorporated in the framework, but, alas Architech 2.2 does not have any knowing of it. I hope it will be fixed very soon!

    Until then You can try this:

    1. Drag a Grid.column.Column to your project inspector.
    2. Promote it to class and name it e.g. userClassName: CheckColumn, userAlias ChkCol
    3. Create a class override:

    Ext.define('MyApp.view.override.CheckColumn', {
    override: 'MyApp.view.CheckColumn',
    ......
    From the framwork copy the contents of the Ext.grid.column.CheckColumn class.
    starting with line alternateClassName. and paste it here.
    .....
    });

    As the CheckColumn is now a part of the framework I believe that the necessary CSS styles are included in the frameworks CSS-file so it should work.

    Link the overridden column to grids an do appropriate property adjustments like adding the dataIndex . And I hope it will work for you.

  4. #4
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    asics167 is on a distinguished road

      0  

    Default


    hello berntkau
    yesterday the whole day tried to make according to your advice. But I couldn't pass to extJs 4.2 - many Panel Grid in my project lost headings, width of columns and sometimes and visibility. Probably 4.2 it isn't finished yet.
    try on 4.1 - with addition necessary
    css styly in my local file (with images to image/form/checkbox.gif)
    Code:
    .x-grid-cell-checkcolumn  {
      padding-top: 3px !important;
      padding-bottom: 0!important;
      width: 13px;
      height: 13px;
      background: url(image/form/checkbox.gif) 0 0 no-repeat;
    }
    
    /* line 7, ../../../ext-theme-neutral/sass/src/grid/column/CheckColumn.scss */
    .x-grid-checkcolumn {
      width: 13px;
      height: 13px;
      background: url(image/form/checkbox.gif) 0 0 no-repeat;
    }
    .x-grid-cell-special, .x-grid-cell-checkcolumn, .x-action-col-cell {
      vertical-align: top;
    }
    /* line 17, ../../../ext-theme-neutral/sass/src/grid/column/CheckColumn.scss */
    .x-grid-checkcolumn1-checked {
      background-position: 0 -13px;
    }
    and :
    Code:
    1. Drag a Grid.column.Column to your project inspector. 
    2. Promote it to class and name it e.g. userClassName: CheckColumn, userAlias ChkCol
    3. Create a class override:
    
    Ext.define('MyApp.view.override.CheckColumn', {
        override: 'MyApp.view.CheckColumn',
              ......
             From the framwork copy the contents of the Ext.grid.column.CheckColumn class.
             starting with line alternateClassName. and paste it here.
             .....
    });
    - its ok
    but result:
    IMG0055A.jpg

  5. #5
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    asics167 is on a distinguished road

      0  

    Default


    thanks.. iam waiting realy working extJS 4.2 - and real checkbox for grid view in Architect 2.2.??

  6. #6
    Sencha User
    Join Date
    Oct 2009
    Posts
    42
    Vote Rating
    2
    berntkau is on a distinguished road

      0  

    Default


    Quote Originally Posted by asics167 View Post
    thanks.. iam waiting realy working extJS 4.2 - and real checkbox for grid view in Architect 2.2.??

    Hi again asics167!

    Really sorry to hear you didn't get the 'checkcolumn' to work. I've used different workarounds since extjs 3.x and haven't had any problems once I got code and logics in place.

    Some points: The advice I gave was assuming you explicitely use extjs 4.2 as framework in your project.

    If You use any other version of the framework you mentioned 4.1, then I would go to that version and seek the corresponding Ext.ux.CheckColumn class file and copy its content instead into the override you created.

    In my custom css file I would then add the contents from a CheckHeader.css file which is included in a example where checkcolumn is used. Well there isn't so much stuff in there so here it is:
    (this is extjs ver 4.1.3)
    .x-grid-cell-checkcolumn .x-grid-cell-inner {
    padding-top: 4px;
    padding-bottom: 2px;
    line-height: 14px;
    }
    .x-grid-with-row-lines .x-grid-cell-checkcolumn .x-grid-cell-inner {
    padding-top: 3px;
    }
    .x-grid-checkheader {
    height: 14px;
    background-image: url('images/unchecked.gif');
    background-position: 50% -2px;
    background-repeat: no-repeat;
    background-color: transparent;
    }


    .x-grid-checkheader-checked {
    background-image: url('images/checked.gif');
    }


    .x-grid-checkheader-editor .x-form-cb-wrap {
    text-align: center;
    }

    (There seems to have been some bigger changes especially concerning the style classes in extjs 4.2. When I upgraded to 4.2 som of my old styles didn't take effect anymore.)
    Note you have to use simple images unchecked.gif and checked.gif. The url above may not work without adjusting them to your application. You might need to search for them and copy them to a directory of choice.

    If you already have tried this then just ignore my post. If not consider giving it one more try!

    Happy Easter to You!

  7. #7
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    asics167 is on a distinguished road

      0  

    Default


    hello..
    1. add to my css file row from CheckHeader.css (ux exampes)
    2. promote to class my column fCheck - and set UserClassName - CheckColumn, userAlias->ChkCol
    Code:
    Ext.define('MyApp.view.CheckColumn', {
        extend: 'Ext.grid.column.Boolean',
        alias: 'widget.ChkCol',
    
        maxWidth: 100,
        width: 45,
        defaultWidth: 45,
        dataIndex: 'fcheck',
        text: 'Акт.',
        falseText: 'Выкл.',
        trueText: 'Вкл.',
        undefinedText: 'Выкл.',
    
        initComponent: function() {
            var me = this;
    
            me.callParent(arguments);
        }
    
    });
    3. in Launch of Application :
    Code:
    Ext.define('MyApp.view.override.CheckColumn', {
        override: 'MyApp.view.CheckColumn',
        extend: 'Ext.grid.column.Column',
        alias: 'widget.checkcolumn',
    
        /**
        * @cfg {Boolean} [stopSelection=true]
        * Prevent grid selection upon mousedown.
        */
        stopSelection: true,
    
        tdCls: Ext.baseCSSPrefix + 'grid-cell-checkcolumn',
    .... from CheckBox.js - Ux-examle
            return '<div class="' + cls.join(' ') + '"> </div>';
        }
    });
    in FireBug html View i can see style for this cell - override work - class x-grid-cell-checkcolumn was added:
    Code:
    <td class="x-grid-cell-checkcolumn x-grid-cell x-grid-cell-ChkCol-1061   x-grid-cell-last">
    <div class="x-grid-cell-inner " style="text-align: left; ;">
    Выкл.
    </div>
    </td>
    but renderer function from override class - not work and style check - uncheck not add
    Code:
      renderer : function(value){
            var cssPrefix = Ext.baseCSSPrefix,
                cls = [cssPrefix + 'grid-checkheader'];
    
            if (value) {
                cls.push(cssPrefix + 'grid-checkheader-checked');
            }
            console.log( cls); // not in console
            return '<div class="' + cls.join(' ') + '"> </div>';
        }
    have ideas?
    thanks..

  8. #8
    Sencha User
    Join Date
    Oct 2009
    Posts
    42
    Vote Rating
    2
    berntkau is on a distinguished road

      1  

    Default


    Hi again asics167!

    I'm afraid I'm getting short of ideas. But there is actually one more thing to test.

    The only differences from my solution I could see in the information you have given me is the placing of the override code and the type of column that is overridden.

    I did som experimenting and found the following.
    A) I saw you had - or at least you said so - created your override in the launch function. So I tested if it works that way. It did. But if you haven't tried it before, Architect has a special way to handle overrides. After you promoted your column to a class, given the class its user class name and user alias, you can in code view find a button labeled 'Create Override'. This will give you a place to add the override code. If you have several overrides they all will be neatly stored in an override directory under the view directory. I recommend to use this feature.

    This one made a difference in my case! You had used a 'boolean' column as a starting component. So I tried to do the same, and I did get the checkbox to show, but clicking on it didn't work! So the only last idea I have for now is
    1. delete your boolean column override and replace the boolean column with a basic column. Its named Column in the component list in Architect.
    2. Promote to class as earlier and do the renaming.
    3. Click the 'Create Override' button and add the contents from the checkcolumn classes depending on which version of the framework you are using. In ext 4.1 from the line 'alias: ..., in ext 4.2 from the line 'alternateClassName: ...'
    4. select the linked column in your grid and add the dataIndex fieldname.

    If this still doesn't work for you, I'm afraid I've run out of ideas.

    So fingers crossed!
    Good luck!

  9. #9
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    asics167 is on a distinguished road

      0  

    Default thats ok for me!

    thats ok for me!


    many-many thanks.. its real work for me!
    you obstinate master!

  10. #10
    Sencha User
    Join Date
    Aug 2013
    Location
    LA, California
    Posts
    6
    Vote Rating
    0
    Kenw is on a distinguished road

      0  

    Default A simple solution

    A simple solution


    With Sencha Architect 3, there is an easy solution. You can create a basic column or a Boolean column, and then type in "checkcolumn" in "createAlias" configuration. The generated code will have xtype as checkcolumn, which is a real check column. To edit, add a checkbox edit to the field.

    I post this solution here, in case that somebody else also wants to know how to add checkcolumn through SA. I am using SA 3, but SA 2 should allow you to do same thing.

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi