Perform action after close a child window in extjs - extjs

Hello i am creating a panel window and i want to save data after fill valid id.
if id does not exits then i show a panel window and here will be create a valid id. After create valid id user will close window. After close window i have need to form on server.
I am also attaching code and screenshot
// check id exist on database or not
var myId= me.lookupReference('myId').getValue();
Ext.Ajax.request({
url: './MyController/CheckExistId',
method: 'POSt',
params: {
myId: myId
},
success: function (response) {
var result = Ext.JSON.decode(response.responseText);
if (result.success === true && result.data !== null) {
if (result.data === 0) {
Ext.create('MySample.view.register', { id: myId }).show();
}
else {
me.submitData();
}
}
}
Window screenshot for create new id
after close window i want to submit form automatically by using me.submitData() function

Add a listener to MySample.view.register like:
Ext.create('MySample.view.register', {
id: myId,
closeAction : 'destroy',
listeners: {
// catch the close action
'destroy' : function() {
me.submitData();
}
}).show();
The event to catch is based on which kind of component MySample.view.register is extending of.

Related

Select2 custom data fetch when user starts typing in search bar. (BackboneJS / Marionette collection) SELECT2

I am using SELECT2 in BackboneJS/Marionette. Right now following is flow:
Current:
From parent, call FETCH method of COLLECTION. When fetch is completed then send this COLLECTION to a new VIEW and display drop down (SELECT2)
New Requirement:
Now need to convert this data fetch at run-time. When user types in search bar of SELECT2, ajax call should be made and returned data needs to be converted to Marionette collection and then rendered in drop-down.
For this, i tried to implement this example.
Now problem is that data is fetched (visible in network tab), but drop-down remains empty (and there is no error/exception):
Added following code in _SELECTOR.prototype.settings.extend
ajax: {
url: API_PATH + "testingvalues2",
dataType: 'json',
delay: 1000,
minimumInputLength: 1,
cache: true,
data: function (params) {
var query = {
filter: params.term
};
console.log("query: ", query);
return query;
},
processResults: function (data) {
console.log("data : ", data);
console.log("this>>", this);
let newCollection = new DropdownDataCollection();
for(let dataItem of data){
let item = new DropdownValueEntity (dataItem);
newCollection.add(item);
}
return {results : newCollection};
}
},

Facebook like infinite scrolling

Will it be possible to implement facebook or linked in like infinite scrolling using EXT-JS API. I am aware of infinite grid although my requirement is to scroll panels infinitely just like facebook or linked in allows us. As of now I am working on EXT version 5.
Any link/white paper will greatly be appreciated.
Thanks in advance
Samir
You can use a dataview with a store tied to it to load the initial data in the wall. Then, in a controller add a listener to the scroll event and check when the scroll has reached the end.
I previously was creating a reddit app with that exact functionality though it was never completed/fully vetted. Here is a snippet of the scroll callback, basically I kicked off an ajax request and then load the returned data to the end of the current store's data:
mainPanelRendered: function () {
var p = Ext.ComponentQuery.query('yourDataView')[0];
var s = p.getStore();
//check on scroll if we've reached the end of the dataview
p.getTargetEl().on('scroll', function (e, t) {
var height = p.getTargetEl().getHeight();
if (height + t.scrollTop >= t.scrollHeight) { //Fire method to load more data to the store.
p.setLoading(true);
Ext.data.JsonP.request({
callbackKey:'jsonp',
url: s.proxy.url,
params: {
'count': 25,
'after': p.after
},
headers: { 'Content-type': 'text/json; charset=utf-8', 'Accepts': 'text/json' },
reader: {
type: 'json',
root: 'data.children',
successProperty: 'success'
},
success: function (response) {
p.after = response.data.after;
//now that you have more data add it to the store
Ext.each(response.data.children, function (article) {
var data = article.data;
try{
s.add({
id: data.id,
domain: data.domain,
subreddit: data.subreddit,
author: data.author,
over_18: data.over_18,
thumbnail: data.thumbnail,
subreddit_id: data.subreddit_id,
downs: data.downs,
ups: data.ups,
permalink: data.permalink,
name: data.name,
url: data.url,
title: data.title,
num_comments: data.num_comments,
score: data.score
});
} catch (ex) {
//do nothing the item already existed
}
//s.add(item);
//newItems[i] = item;
//i++;
});
p.setLoading(false);
//p.after = p.response.data.after;
}
});
}
});
},
And here is a link to my not-so-complete app's source. Again, it certainly isn't fully vetted but should give you an idea how you could add an infinite scroll. Checkout the mainPanel in the view and the render event in the controller.

Extjs update for all grid row not working

I am using Extjs 3.2grid.I have 5 Records.I am also stoping user to select multiple rows at a time.In grid i have button say approve.What i want is once user selects one record and clicks on approve the selected row coloumn "showRecord" will become 1 and remaing rows will become with showrecord:0
Here is my code
var proxy_surv = new Ext.data.HttpProxy({
type: 'ajax',
api : {
read : 'test/view.action?test='+testid_para+'&flag='+0,
create : 'test/create.action',
update : 'test/update.action',
destroy : 'test/delete.action'
}
});
var store_surv = new Ext.data.Store({
id : 'store_surv',
proxy : proxy_surv,
reader : reader,
autoSave : false
// <-- false would delay executing create, update, destroy
// requests until specifically told to do so with some [save]
// buton.
});
store_surv.on({
beforeload: {
fn: function (store, options) {
// Altering the proxy API should be done using the public
// method setApi.
store_surv.proxy.setApi('read', 'test/view.action?test='+testid_para+'&flag='+0);
}
}
});
And here is my logic
tbar: [{
iconCls: 'icon-user-add',
text: 'Approve',
handler: function(){
// Server hasn't returned yet for these two lines.
var survgrid=Ext.getCmp('grid_surv');
getstore =survgrid.getStore();
count =getstore.getCount();
var selected = survgrid.getSelectionModel().getSelected();
getstore.each(function(record){
if(parseInt(record.get('id'))==parseInt(selected.get('id')))
{
record.set('showRecord','1');
}
else
{
record.set('showRecord','0');
}
record.commit();
});
store_surv.save();
}
}
My problem is its not saving in database
don't use record.commit() it will say the record that all changes have been changed. it gets automatically called by store.sync(). remove record.commit() and it should work. you could also use 'record.save()' which will sync a single record.

Combobox inside Extjs editor grid panel while populating is invisible sometimes

Hi all I am using Extjs 3.4 my problem is I have one editor grid panel
and inside panel I have one department combobox. So, in first page I
have search grid and on click of grid I am coming to this page and on
load using ajax I am populating combobox value in grid panel. But sometimes
values are not coming, means it is invisible and only after clicking on that
combobox it is appearing. Can some body explain what is the problem.
Thanks in advance, I hope will get reply soon.
While populating I am calling one ajax which is populating values in grid but
there is no issue with other columns, only with combobox it is invisible sometimes
Ext.util.Format.comboRenderer = function(Departmentscombo){
return function(value){
var record = combo.findRecord(combo.valueField || combo.displayField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}
Ext.grid.ComboColumn = Ext.extend(Ext.grid.Column, {
constructor: function(cfg){
Ext.grid.ComboColumn.superclass.constructor.call(this, cfg);
this.renderer = Ext.util.Format.comboRenderer(this.editor.field ?
this.editor.field : this.editor);
}
});
Ext.apply(Ext.grid.Column.types, {
combocolumn: Ext.grid.ComboColumn
});
var DepartmentsJReader = new Ext.data.JsonReader
({ root: 'data', id: 'mastercode' },
[{ name: 'mastercode' }, { name: 'description'}]);
Departments_store = new Ext.data.Store
({
proxy: new Ext.data.HttpProxy(
{ url: '', method: 'GET' }),
reader: DepartmentsJReader, autoLoad: true,
listeners:
{
load: function () {
var rec = new Departments_store.recordType({ mastercode:'-', description: '-' });
rec.commit();
Departments_store.insert(0, rec);
Departments_store.commitChanges();
}
}
});

EXTJS GridPanel Inside Window Is Not Loading Updated Data From Store When Window is Re-Opened

I have an EXT form that opens a window containing an GridPanel where the data store needs to get updated each time the form is submitted. The grid displays a list of files that are uploaded from the client computer. All of this works fine until I close the window and select a different group of files. The problem I am having is when the window containing the grid is closed and then re-opened, it is displaying the first set of files loaded previously instead of the new list of files submitted from the form. Hopefully this makes sense.
I have tried grid.getView().refresh() but that doesn't update the grid. Below is my code for the window, form, grid, and JSON store. If anyone has seen this before I would sure appreciate some advice. (apologies for the code formatting...had a lot of trouble getting it to be readable this text box)
//window that holds grid
SPST.window.POGCheckInWindow = Ext.extend(SPST.window.WindowBaseCls, {
id: 'POGCheckInWindow'
,initComponent:function() {
var config = {
title: 'Check In POG Files'
,width : 1000
,height : 500
,maximizable: false
,shadow : false
,closeable: true
,closeAction: 'hide'
,items: [{
xtype : 'checkin_results_grid'
,id : 'POGCheckInGrid'
,height : 450
,width : 990
,frame : true }
]};
Ext.apply(this, Ext.apply(this.initialConfig, config));
SPST.window.POGCheckInWindow.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('pog_checkin_window',SPST.window.POGCheckInWindow);
//function to submit the form, load the store and open the window containing the gridpanel
checkin:function() {
if (this.getForm().isValid()){
this.getForm().submit({
url: 'components/POG.cfc?method=uploadPOGTemp' + '&dsn=' + SPST_dsn
,method: 'GET'
,scope:this
,success: function(form, action){
var chkinwin = new SPST.window.POGCheckInWindow();
Ext.getCmp('POGCheckInGrid').getStore().load({params: {dsn: SPST_dsn,
pogfiles: action.result.pogfiles, project_id: action.result.project_id}
,callback: function(rec, options, success){
Ext.getCmp('POGCheckInGrid').getView().refresh();
}
});
chkinwin.show();
}
,failure:this.showError
,waitMsg:'Uploading files...'
});
}
}
// create the data store for grid
var chkstore = new Ext.data.JsonStore({
// JsonReader configuration
root : 'jsonlist'
,fields : chkfields
,id : 'chkstoreid'
// JsonStore configuration
,autoLoad : true
,remoteSort : true
,autoDestroy: true
,sortInfo: {
field: 'POGNAME',
direction: 'ASC'
}
,url : 'components/POG.cfc?method=getPOGTempFiles' + '&dsn=' + SPST_dsn
});
//grid that loads inside ext window
SPST.grid.POGCheckInGrid = Ext.extend(SPST.grid.GridPanelBaseCls, {
view: new Ext.grid.GridView({
getRowClass: function(rec, idx, rowPrms, ds)
{
return rec.data.VERSION_DSC === 'INVALID VERSION#' ? 'invalid-cls' : '';
}
}),
initComponent : function() {
var config = {
colModel : chkcolModel
,selModel : chkselModel
,store : chkstore
,autoDestroy: true
,xtype : 'checkin_results_grid'
,buttons: [
{
text: 'Upload'
,handler: this.loadPOGCheckin
,scope : this
},
{
text: 'Cancel'
,handler: this.checkinwindowclose
,scope : this
}
]
}
Ext.apply(this, Ext.apply(this.initialConfig, config));
SPST.grid.POGCheckInGrid.superclass.initComponent.apply(this, arguments);
}
,onRender : function() {
this.getBottomToolbar().bindStore(chkstore);
SPST.grid.POGCheckInGrid.superclass.onRender.apply(this, arguments);
}
From what I understood, you don't need to only refresh the view, but also reload the store according to the different set of files that you selected..
So, instead of doing
grid.getView().refresh() use grid.getStore().reload([new-options-if-required]);.. This will reload the store according to the options passed, if any, or reload the store according to the last load options.

Resources