1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    2
    rrkhan is on a distinguished road

      1  

    Default How can I add a 'checkcolumn' to a grid in Architect 2?

    How can I add a 'checkcolumn' to a grid in Architect 2?


    I can do this by manually making the following changes to the code and an existing 'gridcolumn':

    add:
    Code:
    Ext.Loader.setPath('Ext.ux', '/ExtJS/examples/ux');
    add:
    Code:
    requires: 'Ext.ux.CheckColumn',
    change column xtype:
    Code:
    xtype: 'checkcolumn'
    Please, how do I do this within Architect 2 itself?

  2. #2
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,264
    Vote Rating
    80
    ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough

      2  

    Default


    You cant use any ux component in SA.

    If you want only to show data, add a column to your grid then copy the renderer method from Ext.ux.CheckColumn to that column:

    Code:
        renderer : function(value){
            var cssPrefix = Ext.baseCSSPrefix,
                cls = [cssPrefix + 'grid-checkheader'];
    
    
            if (value) {
                cls.push(cssPrefix + 'grid-checkheader-checked');
            }
            return '<div class="' + cls.join(' ') + '">&#160;</div>';
        }
    Regards.
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    2
    rrkhan is on a distinguished road

      1  

    Default


    Thanks. This is exactly what I did!

    But now... I have the requirement to edit the data. (I tried setting the editor to a check column... and it essentially works but not as elegantly. You need to click or double-click into the cell, and then when the real edit check box shows up, the value can be changed. Whereas, with the check column, once you click the check box, the value changes.)

    So is my only option "hand" coding this? Or is there another tool I can use?

  4. #4
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,264
    Vote Rating
    80
    ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough

      0  

    Default


    I use Ext.ux.grid.plugin.RowEditing for row editing (http://www.sencha.com/forum/showthre...efull-features), example:

    Code:
    Ext.define('AG.view.override.AutoRespuestasLista', {
    	requires: 'AG.view.AutoRespuestasLista'
    }, function() {
    	Ext.override(AG.view.AutoRespuestasLista, {
    		initComponent : function() {
    			var me = this;
    			var re = Ext.create("Ext.ux.grid.plugin.RowEditing", {
    				clicksToMoveEditor : 2,
    				autoCancel : false,
    				errorSummary : false
    			});
    			Ext.applyIf(me, {
    				plugins: [ re ]
    			});
    			me.rowEditing = re;
    			me.callOverridden(arguments);
    		}
    	});
    });
    Code:
    			columns: [
    				{
    					xtype: 'gridcolumn',
    					dataIndex: 'palabra',
    					editor: {
    						allowBlank: false,
    						maxLength: 15,
    						enforceMaxLength: true,
    						vtype: 'alphanumupper'
    					},
    					text: 'Palabra'
    				},
    				{
    					xtype: 'datecolumn',
    					dataIndex: 'validoDesde',
    					editor: {
    						xtype: 'daterangefield',
    						format: 'd/m/Y',
    						itemId: 'validoDesde',
    						endDateField: 'validoHasta',
    						allowBlank: false
    					},
    					text: 'Valido desde',
    					format: 'd/m/Y'
    				},
    				{
    					xtype: 'datecolumn',
    					dataIndex: 'validoHasta',
    					editor: {
    						xtype: 'daterangefield',
    						format: 'd/m/Y',
    						itemId: 'validoHasta',
    						startDateField: 'validoDesde',
    						allowBlank: false
    					},
    					text: 'Valido hasta',
    					format: 'd/m/Y'
    				},
    				{
    					xtype: 'gridcolumn',
    					sortable: false,
    					dataIndex: 'respuesta',
    					editor: {
    						allowBlank: false,
    						maxLength: 140,
    						enforceMaxLength: true
    					},
    					flex: 1,
    					text: 'Respuesta'
    				}
    			],
    Code:
    <script type="text/javascript" src="app/lib/RowEditing.js"></script>

    x1.png
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  5. #5
    Touch Premium Member msinn's Avatar
    Join Date
    Jul 2009
    Location
    in front of my pc
    Posts
    280
    Vote Rating
    5
    msinn is on a distinguished road

      0  

    Default


    @rrkhan

    in my case it works when I add the renderer to colomn promoted to a class, as @ssamayoa told you, and the rest of the extension in its override. I can not use the event 'checkchange' in SA, just using the store events.
    First I would like to thank you for your time and knowledge

    Win 7 Ext JS 4.1.3 IE(6-9), FF17

  6. #6
    Sencha User
    Join Date
    Dec 2010
    Posts
    23
    Vote Rating
    4
    paulcardo is on a distinguished road

      0  

    Default


    @ssamayoa, @rrkhan

    I was just wondering how to do it, thanks to your post I could show the checkboxes and edit them

  7. #7
    Sencha User
    Join Date
    Feb 2010
    Posts
    11
    Vote Rating
    0
    dariush is on a distinguished road

      0  

    Default


    Hi friend,
    may you send an architect/designer example implementing what you described in that post? not so clear to me how to use the plugin in a grid within architect.
    Best regards,
    Dariush.

  8. #8
    Sencha User
    Join Date
    Dec 2010
    Posts
    23
    Vote Rating
    4
    paulcardo is on a distinguished road

      0  

    Default


    Hi,

    attached sample.zip, what I did based on @ssamayoa post, a check column with cell editing,

    The key points are:
    - column function render()
    - define column editor
    - add folder \css
    - use index.html, it has the reference to the folder \css

    I got what @rrkhan mentioned: You need to click or double-click into the cell, and then when thereal edit check box shows up, the value can be changed
    Attached Files

  9. #9
    Touch Premium Member msinn's Avatar
    Join Date
    Jul 2009
    Location
    in front of my pc
    Posts
    280
    Vote Rating
    5
    msinn is on a distinguished road

      0  

    Default


    @dariush

    1. promote a column to a class

    2. add a renderer to your class, e.g:

    Code:
    Ext.define('Nav.view.CheckColumn', {
        extend: 'Ext.grid.column.Column',
        alias: 'widget.checkcolumn',
    
    
        initComponent: function() {
            var me = this;
    
            me.callParent(arguments);
        },
    
        renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
            var cssPrefix = Ext.baseCSSPrefix,
            cls = [cssPrefix + 'grid-checkheader'];
    
            if (value) {
                cls.push(cssPrefix + 'grid-checkheader-checked');
            }
            return '<div class="' + cls.join(' ') + '"> </div>';
        }
    
    });
    3. override your class, e.g:
    Code:
    Ext.define('Nav.view.override.CheckColumn', {
        requires: 'Nav.view.CheckColumn'
    }, function() {
        Ext.override(Nav.view.CheckColumn, {
        constructor: function() {
            this.addEvents(
                'checkchange'
            );
            this.callParent(arguments);
        },
    
        processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
            if (type == 'mousedown' || (type == 'keydown' && (e.getKey() == e.ENTER || e.getKey() == e.SPACE))) {
                var record = view.panel.store.getAt(recordIndex),
                    dataIndex = this.dataIndex,
                    checked = !record.get(dataIndex);
                record.set(dataIndex, checked);
                this.fireEvent('checkchange', this, recordIndex, checked);
                return false;
            } else {
                return this.callParent(arguments);
            }
        }
        });
    });
    4. add a column to your grid, e.g:
    Code:
    {
    xtype: 'checkcolumn',
    width: 60,
    dataIndex: 'Checked',
    text: 'Header'
    },
    5. how to listen the event 'checkchange' in SA? I did not get it working, but I listen to the store events.

    this works in my case, maybe this helps you too
    First I would like to thank you for your time and knowledge

    Win 7 Ext JS 4.1.3 IE(6-9), FF17

  10. #10
    Sencha User
    Join Date
    Feb 2010
    Posts
    11
    Vote Rating
    0
    dariush is on a distinguished road

      0  

    Default


    thank you guys, let me check&test
    best regards,
    Dariush

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