1. #1
    Sencha User
    Join Date
    Feb 2008
    Posts
    15
    Vote Rating
    0
    Silver Paladin is on a distinguished road

      0  

    Default Checkbox in Grid

    Checkbox in Grid


    Hi everyone.

    I have a datagrid, and what I would like is a checkbox in the grid column.

    Now, I know there is Ext.grid.CheckboxSelectionModel that I can use to put the checkbox in, as well as a couple of user extensions, but they don't do what I want.

    What I would like to see happen is that the checkbox is rendered either checked of cleared depending on data from json. No problem there!

    Next, when a user clicks on the check box, I don't want to select the row, rather I want to send a command to the server to update the data related to that check box. What happens now is that the rows click event is launched (which currently brings up an edit form) and the click on the checkbox is ignored.

    How do I add an onclick to the checkbox that works when a user clicks on the checkbox, but keep my click event on the grid row?

    To get the checkbox to render, I used smart checkbox selection model http://extjs.com/forum/showthread.php?t=37588 but I could not see how to trap a click on the checkbox. When I click on the checkbox now it launches the rows click action.

    Code:
    Ext.namespace('buildersGrid');
    
    buildersGrid.Grid = Ext.extend(Ext.grid.GridPanel, {
        gridLimit: 30,
        filter: '',
        initComponent: function(){
            Ext.apply(this, {
                store: new Ext.data.JsonStore({
                    url: 'data/grid.json.php',
                    baseParams: {
                        grid: 'buildersGrid',
                        filter: this.filter,
                        community_id: communityId
                    },
                    method: 'get',
                    root: 'data',
                    id: 'id',
                    autoLoad: false,
                    totalProperty: 'total',
                    fields: [{
                        name: 'id',
                        type: 'int'
                    }, {
                        name: 'name',
                        type: 'string'
                    }, {
                        name: 'showInCommunity',
                        type: 'string'
                    }]
                }),
                columns: [new Ext.grid.SmartCheckboxSelectionModel({
                    header: "Show In " + hopewell.app.getCommunity(),
                    id: 'showInCommunityCB',
                    dataIndex: 'showInCommunity',
    				email: true,
                    width: 125
                }),{
                    id: 'id',
                    dataIndex: 'id',
    				hidden: true
                }, {
                    id: 'name',
                    header: "Builder",
                    sortable: true,
                    dataIndex: 'name'
                }],
                viewConfig: {
                    forceFit: true,
                    autoExpandColumn: 'name'
                },
                tbar: ['Search Builders:', ' ', new Ext.form.TextField({
                    width: 200,
                    id: 'filterField',
                    listeners: {
                        specialkey: {
                            scope: this,
                            fn: function(field, e){
                                if (e.getKey() == e.ENTER) {
                                    this.store.baseParams.filter = field.getValue();
                                    this.store.load({
                                        params: {
                                            start: 0,
                                            limit: this.gridLimit
                                        }
                                    });
                                }
                            }
                        }
                    }
                }), '-', {
                    text: 'Add Builder',
                    tooltip: 'Click to add a builder to the system',
                    handler: function(){
                        popWindow('Add Builder', 'builderForm', 0, this.store);
                    },
                    scope: this,
                    iconCls: 'add'
                }]
            }); // eo apply
            this.bbar = new Ext.PagingToolbar({
                store: this.store,
                displayInfo: true,
                pageSize: this.gridLimit
            });
            // call parent
            buildersGrid.Grid.superclass.initComponent.apply(this, arguments);
        } // eo function initComponent
        ,
        listeners: {
            scope: this,
            rowclick: function(grid, rowIndex, e){
                var record = grid.getStore().getAt(rowIndex);
                var id = record.get('id');
                var label = record.get('name');
                popWindow('Edit ' + label, 'builderForm', id, grid.getStore());
            }
        } // eo listeners
        ,
        onRender: function(){
        
            // call parent
            buildersGrid.Grid.superclass.onRender.apply(this, arguments);
            
            // load the store
            this.store.load({
                params: {
                    start: 0,
                    limit: this.gridLimit
                }
            });
            
        } // eo function onRender
    }); // end of statuses grid
    Ext.reg('buildersGrid', buildersGrid.Grid);
    
    // eof

  2. #2
    Ext User
    Join Date
    Apr 2009
    Posts
    1
    Vote Rating
    0
    kolen is on a distinguished road

      0  

    Default


    Here is modified version of CheckboxSelectionModel that does not apply to selection, but changes record field.

    Code:
    /**
     * Add to ColumnModel and grid's plugins to enable column with checkboxes bound
     * to record's boolean field.
     */
    CheckboxColumn = Ext.extend(Ext.util.Observable, {
        header: '<div class="x-grid3-hd-checker"> </div>',
        width: 20,
        sortable: false,
        dataIndex: 'enabled',
    
        // private
        menuDisabled:true,
        fixed:true,
        id: 'checker',
    
        init: function(grid) {
            this.grid = grid;
            var view = grid.getView();
    
            grid.on('render', function(){
                view.mainBody.on('mousedown', this.onMouseDown, this);
            }, this);
        },
    
        // private
        initEvents : function(){
            Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this);
            this.grid.on('render', function(){
                var view = this.grid.getView();
                view.mainBody.on('mousedown', this.onMouseDown, this);
                Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this);
    
            }, this);
        },
    
        // private
        onMouseDown : function(e, t) {
            var targ = Ext.get(t);
            if(e.button === 0 && targ.hasClass('grid-checkbox')){
                e.stopEvent();
                var row = e.getTarget('.x-grid3-row');
                if(row){
                    var record = this.grid.store.getAt(row.rowIndex);
                    var isChecked = record.get(this.dataIndex);
                    record.set(this.dataIndex, !isChecked);
                }
            }
        },
    
        // private
        renderer : function(v, p, record){
            var checked = v ? ' grid-checkbox-checked' : '';
            return '<div class="grid-checkbox'+checked+'"> </div>';
        }
    });
    css:
    Code:
    .grid-checkbox {
        width:100%;
        height:18px;
        background-position:2px 2px;
        background-repeat:no-repeat;
        background-color:transparent;
         background-image:url(../extjs/resources/images/default/grid/row-check-sprite.gif);
        background-position:2px 2px;
    }
    
    .grid-checkbox-checked {
        background-position:-23px 2px;
    }

  3. #3
    Ext User
    Join Date
    Sep 2010
    Posts
    32
    Vote Rating
    0
    pulkitagarwal is on a distinguished road

      0  

    Default Furthur Complete reading

    Furthur Complete reading


    Only this will not help you :
    Read this :


    http://bytes.com/topic/javascript/an...box-grid-panel

    Also checkColumn does not work for Ext-2.2 i upgraded to 3 and it worked .

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