Hybrid View

  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
    40
    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
    40
    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!

Thread Participants: 2

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