How do i correctly pass the value of my selectfield into the ajax proxy in my store?
Ext.define('FirstApp.view.Home',{
extend:'Ext.Panel',
xtype:'home',
config:{
title:'Home',
iconCls:'home',
html:'<h1>Home Page</h1><hr><p>Welcome to Sencha Touch 2 Training</p>',
layout:'fit',
scrollable:true,
styleHtmlContent:true,
styleHtmlCls:'home',
items: [
{
xtype: 'selectfield',
id: 'visit',
label: 'Choose one',
value:'restaurant',
options: [
{text: 'Museum', value: 'museum'},
{text: 'Pubs', value: 'pub'},
{text: 'Attractions', value: 'attraction'}
]
}
]
}
})
I am trying to place the value here: '+ REFERENCE HERE +' in the code below. I have tried '+#visit+' and '+#value+' with no success
Ext.define('FirstApp.store.Places',{
extend:'Ext.data.Store',
config:{
autoLoad:true,
model:'FirstApp.model.Place',
proxy:{
type:'ajax',
url:'https://maps.googleapis.com/maps/api/place/search/json? location=52.247983,-7.141113&radius=10000&types=food&name='+ REFERENCE HERE +'&sensor=false&key=KEY',
reader:{
type:'json',
rootProperty:'results'
}
}
}
})
To get a component by ID in Sencha frameworks you want to use Ext.getCmp, and then use the getValue method. So where you are trying to put the reference, put this:
Ext.getCmp('visit').getValue()
Ideally you want to try to stay away from hardcoded component IDs, and instead use refs/selectors based on the component path, type, etc.
Related
Im new at this sencha thingy and im trying to experiment a bit with it. I've been making some very simple tests and now i've reached the point where i want to pass the data from one file to another. To make it easier to understand im trying to get the data from the following text box to make a simple filter tool.
the textfield has been created in the following piece of code in the file Filters.js
Ext.define('Prj01Filtro.view.main.Filters', {
extend:'Ext.form.Panel',
xtype: 'Filters',
alias: 'form.formFilter',
requires: [
'Prj01Filtros.view.main.FilterController'
],
controller: 'controllerFilter',
items:[
{
margin: '0 0 10 0',
buttons: [
{
xtype: 'textfield',
fieldLabel: 'Filter',
name: 'textFieldSearch'
}, {
name: 'buttonSearch',
text: 'Buscar',
listeners: {
click: 'onClickFilter'
}
}, {
name: 'buttonRemoveFilter',
text: 'X',
listeners: {
click: 'onClickRemove'
}
}
]
}
]
The code of the buttons have been located in a file named FilterController.js
Ext.define('Prj01Filtros.view.main.FilterController',{
extend: 'Ext.app.ViewController',
alias: 'controller.controllerFilter',
onClickFilter: function() {
//Code to apply the filter
},
onClickRemove: function() {
//code to remove the filter
}
})
Finally the code of the table is located in a file named List.js
Ext.define('Prj01Filtros.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
plugins: 'gridfilters',
requires: [
'Prj01Filtros.store.Personnel'
],
title: 'Personnel',
store: {
type: 'personnel'
},
columns: [
{ text: 'Name', dataIndex: 'name', align: 'left', filter: {
type: 'string'
}},
{ text: 'Email', dataIndex: 'email', flex: 1, align: 'left', filter: {
type: 'string'
}},
{ text: 'Phone', dataIndex: 'phone', flex: 1, align: 'left', filter: {
type: 'string'
}},
],
listeners: {
select: 'onItemSelected'
},
});
So my goal is to make a function in FilterController.js that can be called from Filters.js which sets the value for the filters applied in the columns of List.js but im kind of stuck on how to set the value property for the filter from the function that i have created. If someone knows how to do it i would appreciate the help. Thanks!
I've tried many things but since im new to sencha im pretty much sure that they were incorrect anyways.
I suggest to study View Models & Data Binding and ViewModel Internals sections of Ext JS documentation. These are among the most powerful features of Ext JS so it good to develop a deep understanding.
For you current question, you need to access the store behind your List view to manage the filters, not the list itself. Once you get the store, you can set / clear the filters with setFilters and clearFilter methods on the store:
store.setFilter([{
property: 'email',
value: '<search term here>',
operator: 'like'
}]);
store.clearFilter();
To easily access the store, define the store in the view model of a view that is above both List and Filters view. This is the important part because this way you can take advantage of inheriting the view model from the container parent. Let's say you have a panel which contains both List and Filters. Define the store in the view model:
stores: {
personnel: {
type: 'personnel'
}
}
Use bind config when assigning the store in your List:
Ext.define('Prj01Filtros.view.main.List', {
...
bind: {
store: '{personnel}'
}
...
});
After all this, you can access the store from the Filters view controller's methods:
onClickFilter: function() {
this.getViewModel().getStore('personnel').setFilters(...);
}
You need the get the value the user entered into the field. You can access it from the controller with querying the textfield component, but you can also do it with the view model.
I've got an extjs global store have I have hard coded with fields and data:
Ext.define('Registration.store.SavedSessions',{
extend: 'Ext.data.Store',
storeId: 'savedsessions',
fields:[
"id",
"title",
"dateStart"
],
data: [
{
id: 1,
title: 'test',
dateStart: new Date()
}
]
});
The global store is registered via the Application.js file:
Ext.define('Registration.Application', {
extend: 'Ext.app.Application',
name: 'Registration',
stores: [
'SavedSessions'
],
...
I also have a grid that I'm trying to load the store into:
Ext.define("Registration.view.cart.savedsessions.SavedSessions",{
extend: "Ext.grid.Panel",
xtype: 'savedsessions',
store: Ext.data.StoreManager.lookup('savedsessions'),
columns:[
{
text: 'Date',
dataIndex: 'dateStart'
},
{
text: 'Title',
dataIndex: 'title',
flex: 1
}
]
});
Looking at the docs this all looks correct. The problem I'm running into is that the store doesn't load.
When I open up the javascript console and count the number of records in the grid's store I get 0:
I'm not sure how this can happen at all considering the data is hard coded into the store.
Also, when I grab the store directly from the javascript console I can get the hard coded data:
What am I missing here?
Why use the StoreManager to get the store? Just use the storeId:
store: 'savedsessions',
I have strange problem with loading form panel with json request response.
In previous projects I used to load detail panel from grid store by using loadRecord(record)
The store has associated model so record's embedded objects are mapped to model's properties and form renders those fields without any problem.
Once I had to load form directly with response from form.load() I can't see properties from record's embedded objects.
For example from json
{
"message":null,
"success":true,
"data":{
"code":"1",
"name":"Canon Canada",
"modifiedBy":null,
"modifiedAt":null,
"address":{
"street":"6390 Dixie",
"suite":null,
"city":"Mississauga",
"provinceCode":"ON",
"postalCode":"L5T1P7"
},
...
}
}
I see rendered 'code' and 'name' properties, but not 'street' and 'city'.
Here is form.Panel code
Ext.define('App.view.billto.BillToDetailForm' ,{
extend : 'Ext.form.Panel'
,layout: 'form'
,alias : 'widget.BillToDetailForm'
,autoHeight: true
,bodyPadding: 10
,fieldDefaults: MainAppViewConfig.fieldDefaults
,defaults: {xtype: 'fieldcontainer',layout:'hbox', anchor: '100%'}
,items : [ { defaults: {xtype: 'textfield', allowBlank: false},
items: [{name: 'code', fieldLabel:'Bill To Code'}
,{name: 'name',fieldLabel: 'Name'}]}
,{ defaults: {xtype: 'textfield', allowBlank: false},
items: [{name: 'address.suite', fieldLabel:'Suite'}
,{name: 'address.street', fieldLabel:'Street'}]}
...
]
,loadContentForCode: function(code){
//this.getForm().trackResetOnLoad = true;
this.getForm().load({ method: 'GET',url: 'billtoDetail',
params:{'code':code},
waitMsg: 'Loading...',
/*success:function(form, action) {
console.log('BillToDetailForm:loadContentForCode callback on success '+this);
var responseObj = Ext.JSON.decode(action.response.responseText,true);
var billToModel = Ext.create('MPS.model.BillToModel',responseObj.data);
form.loadRecord(billToModel);
}*/
});
}
});
As you can see I even did unsuccessful attempt to reload form in success handler.
Also I have noticed that var billToModel = Ext.create('MPS.model.BillToModel',responseObj.data);
hasn't properly populated model's fields 'street' and 'city'. That's also might be the cause of the problem.
Ext.define('MPS.model.BillToModel', {
extend: 'Ext.data.Model'
,idProperty:'code'
,fields: [
{name: 'code', type: 'string'},
{name: 'name', type: 'string'},
{name: 'street',mapping:'address.street', type: 'string'},
{name: 'city', mapping:'address.city', type: 'string'},
...
]
});
Could you please point the real cause of the problem or advice any solution.
Thank you.
I just made fiddle for you. Take a look how it is working and try the same with your code:
Sencha Fiddle - How associated data works
If this something that you are looking for just mark as answered.
Currently I'm working on an app that displays a chart of defects. The chart is to be filtered by a selection of checkboxes that the user can change around to fit his / her needs. These checkboxes are located in the gear menu of the app, under 'settings'. In App.js I have a function that looks like this:
getSettingsFields: function() {
return [
{
xtype: 'fieldcontainer',
fieldLabel: 'States',
defaultType: 'checkboxfield',
items: [
{...}
...
]
}
];
}
This function works perfectly so far and displays the items I left out of the code [they're not important to the question]. The problem is that now I want to add a ComboBox into the same settings page with custom values. The box should have the text [Days, Weeks, Months, Quarters] inside that will further filter which defects to display in the chart. I tried changing the getSettingsFields function to the following:
getSettingsFields: function() {
var myStore = Ext.create('Ext.data.Store', {
fields: ['value', 'range'],
data: [
{'value':'day', 'range':'Days'}, //test data for ComboBox
{'value':'week', 'range':'Weeks'}
]
});
return [
{
xtype: 'combobox',
fieldLabel: 'Date Range',
store: myStore,
displayField: 'range',
valueField: 'value'
},
{
xtype: 'fieldcontainer',
fieldLabel: 'States',
defaultType: 'checkboxfield',
items: [
{...}
...
]
}
];
}
Now when I run the app and click on the 'settings' button, everything disappears - even the field of checkboxes. Any explanation to why this is not working would be very helpful!
You're basically doing everything correctly- you've just stumbled upon a really subtle bug. The underlying issue is that there is an infinite recursion that occurs when the settings panel is attempting to clone the settings field config array due to the inclusion of the store. The following code will work around the issue:
{
xtype: 'rallycombobox',
storeConfig: {
fields: ['value', 'range'],
data: [
{'value':'day', 'range':'Days'}, //test data for ComboBox
{'value':'week', 'range':'Weeks'}
]
},
storeType: 'Ext.data.Store',
fieldLabel: 'Date Range',
displayField: 'range',
valueField: 'value'
}
It's basically the same as what you had but uses the rallycombobox instead and passes in storeType and storeConfig to get around the store cloning problem.
Simple question here, and I'm really surprised I cannot find an answer to it anywhere.
I have the following product model:
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'manufacturer', type: 'auto'}, // i.e. nested object literal
],
});
As can be seen, a product has a nested object inside it that contains details about a manufacturer (id, name, description, etc.).
I display products in an Ext.grid.Panel, like so:
Ext.create('Ext.grid.Panel', {
title: 'Products',
...
remoteSort: true,
columns: [
{text: 'Id', dataIndex: 'id', sortable: true},
{text: 'Name', dataIndex: 'name', sortable: true},
{text: 'Manufacturer', dataIndex: 'manufacturer', sortable: true, renderer: function(manufacturer) {
return manufacturer.name; // render manufacturer name
}
},
],
});
As you can see, all three columns are configured to be sortable, and I am using remote sorting. This works for the first two columns, but the third column (manufacturer) is giving me trouble.
For instance, when a user sorts the grid by product name, Ext sends the following JSON to the server:
{ sort: [{ property: 'name', direction: 'ASC' }] }
This is fine, because the server knows to simply sort by each product's name property.
But when a user sorts the grid by manufacturer, the JSON sent is:
{ sort: [{ property: 'manufacturer', direction: 'ASC' }] }
Since the manufacturer is an object, this does not give the server any idea which property of the manufacturer it should sort by! Is it the manufacturer's id? Or is it the manufacturer's name? Or something else?
For my grid, since I render the manufacturer's name, I'd like to sort it by name. But I see no way to tell the server this. And I certainly don't want to make my server just sort by the manufacturer's name all the time.
If the JSON was sent like this it would be ideal:
{ sort: [{ property: 'manufacturer.name', direction: 'ASC' }] }
Sadly, Ext does not seem to do that (?). So, what's the solution?
Okay, I asked on the Sencha Forums and got a response. It appears you can override getSortParam() in the column config. Example:
columns: [
...
{
header: 'Manufacturer',
dataIndex: 'manufacturer',
sortable: true,
renderer: function(manufacturer) {
return manufacturer.name; // render manufacturer name
},
getSortParam: function() {
return 'manufacturer.name';
},
}
...
]
This will send the ideal JSON I described in my OP. Now I just need to make my server parse this properly! :)