Friday, May 11, 2012

Open a Extjs Window with text area on click of image / button to save the long information or description

If you have rendered an image or button in column of the grid panel and you want to open a pop up in the form of extjs window onclick of  it.
The window contains an input text area which will allow the user to fill the data.
This text needs to be saved for the field associated with that column.
The following is the code which demonstrates the above mentioned description.




{header: "header", width:110, dataIndex: 'dataField',
                            xtype:'actioncolumn',
                              items: [{
                                 icon:'<image path>',
                                 style: {
                                      marginLeft: '5px'
                                 },
                                 handler: function(grid, rowIndex, colIndex) {
                                    var rec = grid.getStore().getAt(rowIndex);
                                    var descText = rec.get('dataField');
                                    openPopup(descText,rowIndex,rec);
                                 }
                              }]
                         },



       /*
        ** Open Window with text area
        */
        function openPopup(description,rowInd,record){
            var win = new Ext.Window({
                modal       : true,
                height      : 250,
                width       : 260,
                plain       : true,
                border      : false,
                resizable   : false,
                maximizable : false,
                draggable   : true,
                closable    : true,
                closeAction : 'destroy',
                title       : 'Title', 
                autoScroll  : true,
                buttonAlign : 'center',
                items: [{
                    xtype: 'textarea',
                    id :  'textAreaId',
                    value: description,
                    name: 'testing',
                    height: 184,
                    width: 248
                }],
                buttons: [{
                    text     : 'Submit',
                    onClick : function () {
                        // SAVE ACTION
                        try{
                            record.set('<reqd field from store>',Ext.getCmp('textAreaId').getValue());
                            win.destroy();
                        }catch(e){
                            win.destroy();
                        }
                    }                   
                }]
            }).show();

        }

6 comments:

  1. Hi Sandeesh, You post was very helpful to me as I need to do something similar. However, I need a form to pop up when I click on the 'Edit' icon of the actioncolumn. The form that pops up should load the data from the record, allow the user to edit it and when th 'Save' button is clicked show save the data. The grid should then automatically be updated with the edited record. Any tips on how to go about this?

    ReplyDelete
  2. Hi anita,
    Firstly, you can render a page in the ext window (for the form that u mentioned).This can be achieved by using the html property of window.U can open the form in an iframe here.
    Secondly, how to pass the existing grid data for the edited record on this page? If the parameters are less pass it through url as parameters.
    On save btn click(which is on this editable form) save the grid record using record.set('dataIndex')
    You might have to use many Javascript variables here.
    Hope this helps :)

    ReplyDelete
  3. Thanks Sandeesh. But how do I render a page in the ext window? I am rather new to Ext JS.

    ReplyDelete
  4. html: ''

    Please use proper tags. This editor isnt allowing me to enter them

    ReplyDelete
    Replies
    1. It doesnt allow html text here..
      What is ur mail id?

      Delete
  5. anita dot jena at gmail dot com

    ReplyDelete