I have a datagrid, and on double click of any record in the grid, I am navigating to formPanel which has about 100+ display fields in it.
My issue here is that, the loadRecord takes a lot of time, close to 20 secs to load all these 100+ display fields.
Is there any faster way to do this? Any help or ideas is much appreciated.
Ext.Ajax.request({
url: someurl
method: 'POST',
params: {
params: params
},
success: function(response) {
var responseData = response.responseText;
var doc = new DOMParser().parseFromString(responseData, "text/xml");
store.loadRawData(doc);
var formPanel = Ext.getCmp('FormPanel');
var formPanelData = store.getAt(0);
console.log("Its fast upto here!!");
formPanel.getForm().loadRecord(formPanelData);
console.log("Takes upto 20 secs to get here!!");
var vp = Ext.getCmp('viewport');
vp.getLayout().setActiveItem('formPanel');
}
});
Suspend layouts during the load:
Ext.suspendLayouts();
form.loadRecord(foo);
Ext.resumeLayouts(true);
Even for filtering out data in Tree Panel in EXTJs 4.1.3
Suspend layout drastically increases your searching speed. see below :
applyFilterFn: function(filterCmp) {
Ext.suspendLayouts(); // Adding by Lokesh to speed up
var me = this;
var root = this.getTreeStore().getRootNode();
me.registerFilter(filterCmp);
me.filtered = true;
if(typeof filterCmp.beforeFilter === 'function'){
filterCmp.beforeFilter();
}
root.cascadeBy(function(node){
if(node.isRoot() && !me.rootVisible){ return; }//skip invisible root
var nid = (me.useDataIds===true)? node.data.id:node.id;
if(typeof me.filterNodeHash[nid]==='undefined'){
me.filterNodeHash[nid] = [];
}
if(filterCmp.filterFn.call(filterCmp,node)){
me.filterNodeHash[nid][filterCmp.id] = true;
"+me.filterNodeHash[nid][filterCmp.id]);
}else{
me.filterNodeHash[nid][filterCmp.id] = false;
//console.log("value of "+node.data.task+", "+me.filterNodeHash[nid][filterCmp.id]);
}
},me);
root.eachChild(function(childNode){
Ext.fly(me.getNodeByRecord(childNode)).setDisplayed(true);
});
root.eachChild(function(childNode){
me.applyFilters(childNode,0); ////////added changed code
});
// console.log("root node id "+this.getTreeStore().getRootNode().getId().data.task);
Ext.resumeLayouts(true); // put it to resume your css layouts
if(typeof filterCmp.afterFilter === 'function'){
filterCmp.afterFilter();
}
},// applyFilterFn you may call from a differnt javascript file
Related
I am adding a text "Please scroll down" to the Terms and Conditions web page and the text should hide after reaching the bottom of the page. I created a container that shows the text on the entire page under View (Sencha Architect) but not sure how to hide it after scrolling to the bottom. I am trying to create a controller action under Controllers but it's not working. Attached is the code for TermsConditions controller. ItemID of the container containing text is scrollContainer
onAgreeClick: function(button, e, eOpts) {
var store = Ext.data.StoreManager.lookup('UserObjectStore');
var match = store.first(),
showAnnouncements = match.get('announcementPageToVisit');
if (showAnnouncements) {
button = this.getBtnAnnouncements();
} else {
button = this.getBtnCustomerSearch();
}
this.simulateHeaderButtonClick(button);
Ext.Ajax.request({
url: '../abc/services/users/saveUser',
method: 'GET',
headers: { 'Content-Type': 'application/json' },
success: function (response, action) {
},
failure: function (response, action) {
}
});
},
onDisagreeClick: function(button, e, eOpts) {
Ext.Msg.confirm('','You must agree to the Terms and Conditions in order to continue. Press YES to go back or NO to exit.',
function(answer) {
if (answer === "no") {
var h = abc.app.getController('HeaderButton');
h.terminateApp('ok', null, null);
}
}
);
},
BackToTaC: function(button, e, eOpts) {
this.getTermsBtnContainer().hide();
this.getTermsBackContainer().show();
this.getScrollContainer().hide();
this.getBtnAnnouncements().toggle();
this.getBody().getLayout().setActiveItem(6);
},
var me = this;
dataview.getEl().on('scroll', function(e, t) {
if(t.scrollHeight - t.scrollTop - t.clientHeight === 0) {
}
});// I already tried to hide under this but it doesn't work
onTermsBeforeShow: function(component, eOpts) {
var me = this;
var termsView = component.down('dataview');
var termsStore = termsView.getStore();
termsStore.getProxy().actionMethods = {create: 'POST', read: 'POST', update: 'POST', destroy: 'POST'};
termsStore.load();
},
I have had similar requirements for Extjs Panel and I handled them by getting the height of the grid and comparing the height with the current Y Position of the grid.
In the panel page , I had
var toBeAbsoluted = this.getHeight() / 95 * 100; // approximation 95% seemed optimum in my case
if(this.getY() >= (this.getHeight() - toBeAbsoluted ))
buttonToHide.hide()
My ionic app gets some places from the database and generates a map from this data.
$scope.$on('$ionicView.beforeEnter', function(){
// get event data
Events.getEvent($stateParams.eventId).then(function(data){
$scope.eventInfo = data[0];
$ionicLoading.hide();
// get location data
if(data[0].location){
Locations.getLocation(data[0].location).then(function(data){
$scope.location = data[0];
// call the map
$scope.initialize($scope.location.locstreet, $scope.location.zip, $scope.location.ort);
});
}
});
After retrieving the data, the script calls the initialize function:
function initialize(strasse, plz, ort) {
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 14
});
img = new google.maps.MarkerImage("img/icon.png", null, null, null, new google.maps.Size(30,30));
var geocoder = new google.maps.Geocoder();
var address = strasse + ", " + plz + " " + ort;
geocoder.geocode({'address': address}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: img
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
This works great the first time I´m navigating to this view. If I leave the view and come back to the same view with other data, the map just shows grey with the google logo right bottom.
I think that this could happen because of the multiple intializing var map. But if I declare var map outside of the funktion it doesn´t work either.
Add this : cache: false to your state provider (when you defined your map).
This worked for me.
How do I remove a newly added row from a gridpanel? The gridpanel is bound to a store.
I use:
store.remove(record);
store.sync();
It works fine on existing records in the grid, the record is removed from the grid directly, but when I add a record and want to remove it right away, it isn't 'removed' form the grid.
The api is called, so the record is 'removed from the database' and the record is indeed gone when I do e.g. a browser refresh.
Does anyone knows how this works? Thanks in advance.
Store configurations
Ext.define('Iziezie.store.animal.doggywood.animal', {
extend: 'Iziezie.store.animal.animal',
model: 'Iziezie.model.animal.doggywood.animal',
proxy: {
type: 'baseProxy',
api: {
create: '../php/api/doggywood_animals.php?request=create',
read: '../php/api/doggywood_animals.php?request=read',
update: '../php/api/doggywood_animals.php?request=update',
destroy: '../php/api/doggywood_animals.php?request=destroy'
}
}
});
New records is added by form:
var store = gridpanel.getStore();
var model = Ext.ModelMgr.getModel(store.model);
var record = model.create();
store.insert(0, record);
...
frm.loadRecord(record);
On form submit
frm.updateRecord();
var record = frm.getRecord();
record.save();
On remove:
var sm = gridpanel.getSelectionModel();
var record = sm.getLastSelected();
var store = gridpanel.getStore();
store.remove(record);
store.sync();
To force a visual refresh on the grid, you can just call
myGridPanel.getView().refresh();
But this shouldn't be required, the grid should just show whatever is in your store. Can you post a full code sample of what you are doing?
try this to create a new record to grid panel using row editing:
createRecord: function() {
var model = Ext.ModelMgr.getModel('EKOJS.model.m_yourmodel');
var r = Ext.ModelManager.create({
id: '',
text: ''
}, model);
this.getYourgridaliasview().getStore().insert(0, r);
this.getYourgridaliasview().rowEditing.startEdit(0, 0);
},
and to remove the selected record in your grid panel :
deleteRecord: function(dataview, selections) {
var getstore = this.getYourgridaliasview().getStore();
var selection = this.getYourgridaliasview().getSelectionModel().getSelection()[
0];
if (selection) {
Ext.Msg.confirm('Confirmation',
'Are you sure to delete this data: id = "' + selection.data
.id + '"?', function(btn) {
if (btn == 'yes') {
getstore.remove(selection);
getstore.sync();
}
});
}
},
and, the important thing always reload your store after creating record like this :
Ext.Ajax.request({
method: 'POST',
url: '../php/api/doggywood_animals.php?request=create',
params: {
data: jsonData
},
success: function(response) {
e.store.reload({
callback: function() {
var newRecordIndex = e.store.findBy(
function(record, id) {
if (record.get('id') === e.record
.data.id) {
return true;
}
return false;
});
/* me.grid.getView().select(recordIndex); */
me.grid.getSelectionModel().select(
newRecordIndex);
}
});
}
});
The listener of after edit in rowediting plugin i use is like this below :
'afteredit': function(editor, e) {
var me = this;
if ((/^\s*$/).test(e.record.data.id)) {
Ext.Msg.alert('Peringatan', 'Kolom "id" tidak boleh kosong.');
return false;
}
/* e.store.sync();
return true; */
var jsonData = Ext.encode(e.record.data);
Ext.Ajax.request({
method: 'POST',
url: '../php/api/doggywood_animals.php?request=create',
params: {
data: jsonData
},
success: function(response) {
e.store.reload({
callback: function() {
var newRecordIndex = e.store.findBy(
function(record, id) {
if (record.get('id') ===
e.record.data.id
) {
return true;
}
return false;
});
/* me.grid.getView().select(recordIndex); */
me.grid.getSelectionModel().select(
newRecordIndex);
}
});
}
});
return true;
}
May be a little help for you.
I have a generic grid component.
on click of menu item corresponding grid is displayed in independent tabs.
on rendering the grid component, store data is set dynamically and grid is populated.
The problem if I open two grids in two tabs, on navigating to the first tab, grid data is not displayed as the store data is set to second grid data.
Hoping to find solution.Thank you
code in main controller:
OnMenuItemClick: function(c){
var nodeText = c.text,
tabs = Ext.getCmp('app-tab'),
tabBar = tabs.getTabBar(),
tabIndex;
for(var i = 0; i < tabBar.items.length; i++) {
if (tabBar.items.get(i).getText() === nodeText) {
tabIndex = i;
}
}
if (Ext.isEmpty(tabIndex)) {
/* Note: While creating the Grid Panel,here we are passing the Menu/Grid Id along with it for future reference */
tabs.add(Ext.create('DemoApp.view.grid.GenericGrid',{title:nodeText,gridId:c.id,overflowY: 'scroll',closable:true}));
tabIndex = tabBar.items.length - 1 ;
}
tabs.setActiveTab(tabIndex);
}
code in generic grid controller:
renderGridMetadata: function(genericGrid) {
var store = Ext.getStore("DemoApp.store.GenericGrid"),
gridId = genericGrid.up().gridId,
resourceURL = "resources/data/" + gridId + ".json";
var serviceInput = Util.createServiceResponse(gridId);
/*Dynamically add the proxy URL to the ViewModel
DemoApp.model.GenericGrid.getProxy().setUrl(resourceURL);*/
Ext.getBody().mask("Loading... Please wait...", 'loading');
Ext.Ajax.request({
url: Util.localGridService,
method: 'POST',
headers: {
"Content-Type": "application/json",
'SM_USER': 'arun.x.kumar.ap#nielsen.com',
'SM_SERVERSESSIONID': 'asdfadsf'
},
jsonData: {
getConfigurationAndDataRequestType: serviceInput
},
success: function(conn, response, options, eOpts) {
Ext.getBody().unmask();
var data = Util.decodeJSON(conn.responseText);
/* Apply REST WebServices response Metadata to the Grid */
var recordsMetaData = data.getConfigurationAndDataReplyType.gridConfigDataResponse.data.record;
var jsonMetaDataArray = [];
for (var c = 0; c < recordsMetaData.length; c++) {
var jsonMetaDataObject = {};
var text = data.getConfigurationAndDataReplyType.gridConfigDataResponse.data.record[c].displayName;
var dataIndex = data.getConfigurationAndDataReplyType.gridConfigDataResponse.data.record[c].columnName;
jsonMetaDataObject["text"] = text;
jsonMetaDataObject["dataIndex"] = dataIndex;
jsonMetaDataArray.push(jsonMetaDataObject);
}
/* Apply REST WebServices response data to the Grid */
var recordsData = data.getConfigurationAndDataReplyType.gridDataResponse.record;
var jsonDataArray = [];
for (var r = 0; r < recordsData.length; r++) {
var columnsData = data.getConfigurationAndDataReplyType.gridDataResponse.record[r].column;
var jsonDataObject = {};
for (var c = 0; c < columnsData.length; c++) {
jsonDataObject[columnsData[c].columnId] = columnsData[c].columnValue;
}
jsonDataArray.push(jsonDataObject);
}
store.setData(jsonDataArray);
genericGrid.reconfigure(store, jsonMetaDataArray);
},
failure: function(conn, response, options, eOpts) {
Ext.getBody().unmask();
Util.showErrorMsg(conn.responseText);
}
});
store.load();
}
});
Most likely there is only one instance of DemoApp.store.GenericGrid.
Frankly, I only guess because I see that you call Ext.getStore("DemoApp.store.GenericGrid") that implies the store is declared in stores:["DemoApp.store.GenericGrid"] array probably in the application class.
If a store is declared this way then Ext automatically creates one instance of it setting storeId to the string listed in stores:[]. Hence, Ext.getStore() returns that instance.
If you want to have two independent instances of the grid you have to create store instances yourself preferably in initComponent override.
I have a gridpanel that I build dynamically from server.
The result is the following image:
The code that I'm using after I get the data from the server is:
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
if (obj.success) {
gridStore.model.setFields(obj.data.metaData.fields);
grid.reconfigure(gridStore, obj.data.metaData.columns);
gridStore.loadRawData(obj.data.storeData, false);
}
},
Try suspendLayouts and suspendEvents before re-configuring the grid and turn it on later
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
if (obj.success) {
Ext.suspendLayouts();//Suspending layout should fast things up
gridStore.suspendEvents(); //If needed suspend the events too
gridStore.model.setFields(obj.data.metaData.fields);
grid.reconfigure(gridStore, obj.data.metaData.columns);
gridStore.loadRawData(obj.data.storeData, false);
Ext.resumeLayouts(true);
gridStore.resumeEvents();
}
}