PDA

View Full Version : creating browser edit window on click on of extjsGrid's column



psdhabekar
29 Aug 2012, 4:05 AM
Is it possible to create small button in extjs grid column which will be visible whenever i click on that column's perticular row and on the click of that button new browser window will be displayed...?


Thanks in advance...

willigogs
29 Aug 2012, 4:51 AM
Of course.

Simply use the column renderer to place whatever element/tags you want in the grid cell, then use the oncellclick event to open a new browser window when that cell or the tags within are clicked.

psdhabekar
29 Aug 2012, 5:04 AM
no no......actually


{
header: "SupplierID",
dataIndex: 'SupplierID',
width: 90,
editor: new Ext.form.TextField({
allowBlank: false
})

}

this is column in my grid and in this column i want to add button which will be visible only when user clicks on that column and after clicking on that button browser window have to be displayed

willigogs
29 Aug 2012, 5:18 AM
Not sure if I'm following your requirement.

In the column code you provided, you already have it setup to operate as a text editor, so upon clicking this cell, you would obviously have the textfield returned. Where would this button then be expected to feature?

Also, would the button appear in each cell of the column, does it appear on clicking the column, or upon clicking the cell?

scottmartin
29 Aug 2012, 7:20 AM
Perhaps you mean a trigger field for the editor?
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.form.TriggerField

If not, please explain your request a little better.

Scott.

psdhabekar
29 Aug 2012, 9:17 PM
Not sure if I'm following your requirement.

In the column code you provided, you already have it setup to operate as a text editor, so upon clicking this cell, you would obviously have the textfield returned. Where would this button then be expected to feature?

Also, would the button appear in each cell of the column, does it appear on clicking the column, or upon clicking the cell?

when i click on cell which is already have it setup to operate as a text editor,so upon cicking on that cell,i should be able to see small button in that text field and on click of that button i want to open new browser window.....
like this.....
http://www.sencha.com/forum/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPQAAAAkCAIAAAAxc4CGAAAEEklEQVR4nO2bX2vTUBjGz6fYN9i36AcQYZdjX2AoiDgGvZpsN7tQ0AtBdtG7Mb2oUgRB5tWYTEUcsxvD1rm1zZp2WZt/TbI2yQL+uQjUmJyTnGZpk9NzHp6LkJycvM/7/prBaMGf5LS8tJjgbqlryuLgiPTIvvqB3uMTcalYcLdOasN0PWVxaIgcrB/I3ZNE7N06qT1T9JTFoSFysH4GNxVxaIhMJNwAJFYktXESjIxTv7tmwkknDTfwKPbOMTrlfWi8GjIYx7dD4kbB7Us9VrhvknSicCc1g3j7DO+K16xMxUkR7uCzGNzRfUG9VqFn5P9hDbkafJbvEma/MhUneAvqXu/71Vee70y8yNBEkSkiezJqUtz6cSYdjwZUZtQUw8+EXEXNADqh8AZlMw5q5DhMQJ+CC0doYyMriawTNZ3E6seZdGwaYs8+hAbf5x6VdhxwpxUHNWzUvcH1vpW4cGDDDa0kss6Q6aA+JFMOd0ivQ9qE053MxsEceQjc8SJjwo2fcdJwYybPIA3hk4PCjR82U3F8y24C90hwQNdPBu7wpNDCJgq352+Rv2Jv3b410DO+VMGrwQGEPILEOMGRQ5+OIgCnAzH+FRheSWSdwbyRSVE3wkeGP+9RacBxsMSREByfpyzO+CJnxwxuSuOML3J2nDm4M+spi0NDZAjcpWIhKbtbJ7hhup6yODRE9tUPlpcWmZmn0kCVxaRcKhZAViVeVtpcuVnfb9a+el2r7tWqe//O1Pf5xkGbK4uXlVKxkGBziHCpWIj7I5hMyFd/8nCnFSxEAIA2VxaaRysbxdmFdZDLozwzt3b38WanfdxpHzO4idNE4c4I6wAAvnGwslGcX936cFgPWVnhOvOrWw83XrE3N4miF+7ZhfXdcu13hH7tls9mF9YV8ZTBTZzohRvk8o7jOM412vagb2iqCHJ5TT1ncBMnquG2bcu2TZQta3Clq4ooMLgJFdVwm2bfNPumeQX1YGDomiR1eAY3oaIcbpdjA+rBQNc1Ueo0GdyEimq4DUM1DFXXFag1TZalC6FVZ3ATKsrhVgxD0XUZak2TZKkttGoMbkJFNdxDiKHu9bqS2LrgzxjchIpquDVN0jQR5Z7aETvNNv8T5PKa2mRwEyeq4ZYlwf2qiSxdeI6F4XGbPz2vfwe5vK7yDG7iRCncrcbBzNza7pd9F+Jmo8JzVfeY56rD47Mf37Z3dmbm1q50gcFNnCiFW2ge3nm0eXv5+Ys376pHn4OuHH2qHH58+3771oNn955sDfoSg5s4UfqtwK7wXe6erBZeR34r8P7Tl/2+aJkqg5s4jR3ubEoRT3sKd6VfmgPFMnu2qdmWZlua45iOY7rHtqXblnFtG7al9xSOwU2c/HCn/tMgZuYx+S8zyfOajJBdEAAAAABJRU5ErkJggg==38346

psdhabekar
29 Aug 2012, 9:51 PM
Perhaps you mean a trigger field for the editor?
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.form.TriggerField (http://docs.sencha.com/ext-js/3-4/#%21/api/Ext.form.TriggerField)

If not, please explain your request a little better.

Scott.

when i click on cell which is already have it setup to operate as a text editor,so upon cicking on that cell,i should be able to see small button in that text field and on click of that button i want to open new browser window.....
like this.....
http://www.sencha.com/forum/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPQAAAAkCAIAAAAxc4CGAAAEEklEQVR4nO2bX2vTUBjGz6fYN9i36AcQYZdjX2AoiDgGvZpsN7tQ0AtBdtG7Mb2oUgRB5tWYTEUcsxvD1rm1zZp2WZt/TbI2yQL+uQjUmJyTnGZpk9NzHp6LkJycvM/7/prBaMGf5LS8tJjgbqlryuLgiPTIvvqB3uMTcalYcLdOasN0PWVxaIgcrB/I3ZNE7N06qT1T9JTFoSFysH4GNxVxaIhMJNwAJFYktXESjIxTv7tmwkknDTfwKPbOMTrlfWi8GjIYx7dD4kbB7Us9VrhvknSicCc1g3j7DO+K16xMxUkR7uCzGNzRfUG9VqFn5P9hDbkafJbvEma/MhUneAvqXu/71Vee70y8yNBEkSkiezJqUtz6cSYdjwZUZtQUw8+EXEXNADqh8AZlMw5q5DhMQJ+CC0doYyMriawTNZ3E6seZdGwaYs8+hAbf5x6VdhxwpxUHNWzUvcH1vpW4cGDDDa0kss6Q6aA+JFMOd0ivQ9qE053MxsEceQjc8SJjwo2fcdJwYybPIA3hk4PCjR82U3F8y24C90hwQNdPBu7wpNDCJgq352+Rv2Jv3b410DO+VMGrwQGEPILEOMGRQ5+OIgCnAzH+FRheSWSdwbyRSVE3wkeGP+9RacBxsMSREByfpyzO+CJnxwxuSuOML3J2nDm4M+spi0NDZAjcpWIhKbtbJ7hhup6yODRE9tUPlpcWmZmn0kCVxaRcKhZAViVeVtpcuVnfb9a+el2r7tWqe//O1Pf5xkGbK4uXlVKxkGBziHCpWIj7I5hMyFd/8nCnFSxEAIA2VxaaRysbxdmFdZDLozwzt3b38WanfdxpHzO4idNE4c4I6wAAvnGwslGcX936cFgPWVnhOvOrWw83XrE3N4miF+7ZhfXdcu13hH7tls9mF9YV8ZTBTZzohRvk8o7jOM412vagb2iqCHJ5TT1ncBMnquG2bcu2TZQta3Clq4ooMLgJFdVwm2bfNPumeQX1YGDomiR1eAY3oaIcbpdjA+rBQNc1Ueo0GdyEimq4DUM1DFXXFag1TZalC6FVZ3ATKsrhVgxD0XUZak2TZKkttGoMbkJFNdxDiKHu9bqS2LrgzxjchIpquDVN0jQR5Z7aETvNNv8T5PKa2mRwEyeq4ZYlwf2qiSxdeI6F4XGbPz2vfwe5vK7yDG7iRCncrcbBzNza7pd9F+Jmo8JzVfeY56rD47Mf37Z3dmbm1q50gcFNnCiFW2ge3nm0eXv5+Ys376pHn4OuHH2qHH58+3771oNn955sDfoSg5s4UfqtwK7wXe6erBZeR34r8P7Tl/2+aJkqg5s4jR3ubEoRT3sKd6VfmgPFMnu2qdmWZlua45iOY7rHtqXblnFtG7al9xSOwU2c/HCn/tMgZuYx+S8zyfOajJBdEAAAAABJRU5ErkJggg==http://www.sencha.com/forum/attachment.php?attachmentid=38346&d=1346304071

scottmartin
29 Aug 2012, 10:15 PM
See if the following will work



Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['name', 'email', 'change'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : '[email protected]', 'change' : 100 },
{ 'name' : 'Bart', 'email' : '[email protected]', 'change' : -20 },
{ 'name' : 'Homer', 'email' : '[email protected]', 'change' : 23 },
{ 'name' : 'Marge', 'email' : '[email protected]', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

var trigger = Ext.create('Ext.form.field.Trigger', {
onTriggerClick: function() {
alert('trigger');
}
});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});

Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : Ext.data.StoreManager.lookup('simpsonsStore'),
columns : [
{ header: 'Name', dataIndex: 'name', editor: trigger },
{ header: 'Email', dataIndex: 'email', flex: 1, editor: { xtype: 'textfield' } },
{ header: 'Change', dataIndex: 'change', editor: { xtype: 'numberfield' } }
],
height : 200,
width : 400,
renderTo : Ext.getBody(),
plugins : [ cellEditing ]
});?


Scott.

psdhabekar
30 Aug 2012, 1:12 AM
See if the following will work



Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['name', 'email', 'change'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : '[email protected]', 'change' : 100 },
{ 'name' : 'Bart', 'email' : '[email protected]', 'change' : -20 },
{ 'name' : 'Homer', 'email' : '[email protected]', 'change' : 23 },
{ 'name' : 'Marge', 'email' : '[email protected]', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

var trigger = Ext.create('Ext.form.field.Trigger', {
onTriggerClick: function() {
alert('trigger');
}
});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});

Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : Ext.data.StoreManager.lookup('simpsonsStore'),
columns : [
{ header: 'Name', dataIndex: 'name', editor: trigger },
{ header: 'Email', dataIndex: 'email', flex: 1, editor: { xtype: 'textfield' } },
{ header: 'Change', dataIndex: 'change', editor: { xtype: 'numberfield' } }
],
height : 200,
width : 400,
renderTo : Ext.getBody(),
plugins : [ cellEditing ]
});?


Scott.

thanks you get it what i want to say..... above code is working fine....but i am using extJS 3.2.1 in this version it is not working and on that cell(column name) i want button which will open new browser window...38349how to do it...if you want i will show you screen of that grid and window...actually it is developed in windows and i want to do it web based

scottmartin
30 Aug 2012, 6:02 AM
My mistake ... here is an ext3 version. It opens a window. I did not understand your requirement for opening a new browser window.



Ext.onReady(function(){
// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});

// manually load local data
store.loadData(myData);

var trigger = new Ext.form.TriggerField({
onTriggerClick: function() {
new Ext.Window({
height: 200,
width: 200,
layout: 'fit',
items: {
xtype: 'grid',
border: false,
columns: [{header: 'World'}],
store: new Ext.data.ArrayStore({})
}
}).show();
}
});

// create the Grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
clicksToEdit: 1,
columns: [
{
id :'company',
header : 'Company',
width : 160,
sortable : true,
dataIndex: 'company',
editor : trigger
},
{
header : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
header : 'Change',
width : 75,
sortable : true,
dataIndex: 'change'
},
{
header : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
renderTo: Ext.getBody()
});

});


Scott.

John Matthews
31 Aug 2012, 1:31 AM
I had a hard time finding this post. I'm glad i'm here finally.

psdhabekar
10 Sep 2012, 4:18 AM
actually on the click of cell of that grid i would like to show to user multiple records and out of that i would to give facility to user to select one record out of multiple records..if there is any other solution to satisfy this requirement you can suggest me...

psdhabekar
10 Sep 2012, 4:20 AM
My mistake ... here is an ext3 version. It opens a window. I did not understand your requirement for opening a new browser window.



Ext.onReady(function(){
// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});

// manually load local data
store.loadData(myData);

var trigger = new Ext.form.TriggerField({
onTriggerClick: function() {
new Ext.Window({
height: 200,
width: 200,
layout: 'fit',
items: {
xtype: 'grid',
border: false,
columns: [{header: 'World'}],
store: new Ext.data.ArrayStore({})
}
}).show();
}
});

// create the Grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
clicksToEdit: 1,
columns: [
{
id :'company',
header : 'Company',
width : 160,
sortable : true,
dataIndex: 'company',
editor : trigger
},
{
header : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
header : 'Change',
width : 75,
sortable : true,
dataIndex: 'change'
},
{
header : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
renderTo: Ext.getBody()
});

});


Scott.


actually on the click of cell of that grid i would like to show to user multiple records and out of that i would to give facility to user to select one record out of multiple records..if there is any other solution to satisfy this requirement you can suggest me...

scottmartin
10 Sep 2012, 4:38 AM
The currently highlighted row? You would have to explain how you would envision this to work ...
selecting a row out of selected rows ...

Scott.

psdhabekar
10 Sep 2012, 9:22 PM
The currently highlighted row? You would have to explain how you would envision this to work ...
selecting a row out of selected rows ...

Scott.

OK i am sorry ...MY MISTAKE.....For example,In my grid there are 3 columns Name,Address and MobileNumber as

Name Address MobileNo
PQR XYZ 1234

when i click on PQR small button should be visible (i attached screenshot of this in our pervious discussion)and clicking on that button new window will open and in that window
there are records as
Name Adress
A abc
B aaa
c LMN
PQR XYZ
here if i select A then i want PQR XYZ should have to replace by A abc in my grid.Thats what i want to do in my grid.that means whenever user changes Name then respective address also have change.
Thanks in advance...

willigogs
10 Sep 2012, 10:45 PM
Can't you just listen for for the rowselect / cellclick event in the window, fire off an Ajax call to update the underlying record set, then load the updated data back into the original grid?

Or alternatively, if it's an editor grid where you wanted to do batch saves - again listen for the rowselect / cellclick events, then update that record?

scottmartin
11 Sep 2012, 4:24 AM
Another issue to consider is that users have a tendency to scroll around in a list of items. You would not want to update the record each time .. a lot of unwanted updated/traffic. Perhaps only after they select update ... this will also help if they decide not to change.

But issuing an ajax call, or updating the record and using sync to update would be the correct approach.

Scott.