I am using GWT 2.4 and I have an EditorGridPanel in my page for which I want to have a onload functionality. Actually after grid is loaded with rows, I would like populate my form fields with first row values automatically. How can write a listner/handler to execute this logic in gwt.
When your passing datastore values to grid.. try to get first record
store.getModels(); or store.getAt(index) or getRecordAt(index)
once you got record check not null and set values in form.
You can do this after gird loaded by set timer to some milliseconds delay. is this you need..
You don't need a handler for this. Typically, you would have an Activity or Presenter that drives these actions. When you receive your data from a server, you would do something like:
myView.populateMyGrid(ArrayList<MyObject> objects);
myView.populateMyPanelWithFirstRow();
Alternatively, you can add this to the method which populates your grid:
displayItems.addAll(objects);
populateMyPanelWithFirstRow(displayItems.get(0));
Actually when I call loadGrid method on my grid to load rows, it is taking some time to load it (because data has to come from database, but by that time the client code to populate form field with row data which is written after loadGrid method is getting executed and it ended up with not populating anything in my form field as the grid was empty by that time.
So, what I did was that I have added a listener(addStoreListener) to the store of my grid like below and written my logic inside the onLoad method, it worked perfectly.
myGrid.getMyStore().addStoreListener(new StoreListenerAdapter() {
public void onLoad(Store store, Record[] records) {
...
}
});
Related
I have sap.ui.table.Table which rows are bound to an JSONModel.
var oListModel = new sap.ui.model.json.JSONModel();
//oTable created here (sap.ui.table.Table)
oTable.setModel(oListModel);
oTable.bindRows("/");
When the table is rendered, i.e. the DOM is created for this table, i need to reference to the DOM to pass the DOM elements (table rows) to a library which will make them draggable.
My problem is: How do i know when the DOM for the table is created after the model has been changed and the table is rerendered? I didnt find any listener. The view controller's listener onAfterRendering() didn't help me.
The model is filled with data after a XMLHTTPRequest is successful. When i set the model in the success handler of the xht request and try to access the DOM elments directly afterwards they don't exist yet.
Thank you for your help!
You can add an event delegate
var oMyTable = new sap.ui.table.Table();
oMyTable.addEventDelegate({
onAfterRendering: function() {
$table = this.getDomRef() ....
}
});
a better way is to extend the control see Using addDelegate to extend a control to use third party functionality
UPDATE
the example in that blog doesn't work anymore fixed here
I had a similar issue recently where i had to access an element after a smartform (where the element is present) rendered onto the view. I posted my query here as well as my final solution (based on the accepted answer of #Dopedev). I am using XML views - including nested XML views - here however and the onAfterRendering didn't help for me as well.
I guess you could look at this solution - like it's mentioned in the accepted answer, it may not be an optimal solution, but it sure works. In my case there is not much of a performance issue with the binding of the DOMNodeInserted since it is being called in the onAfterRendering of the nested view that consists of only the smartform with an immediate unbinding upon finding.
The condition if (id === "yourtableid") { } should be enough to identify and pass on. Since you have a table and thus several child nodes, unbinding is imperative at this point.
Mutation Observer is the preferred method but i guess you may need to check the browser compatibility table at the end of the page to see if it matches your requirements. There is an example here. I have used Mutation Observer (outside of a SAPUI5/openUI5 environment) earlier and found it very convenient(and performant) to listen to DOM insert events. In fact the sap.ui.dt package consists of MutationObserver.js
I have been trying GWTP for the past couple of weeks and building a small project with it.
Here's the question :
I have a grid widget (attached screenshot) which shows a list of data. On selection of a checkbox of a row and clicking on Edit Request, I get into a detail page.
Since I have all the data (model) to be shown in the detail page in the summary screen presenter itself, I don't want to fetch it from the database again.
So, I did the following :
On selection and clicking edit request, I get the selected model
Make a place request to the detail page
Fire an edit event and pass the selected model as parameter.
I understand that I am doing it wrong because when I select an item and hit Edit Request, the detail page does not receive the selected item yet. It just shows a blank page with no data filled in (obviously, because the place has been reached much before the event has been fired).
Current code :
RequestModel selectedItem = getView().getGrid().getSelectionModel().getSelectedItem();
PlaceRequest placeRequest=new PlaceRequest(NameTokens.initiationedit);
getEventBus().fireEvent(new RequestEditEvent(selectedItem, PHASE_INITIATION));
placeManager.revealPlace(placeRequest);
Personally thought solution : Instead of firing an event, I could make a placerequest with a parameter of the selected item's id and then override the useManualReveal and the prepareFromRequest to fetch data fresh from database.
But is there a way I could avoid database call for the pre-existing data.
If you want to keep your current "RequestEditEvent" solution, then make sure to use #ProxyEvent (see http://code.google.com/p/gwt-platform/wiki/GettingStarted?tm=6#Attaching_events_to_proxies).
Another possibility may be to invert the direction of the event: In your details presenter, fire an event which requests data from the overview presenter.
However, when using the same data across multiple presenters, then it may be a good idea to keep the data in a central model: Create a model class (#Singleton) and inject it everywhere you need it. Then you can make a lookup (by id) from that local model instead of asking the server. In this case, you don't need any events - just the id somewhere, e.g. as a place parameter, or even as a "currentItemId" in the model.
Based on the answer by #Chris Lercher, I used the ProxyEvent. The implementation details are as follows.
In my RequestEditPresenter (the details presenter), I implemented the event handler RequestEditHandler as in
public class RequestEditPresenter extendsPresenter<RequestEditPresenter.MyView, RequestEditPresenter.MyProxy> implements RequestEditHandler{
then in the same RequestEditPresenter override the method in the RequestEditHandler as in
#Override
#ProxyEvent
public void onRequestEdit(RequestEditEvent event) {
getView().setModelToView(event.getRequestModel());
...various other initiation process...
placeManager.revealPlace(new PlaceRequest(NameTokens.initiationedit));
}
Since the Details presenter was a Place, I used the placeManager. For presenters that do not have a NameToken, just call the forceReveal() method
I have created a extjs form which is divided into 2 parts using column layout and have almost 10-15 input elements in it. How can i disable all these input elements at a time depending on a condition. Currently i have created a function which fetchs all the components in a form and using ext.each loop through each element to disable them
Here is the function that i use
function prepare_form_view(form){
var f=Ext.getCmp(form);
var els=f.query('component');
Ext.each(els,function(o){
var xtype=o.getXType();
if(xtype=='textfield'||xtype=='combobox'||xtype=='datefield'||xtype=='textareafield'||xtype=='button'){
o.disabledCls='myDisabledClass';
o.disable();
}
});
}
Is there any alternative way so that I can disable all elements without looping through each and every elements. I want to use this function with other forms too. I looking for something like 'setFieldDefult' function.
If you are using FormPanel in ExtJs 4.x this is what you are looking for -
yourFormPanel.getForm().applyToFields({disabled:true});
The getForm() method returns the Ext.form.Basic object, with this class, you also could access to all the fields on this form with getFields(), then you could iterator all the fields to do anything.
Hope this helps and good luck:-)
What about panel's disable/enable method? This seems much easier.
panel.disable();
panel.enable();
Here is a suggestion.. Since, you say your form is divided into two parts why don't you put them in a FieldSet ? You can disable the fieldset as a whole with one method ie, setDisabled.
This will avoid the looping of components and disabling / enabling them one after the another.
You could use the cascade function of the form panel which is the ExtJs way to to do it but if you check the source code of the cascade function you will see that it uses a for loop also. The only benifit of using the cascade function is that it will work also for forms with nested panels. I think that your implementation will not work properly a case like that.
I have a window with a search form at the top and grid at the bottom.
User can enter values in the search form and click button - Get Records.
At the click of this button, I load the store of the grid by passing the values in form fields as parameters in following way:
store.load({
params:{
key1:Ext.getCmp('field1').getValue();
}
});
I tried giving parameters in the store proxy itself, but it unfortunately always takes up initial values (values when the form is rendered) and not the latest one entered by the users in the form fields. Following is the method I used for assigning values to params while creating the store:
extraParams:{
key1:Ext.getCmp('field1').getValue();
}
I wanted to seek guidance at two things:
a. While defining a store, can I ensure that store takes latest/current values from the form fields before querying server, so that I don't have to provide these values while calling load function?
This becomes more necessary as I have a paging toolbar at the bottom which carries a refresh button (along with next, last, previous, first icons for navigation).
Now, whenever user clicks at refresh (or any navigation icon), the store gets loaded without the query parameters.
Thus the second thing is:
b. If the answer of 'a' is that - Pass the latest values to parameters manually when calling load function - then how can I write the handler for 'refresh' button and navigation icons (that is, next, last, previous and first) in the paging toolbar, so that I can pass the latest form values to load function.
Thanks for any help in advance.
PS: I am using ExtJS 4.
yourStore.on('beforeload',function(store, operation,eOpts){
operation.params={
status:cmbStatus.getValue(),
value:txtBuscarPor.getValue(),
empresa:'saasd',
app:'dsads'
};
},this);
Related to your question (b) (and because you especially asked for this in the comments section):
I see only one standard way to hook into the PagingToolbar button handlers which is very limited.
Ext.toolbar.Paging fires a 'beforechange' event before it actually changes the current page. See API docs. A listener that returns false will stop the page change.
All other methods require extending Ext classes which wouldn't be a problem if the ComboBox would make it easier to use your own implementation of BoundList (which is the class that renders the dropdown) or pass through config parameters to BoundList resp. the paging toolbar.
I tried to bring this lack of flexibility up on the Ext message board once but was pretty much ignored.
A possible solution for this is to use 'beforeload' event of the store and provide the list of parameters in it. This way, whenever the store is loaded, then its beforeload event is fired and the values picked up are always the latest. Hope this helps someone looking for something similar.
OK, let's start with the Html.Textbox. It is supposed to contain text read from a file. The file read is based on what the user picks from a dropdown list.
The first time it is fine. The user picks a value from the dropdown list. The controller uses that value to read some text from a file, and returns that text to the view via the view model. Everything is fine.
THen the user picks another value from the dropdown list. The controller reads a new value from a file and returns it via the view model. Debugging to the LINE BEFORE THE HTML.TEXTBOX is set in the view shows that the model contains the correct value. However, the textbox itself still shows the PREVIOUS value when the page displays!
If I switch from Html.Textbox to a plain input, type="text" html control, everything works fine. That's not so hard, but the same thing happens with my dropdown list -- I can't set the selected value in code. It always reverts to whatever was chosen last. Rendering a "select" tag with a dynamically-generated option list is a pain. I would love to be able to use Html.Dropdown.
What am I missing here?? This is such a simple thing in webforms!
When you post a form, the values that are posted are put into ModelState. When the HtmlHelper renders an html iunput element, e.g. Html.TextBoxFor(x => x.FirstName), it'll search various locations to get the value for the textbox... ModelState is before ViewData.Model in the list of locations. So there for, the previously posted value will appear in your textbox.
To fix this you could clear the ModelState value or update the ModelState value. BUT I would kinda view that as a hacky way of getting around the problem.
The real issue has more to do with the flow of the posts and requests. I would personally look into that and maybe implement the PRG (Post Redirect Get) pattern.
HTHs,
Charles
Following on from what Charles/Charlino said:
Model binding updates the ModelState object, which contains validation and model binding errors that are collected during model binding.
Inside an action method, model binding has occurred already to update the model, and generated the ModelState object. If you now update the value on the model inside the action, you must also manually update the model state (since the helpers use it to generate their HTML). Below is an example:
model.CaptchaIsValid = CaptchaService.ValidateAndExpireCaptcha(model.CaptchaAttempt);
if (!model.CaptchaIsValid)
{
ModelState.AddModelError("CaptchaAttempt", "Incorrect - please try again");
}
// I'll clear the value on each attempt, to force them to re-enter a CAPTCHA.
model.CaptchaAttempt = string.Empty;
// Since I updated the model, I must create a new ValueProvider result...
ValueProviderResult clearedValue = new ValueProviderResult(
model.CaptchaAttempt,
model.CaptchaAttempt,
CultureInfo.CurrentCulture);
// ... and update the ModelState's value.
ModelState.SetModelValue("CaptchaAttempt", clearedValue);
The biggest issue I see here is that you are trying to do a postback within MVC. That model is really not supported, and is actually way more trouble than it is worth (as it seems you are finding out). I would recommend using Ajax to update the contents of the dropdown dynamically.