{
text: "current",
renderer:function (value, metaData, record, rowIdx, colIndex ){
return record.data.Resource[(colIndex-6)/2].current;
},
editor:{
xtype:'numberfield',
listeners:{
change:{
fn:function(me, newValue, oldValue, eOpts){
var form = this.up('form').getForm();
//here I want to get the index of current column
// form._record.data.Resource[colIdx].current=newValue;
}
}
}
}
}
In the function of event 'change' I want to get the index of my column where is my editor then the current column.
the word current is the name of my column.
and here my example :http://jsfiddle.net/D5UsU/32/
Thanx.
Can't see an elegant solution right now (though I doubt it is possible without overrides or thick derived classes). As a quick workaround I would suggest to mark your subcolumns with some additional field, say "subcolumn". Then you will be able to read it and identify which subcolumn triggered the change event:
editor: {
xtype: 'numberfield',
subcolumn: 1,
listeners: {
change: function (me, newValue, oldValue, eOpts) {
var form = this.up('form').getForm();
// use me.subcolumn here
}
}
}
Related
I added an actioncolumn to my grid, and i am trying to get a grid value when it is pushed.
this is my actioncolumn:
xtype: 'actioncolumn',
width: 30,
sortable: false,
menuDisabled: true,
items: [{
icon: 'images/refresh16x16.png',
scope: this,
handler: this.onBidHistoryGridlClick
}
This is my listener:
onBidHistoryGridlClick: function(record, grid, rowIndex){
alert(grid.getStore().getAt(rowIndex).column_name);
}
This doesnt work.
Any ideas?
You've got the record in the listener arguments, use it!
record.get('column_name')
You were probably close with your own tentative, but you forgot that what you get from the store is a record, not a raw data object. So this would rather have been:
grid.getStore().getAt(rowIndex).get('column_name')
Update
You've got your handler's arguments wrong (check the docs). This should be:
onBidHistoryGridlClick: function(view, rowIndex, colIndex, item, e, record){
alert(record.get('column_name'));
}
In addition to #rixo's answer, you may need to use the "data" attribute depending on the context (event handler callback function):
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex).data;
alert(rec.toSource()); // this only works in Mozilla Firefox
var rec_col_val = grid.getStore().getAt(rowIndex).data.col_name;
alert(rec_col_val);
I have been seleted a row, and now i want get rowIndex
maybe like
grid.getSelectionModel().getSelection()[0].rowIndex
but it's undefined. How can i get it thanks
how about this?
var selectedRecord = grid.getSelectionModel().getSelection()[0];
var row = grid.store.indexOf(selectedRecord);
you have to get the selected record of your grid and from that, you can search this record from your store and get its index.
you can also get it from the select listener of the grid:
listeners: {
select: function(selModel, record, index, options){
alert(index);
}
}
Try this:
grid.getCurrentPosition().row
In ExtJS 7 is:
console.log( 'Selection:', grid.getSelection() ) //One
console.log( 'Selection:', grid.getSelectable().getSelectedRecords() ) //Several
if you need modify a column in a grid, you can use this code snapshot:
{text: 'Status', dataIndex: 'localizedStatus', width: 150,
renderer: function(value, meta, record, rowIndex, colIndex, store){
return value;
}
},
Try
grid.getSelectionModel().getSelection()[0].get('id')
I am getting problem that how to implement search field on tree store getting data from the server in sencha touch.Any working code will be appreciated.
In Search field You can use key up event and filter a store as type charterer match to store and show filter data in list and on select on item in list you hide list as bellow done
{
xtype: 'searchfield',
name : 'Name',
label: 'Name: ',
id : 'Name',
record:'Details',
placeHolder: 'Name',
listeners: {
focus: function( field, e, eOpts ){
Ext.getCmp('FilterDropDown').show();
},
keyup: function(field) {
var value = field.getValue();
var Store = Ext.getStore('Details');
var FilterStore = Ext.getStore('FilterDetails');
FilterStore.removeAll();
count=0;
var thisRegEx = new RegExp(value, 'i');
for(cnt=0;cnt<Store.getCount();cnt++){
if(thisRegEx.test(Store.data.items[cnt].data.name)){
FilterStore.add({
'id':Store.data.items[cnt].data.id,
'name': Store.data.items[cnt].data.name,
'email': Store.data.items[cnt].data.email
});
}
}
}
}
},
{
xtype:'FilterList',
id: 'FilterDropDown',
height:200,
hidden : true,
listeners: {
itemtap: function( field, index, target, record, e, eOpts ){
Ext.getCmp('Name').setValue(record.data.name);
Ext.getCmp('Email').setValue(record.data.email);
Ext.getCmp('Mobile').setValue(record.data.mobileno);
Ext.getCmp('FilderDropDown').hide();
}
}
},
xtype FilterList code is
Ext.define('appname.view.FilterList', {
extend: 'Ext.dataview.List',
xtype: 'FilterList',
require: ['FilterDetails'],
config:{
store: 'FilterDetails',
scrollable: true,
cls: 'drop_down_list',
ui: 'round',
itemTpl: '<div>{name}</div>'
}
});
It will help you :)
Assuming the data is already in the store when you search this isn't too difficult to implement using the methods referenced by speznaz.
In your view have a xtype "searchfield" or "textfield".
{
xtype: "searchfield",
}
In the controller bind a "keyup" event to this field.
refs: {
searchfield: 'mypanel searchfield'
},
control: {
searchfield: {
keyup: 'doSearch'
}
}
For your function to search something like:
doSearch: function(searchfield, e, eOpts) {
var searchterm = searchfield.getValue();
var store = Ext.getStore('myStore');
// Now just customise the search options
store.find(fieldName, value, [startIndex], [anyMatch], [caseSensitive], [exactMatch] );
}
This is assuming you want to search on keyup. You may want to use the "action" event instead.
Assuming you already have data in the store.
Here is the working code:
{
xtype: "searchfield",
name:'searchName'
}
In the controller bind a "keyup" event to this field.
refs: {
searchName: 'searchfield[name=searchName]'
},
control: {
searchName: {
keyup: 'doSearch'
}
}
For your function to search :
doSearch: function(field, e, eOpts) {
var searchterm = field.getValue();
var store = Ext.getStore('myStore');
// Now just customise the search options
store.filter(fieldName,searchterm);
}
Use try.sencha.com it has lot of examples on how to use the framework.
You need to use an Ajax store for getting data from server. I think this guide will be a good start for that, it also implements a tree store.
This example explains how to filter data in a list based on what you type in a searchfield.
Hope it helps
So if I have a gridpanel in ExtJS 4, how do I check for a value in it?
I'm building a pop-up window to add a value to the gridpanel, and I want to make sure that the value the user is trying to add to the gridpanel isn't already listed in the grid panel.
I've been searching the docs for a while and googling around and haven't found anything.
I added the following code to the bottom of the example at http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/grid/array-grid.html
Hopefully it's a start for you, though you might have additional things to consider such as the following in order to devise the most robust solution:
What if the same value can occur multiple times in the grid?
What if the data in the grid is paginated?
CODE:
dockedItems: [{
xtype: 'toolbar',
items : [ {
xtype: 'button',
text: 'Seek Value',
handler: function() {
Ext.Msg.prompt('Value in Grid?', 'Search:', function(btn, text){
if (btn == 'ok' && text){
var columnNames = Ext.Array.pluck(grid.columns, 'dataIndex');
grid.store.data.each(function(record, index) {
for (var i=0,n=columnNames.length; i<n; i++) {
var columnName = columnNames[i];
if (columnName) { //protects against null dataIndex using pluck above
if (record.get(columnName) == text) {
console.log(index); //row
console.log(columnName);
return;
}
}
}
});
}
});
}
}],
dock: 'bottom'
}]
I have a simple grid with one of the columns being a 'download' link placed like this:
{
header: 'Config files',
width: 130,
sortable: false,
fixed: true,
renderer: function() {
return 'Download';
}
}
This is in the view. Now moving on to the controller I placed a listener on the grid to catch whenever the link is clicked:
init : function() {
this.control({
'accountFiles a[class=downloadCfg]': {
click: function () {
alert('test');
}
}
});
}
Very basic but it doesnt work. Can it be because the link is created via the 'renderer' function of the grid? Any ideas?
#Romeo
This is how you can grab whether the Download link is clicked or not:
'accountFiles': {
itemclick: function( thisView, record, item, index, e, eOpts ) {
var t = e.getTarget('.downloadCfg');
if (!Ext.isEmpty(t))
alert('Download clicked!!');
else
alert('Other item clicked!!');
}
}
Once you have identified that the Download link is clicked, you have the record containing the complete record representing the row.
I don't know how to fix this issue, but I know another solution.
Create method in GridPanel:
doDownload: function(recordId) {
var record = this.getStore().data.get(recordId);
// do something
}
Then create change renderer to:
renderer: function(value, meta, record, rowIndex, colIndex, store) {
return 'Download';
}
Action in onclick handler tries to find grid using dom classes.
accountFiles a[class=downloadCfg]
will select all descendant of accountFiles tag which have a tag. And filter them by class attribute.
It seems to me that you confused it with ComponentQuery syntax where you select by component id not by tag.