1. #1
    Ext User
    Join Date
    Aug 2007
    Posts
    99
    Vote Rating
    0
    bcamp1973 is on a distinguished road

      0  

    Default how to place button in grid cell?

    how to place button in grid cell?


    I'm *very* new to ExtJS so i'm just learning the ropes. My Javascript (and programming skills in general) are fairly basic. I'm attempting to build a grid where the last column contains one or more buttons. The data for the grid is being pulled from an xml file. I'm guessing the buttons would be a plugin? How would i accomplish that?

    Here's my xml...

    Code:
    <catalog>
      <attribute>
        <name>First Name</name>
        <type>Text</type>
        <min></min>
        <max>30</max>
        <defaultVal></defaultVal>
        <required>true</required>
        <action></action>
      </attribute>
      <attribute>
        ...
      </attribute>
    </catalog>
    and my javascript...

    Code:
    Ext.onReady(function(){
        Ext.QuickTips.init();
        
        // shorthand alias
        var fm=Ext.form;
    
        // custom column plugin example
        var checkColumn=new Ext.grid.CheckColumn({
           header:"Required?",
           dataIndex:'required',
           width:75
        });
    
        // the column model has information about grid columns
        // dataIndex maps the column to the specific data field in
        // the data store (created below)
        var cm=new Ext.grid.ColumnModel([{
               id:'name',
               header:"Name",
               dataIndex:'name',
               width:220,
               editor:new fm.TextField({
                   allowBlank:false
               })
            },{
               header:"Type",
               dataIndex:'type',
               width:130,
               editor:new Ext.form.ComboBox({
                   typeAhead:true,
                   triggerAction:'all',
                   transform:'type',
                   lazyRender:true,
                   listClass:'x-combo-list-small'
                })
            },{
               header:"Min",
               dataIndex:'min',
               width:50,
               align:'center',
               editor:new fm.TextField({
                   allowBlank:true
               })
            },{
               header:"Max",
               dataIndex:'max',
               width:50,
               align:'center',
               editor:new fm.TextField({
                   allowBlank:true
               })
            },{
               header:"Default",
               dataIndex:'defaultVal',
               width:80,
               align:'left',
               editor:new fm.TextField({
                   allowBlank:true
               })
            },
            checkColumn,
            {
               header:"Action",
               dataIndex:'action',
               width:80,
               align:'left'
            }
        ]);
    
        // by default columns are sortable
        cm.defaultSortable=true;
    
        // this could be inline, but we want to define the Plant record
        // type so we can add records dynamically
        var Attribute=Ext.data.Record.create([
               // the "name" below matches the tag name to read, except "availDate"
               // which is mapped to the tag "availability"
               {name:'name', type:'string'},
               {name:'botanical', type:'string'},
               {name:'type'},
               {name:'min'},
               {name:'max'},
               {name:'defaultVal'},
               {name:'required', type:'bool'},
               {name:'action'}
          ]);
    
        // create the Data Store
        var store=new Ext.data.Store({
            url:'assets/xml/attributes.xml',
            reader:new Ext.data.XmlReader({record:'attribute'}, Attribute),
            sortInfo:{field:'name', direction:'ASC'}
        });
    
        // create the editor grid
        var grid=new Ext.grid.EditorGridPanel({
            store:store,
            cm:cm,
            renderTo:'editor-grid',
            autoWidth:true,
            height:300,
            autoExpandColumn:'name',
            title:'Edit Attributes?',
            frame:true,
            plugins:checkColumn,
            clicksToEdit:1,
    
            tbar:[{
                text:'Add Attribute',
                handler:function(){
                    var p=new Attribute({
                        name:'New Attribute Name',
                        type:'Text',
                        min:0,
                        max:0,
                        defaultVal:'',
                        required:false,
                        action:'?'
                    });
                    grid.stopEditing();
                    store.insert(0, p);
                    grid.startEditing(0, 0);
                }
            }]
        });
    
        // trigger the data store load
        store.load();
    });
    
    Ext.grid.CheckColumn=function(config){
        Ext.apply(this, config);
        if(!this.id){
            this.id=Ext.id();
        }
        this.renderer=this.renderer.createDelegate(this);
    };
    
    Ext.grid.CheckColumn.prototype={
        init:function(grid){
            this.grid=grid;
            this.grid.on('render', function(){
                var view=this.grid.getView();
                view.mainBody.on('mousedown', this.onMouseDown, this);
            }, this);
        },
    
        onMouseDown:function(e, t){
            if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
                e.stopEvent();
                var index=this.grid.getView().findRowIndex(t);
                var record=this.grid.store.getAt(index);
                record.set(this.dataIndex, !record.data[this.dataIndex]);
            }
        },
    
        renderer:function(v, p, record){
            p.css += ' x-grid3-check-col-td'; 
            return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">*</div>';
        }
    };

  2. #2
    Ext User
    Join Date
    Oct 2007
    Posts
    11
    Vote Rating
    0
    mints is on a distinguished road

      0  

    Smile


    I have once puzzled with the problem also. And I found the solution on the forum. the solution is as follows:
    1)Define the button column with renderer when new ColumnModel
    Code:
    {
        header: "Button",
        dataIndex: 'button',
        width: 130,
        renderer: renderBtn
    }
    2)Define the renderder function
    Code:
    function renderBtn(val, p, record) {  
            var contentId = Ext.id();
            createGridButton.defer(1, this, [val, contentId, record]);
            return('<div id="' + contentId + '"></div>');
        }
    function createGridButton(value, contentid, record) {
            new Ext.Button({text: value, handler : function(btn, e) {
                alert("record data="+record.data);
            }}).render(document.body, contentid);
        }
    Wish the code sample will be helpful.

  3. #3
    Ext User
    Join Date
    Nov 2007
    Posts
    16
    Vote Rating
    0
    m0ntassar is on a distinguished road

      0  

    Default


    Just a suggestion : You may want to use icon images, buttons are too blky

  4. #4
    Sencha User
    Join Date
    Oct 2007
    Posts
    585
    Vote Rating
    0
    bhomass is on a distinguished road

      0  

    Default


    is there a sample code on how you then attach action to the button which takes into account the item Id of the grid row?

  5. #5
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Look for the rowactions extension/plugin on www.extjs.eu

  6. #6
    Ext Premium Member
    Join Date
    Mar 2010
    Posts
    42
    Vote Rating
    0
    jasmina is on a distinguished road

      0  

    Default


    Quote Originally Posted by m0ntassar View Post
    Just a suggestion : You may want to use icon images, buttons are too blky
    This is a wonderful work. can you tell me how do i delete a row in the grid. i mean now you have a button again each row. So without selecting an cell in the row i need to delete the row when clicked on the row corresponding to that row.

  7. #7
    Ext JS Premium Member SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    385
    Vote Rating
    8
    SebTardif is on a distinguished road

      0  

    Default


    If we create a component in a renderer are we not responsible to destroy them or that will create a memory leak?

  8. #8
    Ext JS Premium Member
    Join Date
    Aug 2010
    Location
    Troyes, France
    Posts
    183
    Vote Rating
    0
    kyrillos52 is on a distinguished road

      0  

    Default


    Hello,

    To avoid repeating the thread, i post here.
    I'm trying to display buttons in specific cells into a grid thanks to an id.
    I have a JSONArray, called "devices" here, with the id corresponding to the cells:
    Code:
    [{"nom":"test","id":"1"},{"nom":"test","id":"4"},{"nom":"test","id":"6"},{"nom":"test","id":"7"}
    this is myGrid.ui.js:
    Code:
    myGridUi = Ext.extend(Ext.grid.GridPanel,
    {
        title: 'Network Mapping',
        ref: 'mon_grid',
        store: 'DataStore',
        border: false,
        height: 800,
        autowidth: true,
        initComponent: function()
        {
            this.columns =
            [
                {
                    xtype: 'gridcolumn',
                    header: '1',
                    renderer: renderIcon
                },
                {
                    xtype: 'gridcolumn',
                    header: '2',
                    renderer: renderIcon
                },
                {
                    xtype: 'gridcolumn',
                    header: '3',
                    renderer: renderIcon
                }
            ];
            myGridUi.superclass.initComponent.call(this);
        }
    });
    1 actually have this code to read into the JSONArray,
    This is a grid with 3 columns and 3 rows:
    Code:
    // Function spells in each cells of the grid
    function renderIcon(val, p)
    {
        // Define the contentId in order to place buttons into the grid.
        var contentId = Ext.id();
        
        // I define this variable in anoter file to make it global, I can increment it now.
        cellId++;
        
        // Read into devices, the JSONArray:
        Ext.each(devices, function(op)
            {
                if((cellId-1) == op.id)
                {
                    createButton.defer(1, this, [val, contentId, op.nom" "+op.id]);
                    return('<div id="' + contentId + '"></div>');
                }
            }
        );
    }
    
    // Function wich create the button
    function createButton(val, contentid, text)
    {
        new Ext.Button({
            text: text,
            handler: function(btn, e)
            {
                // Action with the button
                var window = new WindowItem
                ({
                    renderTo:    Ext.getBody()
                });
                // Display the new window
                window.show();
            }
        }).render(document.body, contentid);
    }
    My problem is when I use this code, it displays all buttons in one cell.
    It creates graphic errors too.

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