ExtJs Gridpanel selection modal - extjs

I have a two questions:
How to set first row in ExtJs gridpanel as selected and
How to write separate JS file for custom validations for phone nos and datefields and etc
Thanks in advance


Assuming you have an instance of your grid, you can select the row using selectFirstRow(). Here is the sample code:
grid.getSelectionModel().selectFirstRow();
You can move your custom validations to another file. All you need to move your
Ext.apply(Ext.form.VTypes, {
daterange : function(val, field) {
var date = field.parseDate(val);
...
}
});
to separate file. and ensure that the js file is included.


try this to select first row in grid :
Ext.getCmp('grid').getSelectionModel().selectRow(0);

Related

How to add drop-down and input field in the angular ui-grid table?

How to add drop-down and input field in the angular ui-grid table? If I have list of values coming as drop-down, if I want enter a new value which not available in drop-down through input field?

Accordin to the sample
it would be required to handle pushing new items to the editDropdownOptionsArray via needed action (edit or whatever) like that (the reference to the upper sample):
app.js
$scope.click = function(){
var optionsArray = $scope.gridOptions.columnDefs[2].editDropdownOptionsArray;
optionsArray.push('onemore '+ optionsArray.length);
}
index.html
<button ng-click="click()">Add new value</button>

Changing the column header name in Angular ui grid exporter

I am exporting the ui-grid to CSV using the angular ui grid exporter. Is there a way to update the header name while exporting it to CSV/PDF. I am using exporterFieldCallback to format some of the values in the table, but when I try to update the header name in exporterFieldCallback from col, it does not take effect.
I also would like to know if its possible to suppress a row from exporting.

You can use exporterHeaderFilter callback in your gridOptions to change the column header before exporting it. For example:
exporterHeaderFilter: function (name) {
// do something with name
return name;
}
I don't know if it's possible to suppress a single row, but I would suggest to enable filtering and then export only visible data or use the option to export only selected rows.

AngularJs ui-grid how refer column defination name to add filter?

I want to set filer to a column in ui-grid dynamically using gridOptions.columnDef using column name. Right now I am only able to use number as a key.
How can I add multiple filters on a single column dynamically?

Try creating a custom filter for your grid item and then in the logic there you can do whatever you want. Something like this
field: 'myfilteredfield',
filter: {
condition: myCustomFilter
}
and in your controller
$scope.myCustomFilter = function(searchTerm,cellValue,row,column) {
};
Look here for details http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions.columnDef

Set focus on autocomplete field

I have a form that has some fields.
One field is autocomplete
.
The field is filled with information from a table
$f->addField('autocomplete','idfield','Field')->setValueList( $this->api->db->dsql()
->table('items')->field('id,name')->do_getAssoc() );
I'm trying to set the focus on that field when the page loads.
I have did this
On top of the page
$p->js()->_load('seteo_foco');
And then
seteo_foco.js
$(function(){
$("select:first").focus();
})
But this does not work.
Anybody can help ?
Thanks

Try TRUE like
$this->js(true)->_load('seteo_foco'); to load js file.
But in your js code your selector is incorrect. You need to specify you unique field. I'd use something like $form->getElement('field_name')->js(true)->focus(); on the page after the form has been initialized.

How to hide rows in ExtJS GridPanel?

Suppose I know which row index to target (with this.rowToBeDeleted having a value of 2, say), how can I hide this row only from the grid but not the store (I have a flag in the store, which signifies what rows should be deleted from the db later in my PHP webservice code).

You can either use one of the store.filter() methods or you can hide the row element.
grid.getView().getRow(rowIndex).style.display = 'none';
I think it's much better though to just remove the record from the store and let the store update the view since you are deleting the record and not just hiding it. With the store in batch mode (the default: batch: true, restful: false), it will remember which rows you've removed and won't fire a request to the server until you call store.save().

I suggest using store.FilterBy() and pass a function to test the value of the value in rowToBedeleted:
store.filterBy(function(record) {
return record.get("rowToBeDeleted") != 2;
});
I wrote a basic blogpost about gridfiltering a while ago, you can read it here: http://aboutfrontend.com/extjs/extjs-grid-filter/

In ExtJS 4.1, there is no view.getRow(..). Instead you can use:
this.view.addRowCls(index, 'hidden');
to hide the row at the specified index, and
this.view.removeRowCls(index, 'hidden');
to show it (where 'this' is the grid).
CSS class hidden is defined as
.hidden,
{
display: none;
}
This is useful for peculiar scenarious where store.filterBy() is not appropriate.

In the grid js file write following code to apply a CSS to those rows which you want to hide.
<pre><code>
Ext.define('MyGrid',{
extend : 'Ext.grid.Panel',
xtype : ''mygrid',
viewConfig : {
getRowClass : function(record,id){
if(record.get('rowToBeDeleted') == 2){
return 'hide-row';
}
}
},
.................
.................
});
</code></pre>
Now define a custom CSS in custom.css file:
.hide-row{display:none}
This will hide rows in grid without removing or filtering from store.

You can use the store.filter() or store.filterBy() methods for that.
Set a "hidden" property on your records and the filter all records that have hidden set to true for example. This way they'll still be present in the store but not visible in the grid.

Resources