How to refresh a GridView in Extjs? - javascript

I am using a gridview which is binding data from datastore dynamically.
I have two textbox to enter data into grid.
On submit button click the textbox data I am adding to my datastore (no need to store in backend).
Now I want to refresh my gridview with datastore.
My Code:
_createEmptyRecord: function () {
var emptyrecord = Ext.data.Record.create(["id", "name", "type"]);
return new emptyrecord({
formula_id: 1,
name: Amit,
type: anything
});
},
_addValuetogrid: function () {
var record = this._createEmptyRecord();
this._store.insert(0, record);
},
_refreshgrid: function()
{
this._grid._addValuetogrid();
},
Now how to refresh my Gridview ?
Please help me...

Ext.grid.GridView has refresh() method.
this._grid.getView().refresh();

I believe a refresh function similar to this (untested) will work for Extjs 4;
_refreshgrid: function()
{
this._grid.getActiveView().refresh(true);
}

Related

Disabled Kendo DropDownList in Javascript

Hi I'm trying to accomplished to disabled the KendoDropDownList via javascript.
I already did it but my problem is when I try to populate the KendoGrid the KendoDropDownList is disabled but the value is gone. Anyone know how to fix this? or Anyone know other way to do accomplished this ?
Heres my code:
<script>
$(document).ready(function () {
var url = "#Url.Action("CheckUserStatus", "Maintenance")";
var checkData = "CheckUser";
$.post(url, checkData, function (d) {
if (d != 0) {
// alert(d);
$("#office_id").data("kendoDropDownList").value(d);
document.getElementById("mode-status").innerHTML = "Update Program";
document.getElementById("button-status").innerHTML = "Update Program";
$("#grd_ApprovedBudget").data("kendoGrid").dataSource.read();
$("#office_id").kendoDropDownList({
enable: false
});
}
//alert(d);
})
});
</script>
When you call $("#office_id").kendoDropDownList, it will try to create a new instance of kendoDropDownList. If you want to disable an existing kendoDropDownList, you'll have to do it using the enable function of the existing instance:
$("#office_id").data("kendoDropDownList").enable(false);
Here's kendo documentation about the enable function.

How do I clear all textboxes in Kendo Js in MVC View?

I'm using Kendo js in MVC5 project.
For adding data into database I'm using Web API2.
self.addContact = function () {
$.post("api/contacts",
$("#addContact").serialize(),
function (value) {
self.contacts.push(value);
},
"json");
}
How do I clear all textboxes after adding values into database?
The are still there in the textboxes.
Try this
$.post("api/contacts",
$("#addContact").serialize(),
function(value) {
self.contacts.push(value);
$("#addContact").get(0).reset();
},
"json");

Remove from a ComboBox a parameter in extjs 3.4

I want to remove a parameter from the store of a comboBox before it shows to the user, I know more or less how to do it but it´s not working properly, any one could give some solution? Maybe I need to select an specific event, but I tried with all the events that make sense and didn´t work, Here is the code:
var combo = fwk.ctrl.form.ComboBox({
storeConfig: {
url: app.bo.type.type_find
,fields: ['id', 'code']
}
,comboBoxConfig:{
triggerAction: 'all'
,allowBlank:false
}
});
combo.on('beforeshow', function() {
combo.store.removeAt(2);
});
Thank you very much!!!
Try removing it inside 'afterRender' event,
sample code:
listeners: {
'afterrender': function(comboRef) {
comboRef.store.removeAt(2);
}
}
Here you have the solution,
combo.getStore().load({
callback: function (r, options, success) {
if (success) {
combo.store.removeAt(2);
}
}
});
Is necessary to change it before the load of the store because first is painted the combobox and then is charged with the store data I was erasing data in a empty store.

Accept Image in Filefield ExtJs

I have a filefield componente in my application and I want to restrict it to only image files. I've found this question on stackoverflow:
How to restrict file type using xtype filefield(extjs 4.1.0)?
Add accept="image/*" attribute to input field in ExtJs
I'm using this code:
{
xtype:'filefield',
listeners:{
afterrender:function(cmp){
cmp.fileInputEl.set({
accept:'audio/*'
});
}
}
}
But this code only works the first time I click on "Examine" button, when I click again on it, the restriction dissapears. I've been looking for other events like onclick to write this code in that event, but I don't find the best way to do it, Anyone has any idea?
Greetings.
This is happening because when you submit form, it calls Ext.form.field.File#reset().
You should override reset() method like this, to keep you accept property:
{
xtype:'filefield',
reset: function () {
var me = this,
clear = me.clearOnSubmit;
if (me.rendered) {
me.button.reset(clear);
me.fileInputEl = me.button.fileInputEl;
me.fileInputEl.set({
accept: 'audio/*'
});
if (clear) {
me.inputEl.dom.value = '';
}
me.callParent();
}},
listeners:{
afterrender:function(cmp){
cmp.fileInputEl.set({
accept:'audio/*'
});
}
}
}

Populating a FilteringSelect datastore from an onChange event

I'm trying to bind an onChange event of one FilteringSelect to populate another FilteringSelect.
// View
dojo.addOnLoad(function () {
dojo.connect(dijit.byId('filterselect1'), 'onChange', function () {
dijit.byId('filterselect2').store = new dojo.data.ItemFileReadStore(
{ url: "/test/autocomplete/id/" + dijit.byId("filterselect1").value }
);
});
});
The JSON is generated from what I can tell correctly from a Zend Action Controller using a autoCompleteDojo helper.
// Action Controller
public function autocompleteAction()
{
$id = $this->getRequest()->getParam('id');
$select = $this->_table->select()
->from($this->_table, array('id','description'))
->where('id=?',$id);
$data = new Zend_Dojo_Data('id', $this->_table->fetchAll($select)->toArray(), 'description');
$this->_helper->autoCompleteDojo($data);
}
I receive the JSON from the remote datastore correctly, but it does not populate the second FilteringSelect. Is there something else I need to do to push the JSON onto the FilteringSelect?
I couldn't believe this was causing the problem, but the whole issue boiled down to the fact that it appears that a dojo ItemFileReadStore REQUIRES the label property of the JSON to be "name". In the end this is all that it required to wire them together.
dojo.addOnLoad(function () {
dijit.byId('filtering_select_2').store = new dojo.data.ItemFileReadStore({url: '/site/url'});
dojo.connect(dijit.byId('filtering_select_1'), 'onChange', function (val) {
dijit.byId('filtering_select_2').query.property_1 = val || "*";
});
});
UPDATE: The property within Zend form has been fixed as of ZF 1.8.4
Try console.log() in the event to see if it is launched. Changing the store should work, however for other widgets like grid you have also to call refreshing methods.

Categories