1. #1
    Sencha Premium Member bpjohnson's Avatar
    Join Date
    Jun 2007
    Location
    Atlanta, GA
    Posts
    46
    Vote Rating
    6
    bpjohnson is on a distinguished road

      0  

    Lightbulb Ext.ux.grid.column.Checkbox

    Ext.ux.grid.column.Checkbox


    Recently we had a client who wanted to display boolean data in their grid as checkboxes. At first we tried the checkbox selection model, and that worked all right for one column, but not for multiples. So here is a quick and dirty checkbox column that has nothing to do with selecting. Enjoy!

    PHP Code:
    Ext.define('Ext.ux.grid.column.CheckBox', {
      
    extend'Ext.grid.column.Template',
      
    alias'widget.checkboxcolumn',
      
    constructor: function(cfg) {
        var 
    me this;
        
    me.tpl = ['<tpl for=".">','placeholder','</tpl>']; // shouldn't
        // ever be used. Ignore it.
        
    var tplChecked Ext.create('Ext.XTemplate', [
          
    '<tpl for=".">',
          
    '<div class="x-field x-form-item x-field-default x-form-cb-checked">',
          
    '<div class="x-form-item-body x-form-cb-wrap" role="presentation">',
          
    '<input class="x-form-field x-form-checkbox" type="button" hidefocus="true" autocomplete="off" aria-checked="false" aria-invalid="false" role="checkbox" data-errorqtip="">',
          
    '</div>',
          
    '</div>',
          
    '</tpl>'
        
    ]);
        var 
    tplUnchecked Ext.create('Ext.XTemplate', [
          
    '<tpl for=".">',
          
    '<div class="x-field x-form-item x-field-default">',
          
    '<div class="x-form-item-body x-form-cb-wrap" role="presentation">',
          
    '<input class="x-form-field x-form-checkbox" type="button" hidefocus="true" autocomplete="off" aria-checked="false" aria-invalid="false" role="checkbox" data-errorqtip="">',
          
    '</div>',
          
    '</div>',
          
    '</tpl>'
        
    ]);

        
    me.callParent(arguments);
        
    me.renderer = function(valueprecord) {
          var 
    data Ext.apply({}, record.datarecord.getAssociatedData());
          if (
    data[me.dataIndex]) {
            return 
    tplChecked.apply(data);
          } else {
            return 
    tplUnchecked.apply(data);
          }
        };

      },
        
    processEvent : function(typeviewcellrecordIndexcellIndexe){
          var 
    me this;
          if (
    type == 'click') {
            var 
    rec view.getStore().getAt(recordIndex);
            
    rec.set(this.dataIndex, (rec.get(this.dataIndex))?false:true);
          } else if (
    type == 'mousedown') {
            return 
    false;
          }
          return 
    me.callParent(arguments);
        }
    }); 
    And an example:

    PHP Code:
    Ext.define('GridItem', {
      
    extend'Ext.data.Model',
      
    fields: [
        { 
    name'id'type'int' },
        { 
    name'name'type'string' },
        { 
    name'foo'type'boolean' },
        { 
    name'bar'type'boolean' },
        { 
    name'baz'type'boolean' },
        { 
    name'ding'type'boolean' }
        ]
      });

    Ext.create('Ext.data.Store', {
      
    storeId'gridStore',
      
    model'GridItem',
      
    data:{
        
    'items': [
          { 
    id1name'Test 1'footruebarfalsebaztruedingfalse },
          { 
    id2name'Test 2'foofalsebarfalsebaztruedingfalse },
          { 
    id3name'Test 3'footruebarfalsebaztruedingtrue },
          { 
    id4name'Test 4'foofalsebarfalsebaztruedingfalse }
        ]
      },
      
    proxy: {
            
    type'memory',
            
    reader: {
                
    type'json',
                
    root'items'
            
    }
      }
    });

    Ext.create('Ext.grid.Panel', {
        
    title'Checkbox Column Test',
        
    storeExt.data.StoreManager.lookup('gridStore'),
        
    columns: [
          {
    header'Name',  dataIndex'name'flex1},
          {
    header'Foo'dataIndex'foo'xtype'checkboxcolumn'width32 },
          {
    header'Bar'dataIndex'bar'xtype'checkboxcolumn'width32 },
          {
    header'Baz'dataIndex'baz'xtype'checkboxcolumn'width32 },
          {
    header'Ding'dataIndex'ding'xtype'checkboxcolumn'width32 }
        ],
        
    height200,
        
    width400,
        
    renderToExt.getBody()
    }); 

  2. #2
    Sencha User jonaldomo's Avatar
    Join Date
    May 2011
    Location
    Kansas City, MO
    Posts
    47
    Vote Rating
    0
    jonaldomo is on a distinguished road

      0  

    Default


    What makes it different from Ext.ux.CheckColumn as seen here: http://dev.sencha.com/deploy/ext-4.0...-editing.html?

    Thanks.

  3. #3
    Sencha Premium Member bpjohnson's Avatar
    Join Date
    Jun 2007
    Location
    Atlanta, GA
    Posts
    46
    Vote Rating
    6
    bpjohnson is on a distinguished road

      0  

    Default


    Quote Originally Posted by jonaldomo View Post
    What makes it different from Ext.ux.CheckColumn as seen here: http://dev.sencha.com/deploy/ext-4.0...-editing.html?
    Apparently not much. That'll teach me to read through all of the uxes in the distribution before going off and writing my own.

  4. #4
    Sencha User jonaldomo's Avatar
    Join Date
    May 2011
    Location
    Kansas City, MO
    Posts
    47
    Vote Rating
    0
    jonaldomo is on a distinguished road

      0  

    Default


    I still appreciate people like you submitting their work in, I was just curious if there was some functionality that I was missing.

  5. #5
    Sencha Premium Member bpjohnson's Avatar
    Join Date
    Jun 2007
    Location
    Atlanta, GA
    Posts
    46
    Vote Rating
    6
    bpjohnson is on a distinguished road

      0  

    Default


    Quote Originally Posted by jonaldomo View Post
    I still appreciate people like you submitting their work in, I was just curious if there was some functionality that I was missing.
    Thanks. It actually did help me learn a bit more about the guts of grids in Ext4. I suppose the only difference is the version in examples requires external CSS, and mine does not as it piggybacks on the form field checkbox CSS.

Thread Participants: 1

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