I have a form with a combo box in it. The combo box loads it's data via a Json store and I use form.getForm().load( url: 'URL') to load the forms data also from a Json store.
When the data is loaded into the form I can see via Firebug that it receives the right value, the combo then displays the correct corresponding display value. When I look at the HTML in FireBug for the hiddenField it says the value="DISPLAYVALUE" not value="VALUE". When I then pick any value from the combo it changes to the correct value="VALUE".
Of course if the user never changes the combo the wrong value is submitted. Is this by design/limitation or am I missing something.
Do I really need to load and verify the data for each combo before I do the getForm().load()? wouldn't it make sense for load() to just load the complete data even if that means loading the data from a store?
I've included simplified sample code that has the issue.
Ext.onReady(function(){
var frmClientRecord = {
xtype: 'form',
items: [
{
fieldLabel: 'Advisor',
xtype: 'combo',
id: 'advisorName',
displayField: 'Advisor',
valueField: 'advisorId',
hiddenName: 'advisorsId',
mode: 'remote',
store: new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: '/referrals/index.php/advisors/read',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'results',
fields: [
{name: 'advisorId'},
{name: 'Advisor'}
]
})
})
}
]
}
frmClientRecordCmp = new Ext.FormPanel(Ext.apply(frmClientRecord));
frmClientRecordCmp.getForm().load({
url: '/referrals/index.php/clients/getbyid/100',
})
frmClientRecordCmp.render(document.body);
});
JSON FOR THE COMBO
({"results":[{"Advisor":"Chris","advisorId":33},{"Advisor":"Fawzia","advisorId":2},{"Advisor":"Kent","advisorId":3},{"Advisor":"Rob","advisorId":4},{"Advisor":"Stephanie","advisorId":5}]})
JSON FOR THE FORM
{success: true, data: {"advisorsId":33}}
This could happen if your form is loading before the combo store loads. (Given that rest of your code looks Ok)
I suspect this will resolve if you render your form before loading it.
(move frmClientRecordCmp.render(document.body); one statement up in your sample code)
EDIT
Two points to consider-
Are you sure the combo store has finished loading before the form loads?
Looking at ComboBox's valueField documentation, it looks like a call to combo.setValue may be necessary after the form loads. Something along the lines of -
frmClientRecordCmp.getForm().load({
url: '/referrals/index.php/clients/getbyid/100',
success:function(form,action){
form.findField('advisorName').setValue(action.result.data.advisorId);
}
});
It was a problem I had caused by using the id: 'advisorName'. I was returning a field also named 'advisorName' so it was filling it even though I was specifying a hiddenName value. The moral is make sure your id is unique and not a field name.
Related
I have been continuing learning Ext JS framework.
Now I have to do next thing: load some data from server to particular form's selectfields through a REST API.
This is my proxy store:
Ext.define('Foresto.store.RESTstore',{
extend: 'Ext.data.Store',
storeID:'reststore',
proxy: {
type:'rest',
url:'http://localhost:8001/api/fieldvalues/'
},
autoLoad: true});
How should I links REST api with form's field? I have found few examples with model, but how it can be realised witout using of model? If I want use exist forms?
Thanks!
you can use fields in model.
example:
model:
fields:[
{type: 'string',name: 'CODE'}
]
view:
{
xtype:'textfield',
reference:'CODE',
name:'CODE'
}
I have a Kendo UI Scheduler with a timeline view in which as one of the resources, a list of Persons names are being dynamically populated in the Scheduler. To get that data, I created a remote webservice responsible to get a proper communication between the database and the front-end. When I created the web service, I also created a method called GetPersons in VB that retrieves me the data in JSON format for me to use.
resources: [{
field: "UserID",
name: "Persons",
dataTextField: "Name",
dataValueField: "Name",
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: 'Service/JSON/GetPersons'
},
schema: {
type: "json",
data: "GetPersonsResult.RootResults"
}
}
),
multiple: true,
title: "name"
Now, to explain my issue:
I have a table on the database with the following fields: ID, PersonID, TypeOfEventID, startDate and endDate. In this table, I created three events just to try testing and to be related with the Persons.
I am trying to see in the Scheduler all those events I created but so far, nothing shows up. My logic was the same as with the GetPersons method. I created a new VB file called GetEvents to get me the events in the web service from the database to be retrieved and used in JSON format later. With this JSON data, I was planning to see the events I created. Just like it happend with the GetPersons method.
The view used it's a custom one based on the timelineMonth type. Every row has a different Person name and for each Person, specific events of different types might be seen.
Here's a fiddle with my script
So far, I can not see any events neither the Scheduler pop-window that shows up when I do double click inside the Scheduler.
Any tip of how to associate all these sort of things? I have no idea if I need to create another dataSource, neither I know what to put exactly on the resources and/or schema/model section.
One month after, nobody answered to my question and because of this I believe that I should post the solution:
The main thing that I had to do, was to create my second type of resources in a proper way. So, very simply... I did this:
{
field: "EventType",
dataValueField: "EventTypeID",
dataTextField: "descr",
dataColorField: "Color",
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: './../Services/BlahBlahBlahDomainService.svc/JSON/GetEventType'
}
},
schema: {
type: "json",
data: "GetEventsTypeResult.RootResults",
total: "GetEventsTypeResult.TotalCount"
}
}
)
}
Besides that, I discovered some other little issues. For example:
the editable option was disabled;
both resources dataSource had no "schema.total" field defined and that options is needeed once the "schema.data" field is called;
a "dataTextField" property from one of the resources was missed;
I am trying to get data that is being passed and load it into various textfields. Right now, I have a .html file which contains this:
<script type="text/javascript">
var res = {"address":"","city":"","state":"","zip":""};
</script>
Then, I have a .js file which contains my entire layout with all the textfields, etc. and my entire store. This is what I have so far as my store trying to load the data, but I am not sure what the correct method is to try and get the data from the html file and display it on my js file.
var newStore= new Ext.data.ArrayStore({
fields: ['address', 'city', 'state', 'zip'],
loadData: (res),
idIndex: 0
});
Could someone please help me as I am a bit lost on what to do?
Try ArrayStore Like this.
var newStore= new Ext.data.ArrayStore({
fields: ['address', 'city', 'state', 'zip']
});
newStore.add(res);
newStore.commitChanges()
This should work.
I'm trying to make an EXTJS application to send email with an attachment. So I have a very basic form that include textfield for the subject, another textfield with inputType: 'file' for the attachment, and an html editor.
var panel = new Ext.form.FormPanel({
fileUpload:true,
labelAlign: 'right',
monitorValid: true,
border: false,
bodyBorder: false,
defaults:{
anchor: '100%',
labelStyle: 'font-weight:bold;'
},
items: [
{
xtype: 'textfield',
fieldLabel: 'SUBJECT',
name: 'subject',
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'ATTACHMENT',
name: 'file_to_upload',
anchor: '80%',
itemCls: 'attachment-field',
allowBlank: true,
inputType:'file'
},
{
xtype: 'htmleditor',
fieldLabel:'MESSAGE',
name:'msg'
}
]
});
And this form is placed in a window which will submit to the server:
var window = new Ext.Window({
title: 'Compose a message',
height: 600,
width: 800,
autoScroll: true,
border: false,
bodyBorder: false,
items: panel,
buttons:[
{
text: 'Send',
formBind: true,
handler: function() {
panel.getForm().submit({
url: *Call to the server*,
method : 'POST',
timeout: 300000, // 5min
waitMsg: 'Please wait while we send your email',
success :function(form, action) {
window.close();
}
});
}
},
{
text: 'Close',
handler: function() {
window.close();
}
}
]
});
And everything works great when I submit the form to the server using FF. But a problem occurs with IE8. IE is showing the security bar saying that I'm trying to download a file to the computer, which is exactly reverse of what I'm doing ( I'm uploading a file)!
How can I prevent triggering this security bar?
--EDIT December 18th, 2010 16:48 EST--
Is it possible that it can be caused by this: (comming from the EXTJS basicForm documentation)
File uploads are not performed using normal 'Ajax' techniques, that is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the DOM element temporarily modified to have its target set to refer to a dynamically generated, hidden which is inserted into the document but removed after the return data has been gathered. The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to send the return object, then the Content-Type header must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body. Characters which are significant to an HTML parser must be sent as HTML entities, so encode "<" as "<", "&" as "&" etc. The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a responseText property in order to conform to the requirements of event handlers and callbacks. Be aware that file upload packets are sent with the content type multipart/form and some server technologies (notably JEE) may require some custom processing in order to retrieve parameter names and parameter values from the packet content.
I don't think I understand everything about there explanation...
-- END EDIT --
Thanks
Alain
On the server side, you MUST do the following, even though it looks a bit odd:
set the response type to "text/html"
send {"success": true} as JSON object
the response type makes the browser render the response in the iframe ExtJS uses
ExtJS reads that from the DOM, and interprets it as JSON, looking for the success field.
This is what Ext writes to the document.
<iframe id="ext-gen170" name="ext-gen170" class="x-hidden" src="about:blank"><html><head></head><body></body></html></iframe>
This problem can be resolve by setting a valid https src path e.g. https://yousite.com/blank.html
I haven't found yet how to modify the src. Any help would be welcome
I believe ExtJs is doing this:
if(Ext.isIE) {
frame.src = Ext.SSL_SECURE_URL;
}
Where that string is defined as:
/**
* URL to a blank file used by Ext when in secure mode for iframe src and onReady src to prevent
* the IE insecure content warning (<tt>'about:blank'</tt>, except for IE in secure mode, which is <tt>'javascript:""'</tt>).
* #type String
*/
SSL_SECURE_URL : isSecure && isIE ? 'javascript:""' : 'about:blank',
...and isSecure is:
isSecure = /^https/i.test(window.location.protocol);
So that's where your about:blank is coming from.
If that doesn't work, it sounds like you need to set that URL to something that works for you (or maybe the value of isSecure is acting up).
following your suggestions and many test, here is what I did. I just assign the SSL_SECURE_URL constants right after I included the extall library to a blank image on my https application.
Ext.SSL_SECURE_URL = 'https://mysite.com/blank.gif';
No problem anymore.
Thanks a lot.
I have an ExtJS combobox with a remote data store behind it. In all browsers it works fine, except in IE (all versions that I've tested) where the combobox expands for a splitsecond, showing a "loading" icon and then it disappears again. Clicking it again after this doesn't make it expand at all anymore. Basically: it's not being populated.
On the server side, everything is fine. The Controller action is reached (using ASP.NET MVC) which returns Json data. The Json is properly formed (all other browsers swallow it at least).
A weird thing is, that when I put a breakpoint in the Controller action, the JsonStore is properly filled on the client side. This to me indicates some sort of timing problem.
Another weird thing is that, every once in a while, it works fine. Perhaps because the timing is just right by accident or something.
If I set the combobox mode to 'local' and force a .load() on the remote datastore, it works fine in IE too.
This problem is present in all comboboxes that use a remote datastore for us.
I have the following JsonStore:
var companies = new Ext.data.JsonStore({
url: '/Company/GetCompanies/',
root: 'companies',
fields: [
{ name: 'CompanyID'},
{ name: 'CompanyName'}]
});
The combobox:
new Ext.form.ComboBox({
fieldLabel: 'Company',
typeAhead: false,
triggerAction: 'all',
valueField: 'CompanyID',
hiddenName: 'CompanyID',
displayField: 'CompanyName',
mode: 'remote',
lazyRender: true,
store: companies,
allowBlank: true,
editable: false,
listeners: {
'focus': function(){
if(companies.data.length > 0)
{
debugger; // This is only ever fired after the aforementioned breakpoint method.
}
}
}
})
The Json that is returned by the Controller:
{"companies":[{"CompanyID":1,"CompanyName":"Test"},{"CompanyID":2,"CompanyName":"Test1"
},{"CompanyID":3,"CompanyName":"Test2"}]}
Figures, I work out the solution just minutes after posting a question about it.
I switched to a Store instead of a JsonStore and specified the method: 'GET' property of the proxy and it worked. I have no clue why this does work though, and why only IE had a problem with it. My Controller action accepts both GET and POST so that wasn't it.
The Store:
var companies = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({ url: '/Company/GetCompanies/', method: 'GET' }),
reader: new Ext.data.JsonReader({ root: 'companies' }, [{ name: 'CompanyID', mapping: 'CompanyID' }, { name: 'CompanyName', mapping: 'CompanyName'}])
});