PDA

View Full Version : Extjs 4.1 grid customization after clicking on a row add a panel with a textfield



sibashis.das
5 Sep 2012, 11:01 PM
I am new to extjs 4 and I have got a problem to customize the grid panel. My application have JSON data to render in a grid. After populate the data when user click on a particular row he need to get an panel (Just like row editing plugin) of a textfield and a button to send the entered text to server through the controller. This data that user entered is not the data of grid column.
I need to know is it possible? And if it is, then how can I make it.
Thanks in advance.

Farish
5 Sep 2012, 11:32 PM
you just need to add a listener on the itemclick event of the grid panel:


grid.on('itemclick', function(view, record, item, index, e, eOpts) {
// create or display panel with textfield and button here (you have the record available here and can do different actions depending on the value of some field in the record)
});

sibashis.das
6 Sep 2012, 12:36 AM
Thanks for your reply. But I can't understand where I put this code. Because I have no instance of that grid in controller, it is render through a different view's handler function. I just send you my code snippet, please give me your suggestion on that.



var value_isforwardisagent="";


Ext.define('Person', {
extend: 'Ext.data.Model',
fields: ['comments']
});




function checkedfunction(chkbx){
console.log ("checked box was clicked");
console.log ("value of isforwardtoagent:"+ value_isforwardisagent);
var panel=Ext.create('Ext.panel.Panel', {
width: 400,
height: 100,
items: [
{
xtype: 'textfield',
fieldLabel: 'Comments',
value: '',
width: 400,
id: 'subject',
name: 'subject',
allowBlank: false
},
{
xtype:'button',
text: 'Send',
action: 'send'
},
{
xtype:'button',
text: 'Cancel',
action: 'cancel'
}
]
});

/* var myWin = new Ext.Window({
id : 'myWin',
height : 100,
width : 400,
title: 'View Annotation',
items : [panel]
});


myWin.show(); */
}


Ext.define('Verint.view.Flags.vContactFlags' , {
extend: 'Ext.grid.Panel',
alias : 'widget.vContactFlags',
hideHeaders: true,
// plugins: [rowEditing],
viewConfig: {
forceFit: true
},
verticalScroller:{
variableRowHeight: true
},

height : 310,
store: 'Verint.store.Flags.sContact',
columns: [
{
header: "Disabled",
dataIndex: 'type',
width: 30,
renderer: function(value, cell)
{
return '<input type="checkbox" name="chbox" onclick="checkedfunction(this)"/>';
}
},
{
header: 'name',
dataIndex: 'name',
width: 145
}/*,
{
text: 'comments',
flex: 1,
dataIndex: 'comments',
field: {
xtype: 'textfield'
}
} */
],
/* plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
], */
//listener for grid itemclick
listeners: {
selectionchange: function(){
console.log ("grid was clicked");
var selection = this.getView().getSelectionModel().getSelection()[0];
console.log ("selection :"+ selection);
var data = this.getSelectionModel().selected.items[0].data;
var name=data.name;
console.log ("name:"+ name);
value_isforwardisagent=data.isforwardtoagent;
console.log ("value of isforwardtoagent:"+value_isforwardisagent);
}
},

selType: 'rowmodel',
renderTo: Ext.getBody()
});


and the instantiation of the view is in another view's handler function. the code is as follows


handler: function() {

console.log ("clicked on contact flag button");
//Showing SendCallInfo form and showing the component according to the permission to JSON
var myWin = new Ext.Window({
id : 'myWin',
height : 370,
width : 300,
title: 'Contact Flags',
items : [
Verint.view.Flags.vContactFlags,

{
xtype: 'button',
text: 'OK',
action: 'ok'
},
//cancel button
{
xtype: 'button',
text: 'Cancel',
scope: this,
handler: this.close
}
]
});

myWin.show();
}


Thanks again in advance :)

Farish
6 Sep 2012, 12:41 AM
you already have a listener for the selectionchange event. you can just add it below or above it in the listeners.

Farish
6 Sep 2012, 12:44 AM
listeners: {
itemclick: function( view, record, item, index, e, eOpts)
{
// do actions here
},
selectionchange: function(){
console.log ("grid was clicked");
var selection = this.getView().getSelectionModel().getSelection()[0];
console.log ("selection :"+ selection);
var data = this.getSelectionModel().selected.items[0].data;
var name=data.name;
console.log ("name:"+ name);
value_isforwardisagent=data.isforwardtoagent;
console.log ("value of isforwardtoagent:"+value_isforwardisagent);
}
},

sibashis.das
6 Sep 2012, 12:46 AM
Thanks a lot for your response. I'm just working on this.:)

sibashis.das
6 Sep 2012, 1:17 AM
Hi Farish,
I have try to implement your code but the panel which i created on the view at top is not show in the item row's next (just like RowEditing Plugin). I think for each item i need a container to put the panel their, so please suggest me how to achieve this. My objective is for user selection on each row it need to show the custom panel and hide it after click on the button ('save') of panel.

My custom panel which will be shown at the next of each row is :



var panel=Ext.create('Ext.panel.Panel', { height: 100, items: [ { xtype: 'textfield', fieldLabel: 'Comments', value: '', id: 'subject', name: 'subject', allowBlank: false }, { xtype:'button', text: 'Send', action: 'send' }, { xtype:'button', text: 'Cancel', action: 'cancel' } ] });

Thanks

Farish
6 Sep 2012, 1:25 AM
its not exactly clear what you want to do on click on row. where will this panel be displayed? you can create a window and put this panel inside the window. when the user presses submit or cancel, then you can hide the window.

sibashis.das
6 Sep 2012, 1:51 AM
@ Farish
I have a grid with data (col1: checkbox, col2: string). i need to show a panel (items : textbox, 'save' button, 'cancel' button) for clicking on a row just floating under the row. this panel's look and feel need to set as just like rowediting plugin of the grid panel. i already trying so many thing to customize the grid rowediting plugin but i have not succeed yet. is there any way to do the same? is rowexpander do it for me. please give your suggestion.

Farish
6 Sep 2012, 2:32 AM
yes you can do it with the rowexpander plugin. but I havent tried using both rowediting and rowexpander plugins in the same grid and you will need some searching to be able to add components in the rowexpander.