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/.
Related
I am trying to add a custom spinner logic to a spinner field I have. I have been able to customize the spinner in the "view" by using onSpinUp:.
I am looking to refer to the spin up step in the controller but I am not having success. I am unable to reach the debugger I have in the "spinner" function.
This is what I have so far, I am not sure what I am missing. Could someone shed light on this?
Thanks in advance.
`control:{
currentTime:{ //currenTime is the itemId
spinup: 'spinner' // spinner is the function name
},
}`
`
spinner: function (){
debugger;
}
`
I see that you have added single quotes, and I'm not sure if you code looks exactly like this, but your control object should look like:
//currenTime is the item id so it has to be wrapped
// with single quotes and it also needs a # prefix.
control:{
'container #currentTime': {
spinup: 'spinner' // spinner is the function name
}
Check fiddle: https://fiddle.sencha.com/#fiddle/uo1
Note: You need to add container #currentTime, just #currentTime won't work. It's a known issue with Sencha Touch.
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
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.
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 adding content to my application viewport like this:
Ext.Viewport.animateActiveItem(item, {transition})
I'am searching for a way to get "back" to the last view. Is that possible, or does the viewport destroy the last view?
Why not just use the built in history support? You can add an entry to the history object like so:
this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
url: 'dashboard'
}));
Once you call that function, it will change the application's URL hash. You can grab the event by using routes in your controller... add it to the config like so:
config: {
routes: {
'dashboard': 'showDashboard'
},
control: {
//controls...
}
},
Sencha Touch will recognize the URL change and look to your routes to call a function like so:
showDashboard: function() {
Ext.Viewport.animateActiveItem(item, {transition});
},
Using this method, the native back button will take you back to the previous view, you can also call which view you want to go to etc... view the documentation on the history object here: http://docs.sencha.com/touch/2-0/#!/api/Ext.app.History
Why don't you use the Ext.Viewport.animateActiveItem() on your first panel then ?
I did it here : http://www.senchafiddle.com/#xTZZg
Hope this helps
Ext.app.Action is a private Sencha class so cannot be guaranteed to exist in future releases. A better way is replace ...
this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
url: 'dashboard'
}));
with this ...
this.getApplication().redirectTo('dashboard');
You can also pass a Model object provided it implements a toUrl() method ...
this.getApplication().redirectTo(myModelObj);
If required, you can now just use the following to go back:
history.back();
Refer to the Touch History Guide:
http://docs.sencha.com/touch/2-2/#!/guide/history_support