I am currently creating a web-based Mobile App using Phonegap 1.6.0 and Sencha Touch 1.1. The app consists of a number of panels through which the user can click.
Some of these panels have textfields or textareas in them. Upon entering the panel, we want these to automatically be focused. This seems to work with textfields but not with textareas.
I have a Panel with the following component:
xtype: 'textareafield',
cls: 'jasbackblock',
id: 'addreactiontextarea',
height: '100%',
grow: true,
listeners: {
afterrender: function(cmp) {
console.log('Component rendered.');
cmp.fieldEl.dom.focus();
}
Whenever I first open the panel, it automatically focuses, which is good. However, when I leave the panel and then return to it, I cannot think of a good way to do this with events.
I have previously tried the show listener in the panel:
listeners: {
show: function(cmp) {
Ext.get('addreactiontextarea').fieldEl.dom.focus();
}
}
This gives me the following error:
Uncaught TypeError: Cannot read property 'fieldEl' of null
It seems that I cannot access the element during the show event. Is there any other event that I could use which fires every time the panel is loaded and allows me to access the textarea?
If it is any help, this is the method we call to switch from one panel to another:
function switchScreen(from, to, newArgs) {
/* Save screen information. */
if (from != -1)
historyStack.push([from, screenArgs]);
if (currentPage > 2) {
if (to != 3)
main.getComponent(3).hide();
app.getComponent(currentPage - 3).hide();
}
else
main.getComponent(currentPage).hide();
screenArgs = newArgs;
if (to > 2) {
main.setActiveItem(3);
app.setActiveItem(to - 3);
/* setActiveItem does not fire a screen's show event if it has been
* shown before. Since we want the code in the screen's show listener to
* be executed every time we switch to the screen, we call show manually
* just to fire the event. */
main.getComponent(3).show();
app.getComponent(to - 3).show();
}
else {
main.setActiveItem(to);
main.getComponent(to).show();
}
if (to == 0 || to == 1)
adMode = to;
else
adMode = -1;
currentPage = to;
}
I solved the problem. The issue was that I was not quite aware of how DOM elements worked.
Ext.get('id') returns the DOM element of the Javascript Object with the id 'id'. It does not return the object itself.
Ext.getCmp('id') returns the Javascript object with the id 'id'. Therefore, Ext.getCmp('id').fieldEl returns the same object as Ext.get('id').
Because of a bug in Sencha Touch 1.1, we chose to use the DOM focus function rather than the Sencha focus function. One can access this function by either Ext.getCmp('id').fieldEl.dom.focus() or Ext.get('id').dom.focus(). As you can see in my question, I mixed these up. Because of my lack of experience with DOM elements, I became even more confused when I tried to use an Object function this way. (Ext.get('id').reset() is simply illogical.)
If you have any questions, feel free to message.
Related
I have an app that uses ExtJS 3.3.0. It uses an EditorGridPanel in which after the store is reloaded - I would like it to preserve the scroll position of the grid rather than sending it back up to the top.
Since it's an earlier version of ExtJS - this does not work.
viewConfig: {
preserveScrollOnRefresh: true
}
I thought I had found a solution per Zeke's suggestion to use a scrollTo function like so:
//Save position
var top = grid.getView().scrollergetScroll().top;
//Restore position
grid.getView().scroller.scrollTo('top',top);
This works great - except that after it's done reloading it goes right back up to the top. Basically this would be a perfect solution if only I didn't need preserve the cursor position after reloading the store.
grid().getStore().reload({
callback: function (response) {
//Works at this point
grid.getView().scroller.scrollTo('top',top);
}
}
//However the cursor pops right back up to the top after popping out of
//reload() block
Thanks in advance
This is a little kludgy - maybe the best strategy is just not to use older versions of ExtJS - but this seems to work okay.
Basically just declare some global variables that can be seen from anywhere in the file - one is a flag to indicate that the event that triggers the reload has occured (rowClicked), and one to represent the last known position of the scrollbar
var rowClicked = false;
var prevScrollPosition = -1;
When the event occurs that will trigger the re-load - set the global variable rowClicked to true
rowclick: function(grid, rowIndex, event) {
rowClicked = true;
Then in the listeners of the grid use the rowClicked variable to determine when to re-position the scrollbar.
listeners : {
bodyscroll: function(sl, st) {
if (rowClicked) {
getScenarioLineOrderNumbersGrid().getView().scroller.scrollTo('top',prevScrollPosition);
rowClicked = false;
}
prevScrollPosition = st;
}
Kludgy - but it works.
I have tabs with forms and I want ask the user to confirm or discard their changes when changing tabs. My current code works
<uib-tab heading="..." index="3" deselect="main.onDeselect($event)" ... >
this.onDeselect = function($event) {
if(...isDirty...) {
if($window.confirm("Do you want to discard?")) {
... discard (and go to new tab) ...
} else {
$event.preventDefault(); //stays on current tab
}
}
}
The problem is I want to change confirm to javascript dialog and I will get result in callback.
I planed to preventDefault() all and then switch manually, but I cannot figure out where to get new tab id.
Any solution is appreciated. Even if it is easier in other tab implementations.
I use AngularJS v1.4.7, ui-bootstrap-tpls-1.3.3.min.js
You can make use of $selectedIndex and the active property for that purpose. See this Plunk
One thing to be noted here is that when we manually change the active property, it again fires the deselect event which needed to be handled. Otherwise it seems to do what you wanted.
Edit
Indeed as noted in the comments, the deselect carries the HTML index rather than what is passed in in the tab index property. A workaround could be in this: Another Plunk. Here I'm pulling the actual index from the HTML index.
And a little research indicates that this issue might as well be fixed already with 3.0 bootstrap tpl See this.
I spent some time with different approaches and this one is stable for some time. What I do is to prevent deselect at the beginning and set the new tab in callback if confirmed to loose changes...
this.onDeselect = function($event, $selectedIndex) {
var me = this;
if(this.tabs.eventDirty || this.tabs.locationDirty || this.tabs.contractDirty) {
$event.preventDefault();
var alert = $mdDialog.confirm({
title: 'Upozornění',
textContent: 'Na záložce jsou neuložené změny. Přejete si tyto změny zrušit a přejít na novou záložku?',
ok: 'Přijít o změny',
cancel: 'Zůstat na záložce'
});
$mdDialog
.show( alert )
.then(function() {
$rootScope.$emit("discardChanges");
me.tabs.activeTab = $selectedIndex;
})
}
};
enter code hereI have a window in which I have a form with trigger fields. So by trigerring I mean , if I select a value from first combo, its trigerring the succeding combos with their's first values. This is working fine when I open the window for the first time. But if close it and open it for the second time, it will generate error as me.store.loading is undefined.
I am using on load event of combo to fire the next combo with its first value. Please see code below which I have put in the render event of a field in that window.
Thanks,
sj
me.control({
'addinp #renderCmp':{
render:me.registerTriggerCalls
}
})
registerTriggerCalls : function() {
var stcombo = Ext.getCmp('StField');
stcombo.store.on('load', function(store, record, opts)
{debugger;
if (store.totalCount <= 0)
{ return; }
stcombo.setValue(store.getAt(0).data.stThru);
stcombo.fireEvent('select', stcombo);
});
var adcombo = Ext.getCmp('AdField');
adcombo.store.on('load', function(store, record, opts)
{
if (store.totalCount <= 0)
{ return; }
adcombo.setValue(store.getAt(0).data.adDate);
adcombo.fireEvent('select', adcombo);
});
}
When does the store get created/destroyed? Are you creating a new store with each combo box or are you reusing a global store each time?
In the comments above, I give you a way to troubleshoot, but if you're reusing the same store object over and over, you either need to use a managed listener (preferred) or unregister your handlers when your combo boxes are destroyed.
var stcombo = Ext.getCmp('StField');
stcombo.mon(store, 'load', function(store, record, opts)
{
if (store.totalCount <= 0)
{ return; }
stcombo.setValue(store.getAt(0).data.stThru);
stcombo.fireEvent('select', stcombo);
});
var adcombo = Ext.getCmp('AdField');
adcombo.mon(store, 'load', function(store, record, opts)
{
if (store.totalCount <= 0)
{ return; }
adcombo.setValue(store.getAt(0).data.adDate);
adcombo.fireEvent('select', adcombo);
});
Assuming that's the case, what's happening is that the life span of your store and your combo box is disconnected. The listeners are tied to the store's life span which doesn't have visibility to the combo box's life span. Hence, the old listeners don't get removed until the store is destroyed which is obviously bad -- for a number of reasons -- but causing your exception because the closure references a destroyed combo box.
A managed listener solves this by essentially tying the listener's life span to the combo box instead of the store.
I need to get(retrieve) updated cell value in controller. (MVC)
So I tried this,
var modified = this.getItemGrid().getStore().getUpdatedRecords();
console.log(modified); // return [] empty array
var modified = this.getItemList_Store().getUpdatedRecords();
console.log(modified); // return [] empty array
but always it returns empty array even I updated some cell value.
anybody know what I am doing wrong?
Here is my part of view code,
Ext.define("App.view.orders.ItemList_view", {
extend: "Ext.grid.Panel",
alias: "widget.itemList_view",
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
initComponent: function () {
this.store = "ItemList_store";
this.columns = [
{
xtype: 'checkcolumn', text: "Ship", width: 50, dataIndex: "DR"
},
{ header: "test", width: 100, dataIndex: "test",
editor: {
xtype : 'textfield'
}
}
];
this.selModel = Ext.create("Ext.selection.CheckboxModel");
//this.selModel = Ext.create("Ext.selection.CellModel"); // It does not works either.
this.callParent(arguments);
},
.
.
.
Thank you!
[EDIT]
Thank you very much for your answer! I have some more question about editor grid.
Its much different from Ext3. so I'm very confusing now :(
Q1. How to collect edited record data (once click button)?
the event fired once the grid cell be changed.
but I want collect edited grid record once I click the 'Update edited cell' button, and I want to update all together at the once.
In Ext3, I did like this,
(button) click : function(){
var modified = mygridStore.getModifiedRecords();
var recordsToSend = [];
Ext.each(modified, function(record){
recordsToSend.push(record.data);
});
var grid = Ext.getCmp('grid');
grid.el.mask('Updating','x-mask-loading');
grid.stopEditing();
recordsToSend = Ext.encode(recordsToSend);
Ext.Ajax.request({
url : '/test/test',
params : {
data : recordsToSend
},
success : function(response){
grid.el.unmask();
alert(response.responseText);
mygridStore.commitChanges();
},
failure : function(response){
mygridStore.rejectChanges();
}
});
}
How can I change the code for Extjs4 ?
Q2. I don't know still how to find out for changed checkcolumn.
I tried this, but I does not work for checkcolumn (of cause I tested after change checkbox)
// grid coumn
{
xtype: 'checkcolumn', header: "My Check Column", width: 50, dataIndex: "CH"
}
-
// in control
'myGrid': {
validateedit: function (plugin, edit) {
console.log(edit);
},
checkchange: function (plugin, edit) {
console.log(edit);
console.log(edit.value);
}
}
Q3. When I click the cell to edit, the show some HTML tag in -_-;;
I really appreciate for your help. and thank you very much for your valuable time!
The editors (cell editors or row editors) do not commit their values to the store until you complete the edit - which means pressing ENTER or blurring the active cell editor by clicking elsewhere on the page, or clicking the save button on the row editor form .
If your purpose for reading the updated value in your editor is to perform some kind of validation I would suggest simply listening to the validateedit event in your grid's controller, as described here.
The second argument that this event passes to your handler contains a lot of data about the edit that you can then perform validation with. If the edit doesn't pass your validation you can return false from your handler and the value in the celleditor will revert to it's original value. The validateedit event gets fired from the editor grid itself so you would add an event handler in your controller for it like this:
Ext.define('MyApp.controller.MyController', {
init: function() {
this.control({
'mygridpanel': {
validateedit: function(plugin, edit) {
// silly validation function
if (edit.value != 'A Valid Value') {
return false;
}
},
},
});
},
});
But you should check out the link above to see all the different objects available in that second argument I named edit.
The validateedit event is fired right before the record is committed into the store - after the user has already clicked ENTER or blurred the editor, i.e., while the editor is closing.
If you are trying to get the celleditor's value before it starts to close, for some reason other than validation for example, you could get the active celleditor's value like this:
// myGrid is a reference to your Ext.grid.Panel instance
if (myGrid.editingPlugin.editing) {
var value = myGrid.editingPlugin.getActiveEditor().field.value
console.log('value: ' + value);
}
If there is no active editor then myGrid.editingPlugin.getActiveEditor().field would throw an error, that's why I wrapped a conditional around it.
One other point I should make, for validation in editor grids, I found that it is easiest to just put a validator config in the grid column's editor definition. That will give you all the handy validation CSS while the user is setting the field's value and alert him if there is a problem with the value before he tries to save it.
To get an idea of what I mean, try entering letters in the date column of this example. Mouse over the editor cell and you will get the error message.
EDIT
It seems I misunderstood you original question, I'll break down my answers to your questions above though,
Question 1
Once you have completed an edit (clicked ENTER or ), your call to mygridStore.getModifiedRecords() should be working fine because the record will have been committed to the store. I see that it was not working, I will cover that in a moment.
I should point out that ExtJS4 has a store.sync() method as covered here.
Instead of extracting the modified records from the store, encoding them, manually doing an ajax request to save them to the server and then manually committing them you can call this sync method and it will take care of all of these actions for you.
If you have different URLs to handle the different create, read, update, destroy operations fired off by your store's load and sync methods, you can use the store's proxy api config to map your URLs to these operations as covered here. Or you can set-up your server side controller to be able to differentiate between your store's load request (read operations default to HTTP GET) and it's sync requests (create, update and delete operations default as HTTP POST).
There could be many different ways to go about doing this on the server side, the way I usually do it is to have one SQL stored procedure for GET requests and one for POST requests for any given store. I include the store name as an extra param and then my server side controller runs the appropriate stored procedure based on whether it is a GET or a POST request.
Question 2
Cell editing doesn't support checkcolumn edits. You have to make a different handler to listen to changes on that, something like this:
checkchange: function (column, rowIndex, checked) {
var record = store.getAt(rowIndex),
state = checked ? 'checked' : 'unchecked'
console.log('The record:');
console.log(record)
console.log('Column: ' + column.dataIndex);
console.log('was just ' + state)
}
Your call to mygridStore.getModifiedRecords() should be able to pick up the check changes also however, they get committed to the grid's store right away after being checked. store.sync() would also pick up changes to checkcolumn.
Question 3
I can't completely tell what is causing that problem but it may be something strange going on with your validateedit event, your handler should be returning true or false.
As I said earlier, I misunderstood the reason you originally asked this question. I thought you were trying to do some kind of validation while an edit was in progress. Now I understand that you are trying to get all of the modified records from the store after all the editing is completed in order to save them to the database, I was thrown off because in ExtJS 4 a store is usually saved to the database with the sync method as I mentioned.
In other words, you don't need the validateedit event or checkchange event to get a list of modified records.
The actual problem you are having might be trouble with the store's getter methods (getModifiedRecords, getUpdatedRecords) in some 4.07 versions, take a look at this post and this one.
So with all that said, the best advice I can give you is 1) try out the stores sync method for saving modified data to the database and 2) upgrade to ExtJS 4.1, there were a lot of bugs that were straightened out between 4.07 and 4.1 which you should be able to take advantage of, I cut out about 75% of the overrides I was using to make things work when I switched over to 4.1.
EditedGrid.plugins[0].completeEdit();
This will make the active changes commit and call edit event also.
listeners: {
validateedit: function (editor, e) {
//console.log(editor);
var oldVal = editor.originalValue;
var newVal = editor.value;
}
}
I have implemented scrollable extjs tab panel in our product. But I also need to support accesskey functionality. For example, an "Alt + P" keystroke will open up one of tab. Does anyone have any experience about implementing this?
The core to this is creating a keymap to recognise you are pressing a combination of keys, once this is detected you can then add a custom handler.
See here: http://dev.sencha.com/deploy/dev/docs/?class=Ext.KeyMap
eg:
var map = new Ext.KeyMap("my-element", [
{
key: [10,13],
fn: function(){ alert("Return was pressed"); }
}, {
key: "abc",
fn: function(){ alert('a, b or c was pressed'); }
}, {
key: "\t",
ctrl:true,
shift:true,
fn: function(){ alert('Control + shift + tab was pressed.'); }
}
]);
Above are a number of sample mappings, you simply replace 'my-element' with the element you wish to look for the key presses on (so which element when selected will detect them). If you wish to have APPLICATION wide key mapping, this element should either be the body of the page, the window itself or the ExtJS Viewport (if you are using one) / Master element. This will mean you can be within any area of your application and the keypress is detected. The subsequent behaviour you define under the 'fn' property (i.e. change tab etc)...