I'm trying to build modal windows on the fly from single javascript object passed by server.
But I have no clue how can I serialize form inside modal window without defining form variable .
In most examples serialize process look like this:
//create form
var CustomForm = new Ext.FormPanel({...});
//submiting form
CustomForm.getForm().submit({...});
In my case all inner components like "form" are created from xtype value,and no variable is assigned to it.
Is there any way to select and serialize form using something like this:
Ext.get(this).select('form').serialize();
or what is apropriate way of doing so?
You can assign the form an id and use Ext.getCmp(formid).
To retrieve the form values of a FormPanel use myFormPanel.getForm().getValues()
That will come back with a js object representing the form fields.
I wrote a function to take values from a form and generate a string for adding to the query string:
/**
* takes an array of form values and converts them into a
* query string
*
* #param {object} Ext.form
* #return {string}
*/
this.serialize_form_values = function(form)
{
var serial = '',
values = form.getValues();
for(var value in values)
serial += '&' + value + '=' + values[value];
return serial.substr(1);
};
Maybe it could be useful for someone?
Related
I am trying to use the createElement method explained in the following link:
http://htmlunit.sourceforge.net/apidocs/com/gargoylesoftware/htmlunit/html/InputElementFactory.html#createElement-com.gargoylesoftware.htmlunit.SgmlPage-java.lang.String-org.xml.sax.Attributes-
For this I am trying to use the following code:
HtmlPage page = webClient.getPage("http://...");
HtmlCheckBoxInput checkBox = (HtmlCheckBoxInput) page.createElement("checkbox");
But the createElement method returns an HtmlUnknownElement object. How can I create the checkbox element?
The following code is working while creating an input text element:
HtmlElement tmpCheckBox = (HtmlElement) pageClientInput.createElement("input");
Following the suggestion given here I have tried this other way:
HtmlElement tmpInput = (HtmlElement) page.createElement("input");
tmpInput.setAttribute("type", "checkbox");
HtmlRadioButtonInput tmpCheckBox = (HtmlRadioButtonInput) tmpInput;
tmpCheckBox.setChecked(true);
But I am getting an exception casting the HtmlElement to HtmlRadioButtonInput:
java.lang.ClassCastException: com.gargoylesoftware.htmlunit.html.HtmlTextInput cannot be cast to com.gargoylesoftware.htmlunit.html.HtmlRadioButtonInput
I need an HtmlRadioButtonInput in order to use the setChecked method. HtmlElement doesn't have setChecked method available.
Your code wont work because HtmlPage.createElement can't choose the correct Element Factory without attributes. Which you cannot set through this method.
You can access the correct element factory through InputElementFactory and setting the type as checkbox, as below.
WebClient webClient = new WebClient();
webClient.getOptions().setCssEnabled(false);
HtmlPage page = webClient.getPage("http://...");
//Attribute need to decide the correct input factory
AttributesImpl attributes = new org.xml.sax.helpers.AttributesImpl();
attributes.addAttribute(null, null, "type", "text", "checkbox");
// Get the input factory instance directly or via HTMLParser, it's the same object
InputElementFactory elementFactory = com.gargoylesoftware.htmlunit.html.InputElementFactory.instance; // or HTMLParser.getFactory("input")
HtmlCheckBoxInput checkBox = (HtmlCheckBoxInput) elementFactory.createElement(page, "input", attributes);
// You need to add to an element on the page
page.getBody().appendChild(checkBox);
//setChecked like other methods return a new Page with the changes
page = (HtmlPage) checkBox.setChecked(false);
Your createElement call produces an HtmlUnknownElement because there is not checkbox html tag. To create a checkbox you have to create an input with type 'checkbox'.
Start here to read more about html and checkboxes.
I am having a problem to display header tooltip on angular-ui-grid.
Here is plunker demo.
Any idea how to make it work?
I have not been able to figure out how to make the directive work properly internally by setting the headerTooltips as strings. The directive developers are making it work using a different implementation than yours that can be seen in this Plunker.
This solution will patch the problem until a better or more permanent one can be found. Place it at the end of your service call inside of your controller like the following.
upareneStavkePromise.then(function(upareneStavkeData){
$log.debug(upareneStavkeData);
$scope.ucitaniUpareniPodaci = true;
$scope.gridOptionsUpareniPodaci.data = upareneStavkeData.grupe;
upareneStavkeTotals = upareneStavkeData.totals;
/*
* Patch for possible bug:
* Description: Setting headerTooltip property
* value as a string doesn't render the value at
* runtime.
*
*/
//class for the header span element
var headerClass = ".ui-grid-header-cell-primary-focus";
//the column definitions that were set by the developer
var colDefs = $scope.gridOptionsUpareniPodaci.columnDefs;
//Get the NodeList of the headerClass elements.
//It will be an array like structure.
var headers = document.querySelectorAll(headerClass);
//loop through the headers
angular.forEach(headers,function(value,key){//begin forEach
//Set the title atribute of the headerClass element to
//the value of the headerTooltip property set in the columnDefs
//array of objects.
headers[key].title = colDefs[key].headerTooltip;
});//end forEach
/****************END PATCH********************/
});
I have got:
Ext.define("catcher.view.Login", {
extend: "Ext.form.Panel",
// creating login form, including selectfield
Store "Tournaments" is created in stores (autoload:true), have its model. Everyting is set.
need to dynamicly fill selectfield (still in view.Login class):
initialize: function(){
var store = Ext.getStore("Tournaments");
var options = new Array();
store.each(function(radek){
options[radek.get("tournament_id")] = radek.get("tournament_name");
});
}
I do not want to use store:"Tournaments" config options, because of later form.submit(); does not send correct data from selectfield.
There is the problem: console.log(store.getCount()); returns 0. Using store.add({ ... }) I can add anything and getCount() returns corrent count (0 + add()).
Weird part: console.log(store) returns whole class including data object with all items inside. And next weird part - If I use the same code in controller, everything works, the Store is loaded properly and I can use mystore.each();
Store loading is asynchronous, by the time you're accessing it, it's not loaded. You need to listen to the store load event.
Something like:
store.on('load', function(storeRef, records, successful){
//Loop through records
}, this);
on() documentation
load event documentation
I'm trying display some data loaded from a datastore and it's not reflecting changes on the UI. I created an example to show a general idea of what I'm trying to achieve.
http://plnkr.co/edit/MBHo88
Here is the link to angularjs example where they show when on click then dropdowns are clear out. If you replace the expression with one of the colors of the list dropdowns are well selected. Does this type of selection only work on user events?
http://docs.angularjs.org/api/ng.directive:select
Help is appreciated!!!
Actually the problem is that ngSelect compares objects using simple comparition operator ('=='), so two objects with same fields and values are considered as different objects.
So you better use strings and numbers as values ('select' parameter in expression of ngSelect directive).
Here is kind of solution for your plunker.
Aslo there are some discussion about this topic on GitHub:
https://github.com/angular/angular.js/issues/1302
https://github.com/angular/angular.js/issues/1032
Also as I headred there is some work in progress about adding custom comparor/hashing for ngSelect to be able to use ngSelect more easier on objects.
One mistake in the initialization of your controller. You have to refer to the objects in your palette, since these are watched on the view:
$scope.selectedColors.push({col: $scope.palette[2]});
$scope.selectedColors.push({col: $scope.palette[1]});
Same with your result:
$scope.result = { color: $scope.obj.codes[2] };
Then you need to watch the result. In the below example, select 1 receives the value from the initiating select, the second receives the value below in the palette. I don't know if that's what you wanted, but you can easily change it:
$scope.$watch('result', function(value) {
if(value) {
var index = value.color.code -1;
$scope.selectedColors[0] = {col: $scope.palette[index] };
$scope.selectedColors[1] = {col: $scope.palette[Math.max(index-1, 0)] };
}
}, true);
See plunkr.
Ok, I think I figured this out but thanks to #ValentynShybanov and #asgoth.
According to angularjs example ngModel is initialized with one of the objects from the array utilized in the dropdown population. So having an array as:
$scope.locations = [{ state: 'FL', city: 'Tampa'}, {state: 'FL', city: 'Sarasota'} ....];
And the dropdown is defined as:
<select ng-options="l.state group by l.city for l in locations" ng-model="city" required></select>
Then $scope.city is initialized as:
$scope.city = $scope.locations[0];
So far so good, right?!!!.. But I have multiple locations therefore multiple dropdowns. Also users can add/remove more. Like creating a table dynamically. And also, I needed to load data from the datastore.
Although I was building and assigning a similar value (e.g: Values from data store --> State = FL, City = Tampa; Therefore --> { state : 'FL', city : 'Tampa' }), angularjs wasn't able to match the value. I tried diff ways, like just assigning { city : 'Tampa' } or 'Tampa' or and or and or...
So what I did.. and I know is sort of nasty but works so far.. is to write a lookup function to return the value from $scope.locations. Thus I have:
$scope.lookupLocation = function(state, city){
for(var k = 0; k < $scope.locations.length; k++){
if($scope.locations[k].state == state && $scope.locations[k].city == city)
return $scope.locations[k];
}
return $scope.locations[0]; //-- default value if none matched
}
so, when I load the data from the datastore (data in json format) I call the lookupLocation function like:
$scope.city = $scope.lookupLocation(results[indexFromSomeLoop].location.state, results[indexFromSomeLoop].location.city);
And that preselects my values when loading data. This is what worked for me.
Thanks
For example, say I have a server API for loading people that handles requests like this: GET /people/?id=101,329,27
I'd like to build a Store (probably a custom class that extends Ext.data.Store) which--assuming it has a list of people IDs--causes the proxy to make a request like the one shown above so that the returned data is only for that subset of persons.
I saw the documentation regarding remote filtering, but my concern is that to use it I would first need to call store.load() which would load all persons, then call filter() to do remote filtering. I'd like to just load the subset of persons the first time.
Thanks for any advice!
Found a solution (although still open to hearing other ideas).
First, you can call a store's load() function with a config object that will be passed to an operation. The API docs for Ext.data.Operation make it clear that one of the config options is for an array of Filter objects, so you can do this:
var idFilter = Ext.create('Ext.util.Filter', {
property: 'id',
value: '100,200,300'
});
myStore.load({
filters: [ idFilter ]
});
This results in a request where the URL querystring contains ?filter=[{"property"%3Aid%2C"value"%3A100,200,300}] (in other words, a URL-encoded version of [{ property: 'id', value: '100,200,300'}]).
You can also just call myStore.filter('id', '100,200,300') without having called .load() first. Assuming you have remoteFilter=true in your store, this will make a request with the same query params shown agove.
Sidenote: you can change the keyword used for 'filter' by configuring the 'filterParam' config option for the proxy. For example, if filterParam=q, then the querystring shown above changes to: ?q=[{"property"%3Aid%2C"value"%3A100,200,300}]
Second, you can control "structure" of the filter in the querystring. In my case, I didn't want something like filter={JSON}, as shown above. I wanted a querystring that looked like this:?id=100,200,300
For this I needed to extend a proxy and override the default getParams() function:
Ext.define('myapp.MyRestProxy', {
extend: 'Ext.data.proxy.Rest',
/**
* Override the default getParams() function inherited from Ext.data.proxy.Server.
*
* Note that the object returned by this function will eventually be used by
* Ext.data.Connection.setOptions() to include these parameters via URL
* querystring (if the request is GET) or via HTTP POST body. In either case,
* the object will be converted into one, big, URL-encoded querystring in
* Ext.data.Connection.setOptions() by a call to Ext.Object.toQueryString.
*
* #param {Ext.data.Operation} operation
* #return {Object}
* where keys are request parameter names mapped to values
*/
getParams: function(operation) {
// First call our parent's getParams() function to get a default array
// of parameters (for more info see http://bit.ly/vq4OOl).
var paramsArr = this.callParent(arguments),
paramName,
length;
// If the operation has filters, we'll customize the params array before
// returning it.
if( operation.filters ) {
// Delete whatever filter param the parent getParams() function made
// so that it won't show up in the request querystring.
delete paramsArr[this.filterParam];
// Iterate over array of Ext.util.Filter instances and add each
// filter name/value pair to the array of request params.
for (var i = 0; i < operation.filters.length; i++) {
queryParamName = operation.filters[i].property;
// If one of the query parameter names (from the filter) conflicts
// with an existing parameter name set by the default getParams()
// function, throw an error; this is unacceptable and could cause
// problems that would be hard to debug, otherwise.
if( paramsArr[ queryParamName ] ) {
throw new Error('The operation already has a parameter named "'+paramName+'"');
}
paramsArr[ queryParamName ] = operation.filters[i].value;
}
}
return paramsArr;
}
});
You can also get your Model object to load a record of itself. From a controller you can do:
this.getRequestModel().load(requestID,{ //load from server (async)
success: function(record, operation) {
.....
}
}
where Request is a model class and requestID is an ID to look up. In this scenario Model object needs to define the proxy too:
proxy: {
type: 'ajax',
reader: {
type:'json',
root: 'data'
},
api: {
create : 'request/create.json', //does not persist
read : 'request/show.json'
}
}