Suppose i have a sencha grid which has columns
Name, Email, Address, Phone, City, State, Country
Now out this initially i am only displaying Name, Email, Address and Phone.
I have given the provision to display more columns, the pending ones, City, State and Country.
But the problem in that when ever i add a new column in the grid then it gets appended to the last...in my case suppose i add City then it gets appended after Phone...
But i want Phone to always remain the last column and if any other column is added then it should be prefixed before Phone column.
I am using sencha grid.
Kindly suggest
Use headerCt for this. You can insert a new column to any position.
handler: function(btn) {
var grid = btn.up('gridpanel');
var column = Ext.create('Ext.grid.column.Column', {
text: 'Country',
dataIndex: 'country'
});
grid.headerCt.insert(
grid.columns.length - 1, // that's index column
column);
grid.getView().refresh();
}
Fiddle
Related
I think of simplifying the click events and instead of attach them on column renderer (I use React), I tried to attach a single onCellClicked event (where I do get all the data for the row) and do a switch for... column. On first column there will be a delete button, on second something else, etc. I do have some colDef and column, but no index for the column. Instead I have a colId, which isn't what I need. I do have a colDef, where column header could be used, but for my case I don't have headers. I can't imagine how they omitted the column index.
You can get all columns and find its index based on the field property if you don't provide the colId:
<AgGridReact
{...}
onCellClicked={(e) => {
const field = e.colDef.field;
const colIndex = e.columnApi
.getAllColumns()
?.findIndex((col) => col.getColDef().field === field);
console.log(field, colIndex);
}}
/>
I have following table made by Backgrid.js:
this.grid = new FixedWidthGrid({
columns: this.columns,
row: SelectableDocumentContextMenuRow.extend({
contextMenu: ContextMenuHelper.onRightClick
}),
collection: self.collection,
header: FilterHeader,
contextMenu: ContextMenuHelper.onRightClick
});
Now, when I click on a header label, the entire table gets sorted by that attribute on the client.
How can I get the current sort key/attribute (e.g. name, age etc.) of the collection?
If you are using backbone.paginator you should be able to get this by checking the value of collection.state.sortKey
I am using Extjs 4.2, so i have a grid with rowediting plugin. All works fine, I want to know how I can update one field value, depending on another field. I mean for example if in my grid I have field1, and field2, I need to update field3 value with field1 + field2 values when one of those were changed. Normally using jquery we can code a change event for each of the fields, but how i can do this on rowediting event?
Is this possible?
You can use edit events of rowedit as follow:
Sencha Fiddle : Grid RowEditor - Change cell value based on condition
grid.on('edit', function(editor, e){
/**
* here I am checking the column name to complete process
* you change what you want
*/
if (e.field == "name") {
e.record.set('result', parseInt(e.record.get('dummy')) + parseInt(e.record.get('age')));
}
})
You have to add editors to the columns, the editor is like any component, has listeners, type etc. then add a change listener
Example:
...
{
header: 'HeaderName',
dataIndex: 'man_peso',
type: 'number',
width: 50,
editor: {
enableKeyEvents: true,
listeners: {
change: function(c, e, eOpts) {
//here you can modify others components
}
},
xtype: 'textfield',
maskRe: /[0-9\.]/,
maxLength: 16
},
...
When you use RowEditor, the e.field value entirely depends on the field that was clicked on to edit the row.
To illustrate the problem:
In the previous answer, open the fiddle link (https://fiddle.sencha.com/#fiddle/4pj).
Double click the email field and change the name.
The handler will not update the result field as e.field will now be 'email' and not 'name'.
That is, Row Editor considers the field on which you click as the edited field. This does not make sense as it is a 'row' editor and is most probably used to edit multiple fields in the row.
To get the list of only modified fields, use e.record.getChanges(). These will give you only the modified fields and their new values.
I need to allow my users to submit multiple property addresses by clicking a button that will insert a fieldset with extra text fields. I can do this simply with form.insert(index, component); However, that index will change after the user adds an additional property. For example, the index to add the extra properties is after the 7th component, making the index 7. But when you insert it at 7, it's index is now 7 and the next property will be inserted above it. This effect is further compounded when you try to do this with contact emails and numbers in the same form. So my question is, how can I get the index of the component in the form that I wish to insert the extra fields after?
fieldset.items.getCount()
Or am I missing something?
not exactly straight forward, but not too bad either. take a look at the following code: the first part is the button handler to add a set of fields, the second is the actual function that creates the indexed fields.
handler:function () {
var parts = this.up('fieldset'),
index = parts.query('fieldcontainer').length, //calculate existing Part line items
fields = this.up('window').createPartFieldContainer(index);
parts.add(fields);
}
createPartFieldContainer:function (index) {
index = index || 0;
return {
xtype:'fieldcontainer',
items:[
{
xtype:'textfield', fieldLabel:'Item',
name:'lineItem[' + index + '].itemNumber', width:100,
emptyText:'Part Number'
}
]
}
}
In ext js, when I have a combo, there is display value and value( which is sent to server). I do not need displayValue to send to server, but I need to capture it on the page and display an alert.
What is the eextjs method of doing this?
combo.getValue() will return the underlying value...and I do not see any combo.getDisplay()
EDIT: Just to clarify, I am looking to get the display value of the item that is selected by the user. I wish to show an alert on the onselect or on changeevent.
If you set the valueField property on the combo box to the value you wish to display in the alert that will work fine.
alert(combo.getValue());
If you want this value to be different from the value you submit to the server you will have to get the store from the combo box and find the corresponding record.
var store = combo.getStore();
var index = store.find('*YourFieldName*', combo.getValue());
if(index != -1)//the record has been found
{
var record = store.getAt(index);
//you can then do what you like with the record.
}
combo.getStore().getById(combo.getValue()).raw.displayAttribute //Ext 4.x,
//displayAttribute: displayField or displayed attrib in store data for the combo
We can retreive the underlying store, then use our value as a key to get the display value.
Something like this (I haven't tested it):
var displayValue = combo.getStore()[combo.getValue()]
We can get the combo box display value something like this...
getRawValue( ) : String
Returns the raw String value of the combo, without performing any normalization, conversion, or validation. Gets the current value of the input element if the field has been rendered, ignoring the value if it is the emptyText.
combo.getRawValue();
Let's assume that you have following in your combobox:
id: 'COMBOBOX_ID',
displayField: 'COMBOBOX_DIS_FIELD_NAME',
valueField: 'COMBOBOX_VAL_FIELD_NAME'
Then, you can do following:
var combo = Ext.getCmp('COMBOBOX_ID');
var comboStore = combo.getStore();
var index = comboStore.find('COMBOBOX_VAL_FIELD_NAME', combo.getValue());
if(index != -1)
{
var selectedItemDisplayValue = combo.getStore().getAt(index).get('COMBOBOX_DIS_FIELD_NAME');
}