I am trying to access values from form but I am getting all null values.
My code structure is :
Inside view id is provided say, syzForm
In controller
syzForm:'#syzForm',
and trying to access values from form using getter method as getSyzForm();
But All values I am getting are null.
Please let me know where I am wrong.
Thanks In advance.
In the config section in your controller make a reference to the form you want to work with.
Ext.define('App.controller.Controller', {
extend : 'Ext.app.Controller',
config : {
refs: {
YourFormRef: {
selector : 'yourform',
xtype : 'yourform',
autoCreate : true
}
}}}
And make sure that FormView's id is the same as the selector. Now you should be able use the getters and setters to manipulate your Form.
Related
I build an app for file system. Files from root directory will be load initially. After user taps a directory subfiles should be load and so on. Here is a problem: I dont know
how deep users file structure is.
Means I dont know how many views I will need.
Currently I want to make it this way(But I am happy for ideas to improve my app): User taps on a file. The controller should catch the tap event and should create a new View where loaded data should be placed in.
Thats the theory.
In praxis all my file views has a class. Lets call it 'fileStructureView'. And I have only one Controller for x-number of fileStructureViews.
In my contollers config I made it this way:
Code:
config: {
refs : {
fileStructureViews : 'list[class="fileStructureView"]'
},
control : {
fileStructureViews : {
onItem : 'onItem'
}
}
},
onItem : function() {
alert('Test');
}
In my view I set a handler on the items which fires an onItem event.
But my onItem Event will never executed.
If I choose view-ids in the refs it works, but because I have to create an unknown number of views I have to give classes to my views.
Thanks for help.
I suggest You to use routing in controller and dynamically create views. For example go to to sencha sdk and find project Touch Style.
Hope this helps
In my app I am using tpl but its not working: can any one tell me what to do and where I am wrong?
Inside config :
{
id: 'content',
tpl: "<div class='attorney-details'>hi:{details}</div>"
},
and my Update method is :
update: function(newRecord) {
if (newRecord) {
currentView=this.getRecord().data;
this.down('#content').setData(newRecord.data);
}
}
At output not even "Hi" is printed.
Also, if an alert is added in the update method it is not executed.
Thanks.
The first step would be to make sure your update method would be executed. Not really enough info to figure out what is going on with your code. It looks like your update method is located inside your view with your reference to this.down, so you need to make sure the component you are using has access to a store. If you don't you can just pass an object to update the template like this http://new.senchafiddle.com/#/7mAmV/.
I want to create a controller with a ref to a specific item in a List, is this possible?
So really I need the ComponentQuery to reference a listitem. I am setting the data inline in the list:
Ext.define('MyApp.view.MyView', {
extend : 'Ext.List',
alias : 'widget.mylist',
config : {
title : 'Title',
itemTpl : ['{displayName}'].join(''),
data : [{
displayName : 'One',
id : 1
}, {
displayName : 'Two',
id : 2
}, {
displayName : 'Three',
id : 3
}, {
displayName : 'Four',
id : 4
}]
}
});
Then on in my controller (this is obviously not working):
refs : {
oneListItem: 'mylist.list[id=1]',
twoListItem: 'mylist.list[id=2]',
threeListItem: 'mylist.list[id=3]',
fourListItem: 'mylist.list[id=4]'
}
Hopefully this is possible. If it is not I can listen for an 'itemtap' on the list and call a method from there, however, I would prefer not have to do that for cleanliness.
Thanks in advance.
Brad
First off: adding id to the objects in your data section will not have any effect, that is just the data that's taken and substituted in the itemTpl you specified before.
As to your question: Sencha Touch 2 Documentation does not mention a way to have Ext.ComponentQuery select the n-th child of a Component, so, assuming you want to create your list objects with inline data, the only way I see is to use the id that Sencha automatically applies to each listItem on creation.
These ids are of the #ext-listitem-1 kind, see an example of how to use them in this Sencha Fiddle demo.
This is however bad practice, because you cannot rely on those id, if for example you add another list to your application they can change breaking your code.
I do not see any valid reason why you shouldn't use itemtap to act on the list, since with the event you get all the data you need to manipulate the proper list item:
itemtap( this, index, target, record, e, eOpts )
For completeness sake, I must mention that you could also add your items dynamically with Ext.dataview.List.add(), that way you should be able to create your dataitems with a custom id.
You might try Ext.select('.x-list-item-first'); or Ext.select('.x-list-item-last'); if you want a handle on the first or last item. I would encourage you to add an xtype set to "mylist" instead of using alias.
I am rather new to sencha touch, I've done a lot of research and tutorials to learn the basics but now that I am experimenting I have run into a problem that I can't figure out.
I have a basic DataList which gets its data from a store which displays in a xtemplate.
Within this template I have created a member function which requires store field data to be parsed as a parameter.
I would like to make a thumbnail image (that's source is pulled from the store) execute the member function on click/tap.
I can't find any information on this within the docs, does anyone know the best way to go about this?
Here is a code example (pulled from docs as I can't access my actual code right now).
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>'
{
tapFunction: function(name){
alert(name);
}
}
);
tpl.overwrite(panel.body, data);
I want to make the paragraph clickable which will then execute the tapFunction() member function and pass the {name} variable.
Doing something like onclick="{[this.tapFunction(values.name)]} " does not seem to work.
I think functions in template are executed as soon as the view is rendered so I don't think this is the proper solution.
What I would do in your case is :
Add a unique class to your < p > tag
tpl : '<p class="my-p-tag">{name}</p>'
Detect the itemtap event on the list
In your dataview controller, you add an tap event listener on your list.
refs: {
myList: 'WHATEVER_REFERENCE_MATCHES_YOUR_LIST'
},
control: {
myList: {
itemtap: 'listItemTap'
}
}
Check if the target of the tap is the < p > tag
To do so, implement your listItemTap function like so :
listItemTap: function(list,index,target,record,e){
var node = e.target;
if (node.className && node.className.indexOf('my-p-tag') > -1) {
console.log(record.get('name'));
}
}
Hope this helps
I am designing an app in sencha touch2. I have a panel object in my JS file. I need to dynamically set the text/html for this component. The store for this component is defined at the application level. Following is the thing I worked out:
Ext.define('class_name',{
....
config : {
pnlObj : null,
...
}
initialize : function() {
this.config.pnlObj = Ext.create('Ext.Panel');
var store = Ext.data.Storemanager.lookup('some_store');
store.on('load',this.loadStore,this);
this.setItems([{
//some items here
{
flex : 2,
// id : 'somepnl',
config : this.config.pnlObj
}
}]);
},
loadStore : function(store, rec) {
var text = rec.get('text');
var panel = this.config.pnlObj;
// var panel = Ext.getCmp('somepanl');
panel.setHtml(text);
}
});
When I inspect the inspect the element using Firebug console, I can find the panel added there. But I am not able to set the html dynamically. no html text is set there. I tried adding it using panel.add() & panel.setItems() method which doesn't work. If I give an id to that panel(somepanel here) and try to access it using Ext.getCmp('smpanel') then in that case it works fine. I have found that using Ext.getCmp() is not a good practice and want to avoid it as it might somewhere break my code in the future.
I guess the way I am instantiating the panel object is creating some issue. Can someone suggest the best way of doing it?
The recommended way to manipulate your components in Sencha Touch 2 is using controller, through refs and control configs. For example, your panel has a config like this: xtype:'myPanel', then in your controller:
refs: {
myPanel: 'myPanel'
}
control:{
myPanel: {
on_an_event: 'set_html_for_my_panel'
}
}
Lastly, define your function:
set_html_for_my_panel: function()
{
this.getMyPanel().setHtml('my_updated_html');
}
P/S: Behind the scene, Sencha Touch 2 uses Ext.ComponentQuery for refs in controllers