Actually I am playing around with sencha touch. Sometimes my stores need to know my views. For example:
Ext.define('Ext.Panel', {
id : 'myId',
config : {
padding: 5,
fullscreen : true
},
moo : null
});
Ext.define('Ext.data.Store', {
fetchSomething : function() {
// Fetch stuff and set moo of view like this:
Ext.getCmp('#myid').moo = 'fetched Data';
}
});
This is a general question.
Is it allowed that the store can set properties of the view?
I think yes, because in a store, if you work with templates and load data, in callback method you can say view.setData(fetchedData).
And is the store a controller or model? Because sometimes I get data from
server and have to change the structure so the view can make it visible.
For example I get an array and make from it a map.
According to best practices, no, absolutely not!!
The sencha touch data system allows views to automatically update themselves when the content of a store changes. You need to use dataviews or the record config along with the tpl config of a view to wire this all up.
I wrote (quite an extensive) post about this for beginners on my blog a while back that will really help you with this (I hope!)
http://senchatouchdev.com/wordpress/2014/01/03/an-overview-of-sencha-touch-2s-data-system/
In brief:
Model = a description of a type of data your app will handle
Record = instance of model
Store = collection of records
View = something displayed on screen
Controller = collection of references/methods that wire your app together
Related
In the image of this project which is the view model file? I would have thought main-page.js but then main-view-model.js is titled "-view-model".
"view-model file" is not really a set programming concept. But I guess you mean a file which only holds one function which acts as a view-model. If that's the case, then main-view-model.js is most probably the "view-model file". Looking at the content it looks view-model-ish.
However 1, you need to look at main-page.js to see how that is used.
However 2, in NativeScript, view models are often observable objects and looking at this code, the ViewModelItem is not an observable object.
not sure about that ViewModelItem object, but in NativeScript, view1.xml is the view and view1.js would be the "code-behind" and that means you will code the logic directly related to the view itself: Button has a tap="getName"? that function goes to view1.js...
viewModel files would be where you create observables with the datas you fetch from a remote source for exemple, and all the methods say 'saveName(ppl)' that would POST your object to the server would be in the viewModel file...
you would create your observable like this:
var studentList = new StudentListViewModel([]);
var pageData = observableModule.fromObject({
studentList: studentList,
student: "",
prof: "Choisir"
});
and any changes has to be set like that:
pageData.set("prof", prof)
hope it is clear...
I want to know how i can save page data.first i will tell how my application works.
I have a container and i am adding panels to this dynamically.
something like this
--container
--add panel_1
---want to add panel_2 ? remove panel_1 and add panel_2 in that place
My problem is..Now i am planning to have a back button in panel 2..when user clicks ,will take him to panel_1 and i want to show what he entered...Please help me
have seen this (Extjs 4 Session Management)
I use an extra class with static members for holding data in MVC arch in ExtJS. So I save objects, arrays, vars etc in it from controller and use them later in project. Perhaps this help you as well. Save panel_1 object or data and goto panel_2, or viceversa
e.g.
Ext.define('MyApp.controller.Utility', {
statics : {
panel1: false,
panel2: false,
myFun : function() {
//some code
}
}
});
in any controller/view etc whenever you want to save an object or value, refer to this class but first add to require. .e.g.
var ut = MyApp.controller.Utility;
ut.panel1 = Ext.ComponentQuery.query('panel')[0];
I need access to the ApplicationView from another view and I'm able to do so with App.__container__.lookup('view:application').
Is __container__ intended to be used this way?
Is there a better way to access instances of views?
(update)
My usecase:
My ApplicationView has a template with 2 columns.
The CSS is responsive so the size of the columns changes to accommodate the
width of the page.
I'm using Ember List View which requires height and width to be specified during initialization
I want to get the instance so I can access the DOM object to figure out its size
I can't use Ember.View.views because at that point, the ApplicationView has not been inserted into the DOM
Don't use that. One of the core developers said that whenever someone tries to use App.__container__, he would add another underscore.
If you really want to access an Ember.View intance use Ember.View.views['foo']. Where foo is the elementId of the view instance.
So if for example you want the App.ApplicationView instance:
App.ApplicationView = Ember.View.extend({
elementId: 'application'
});
// somewhere else in your code
var applicationViewInstance = Ember.View.views['application'];
Having said that, I never came across a situation where I needed to access view instances like that. If you can post your use case, I may be able to suggest alternative ways.
UPDATE: You want to access some properties of a view instance, from some other view instance (view height and width). You can pass those properties to the controller and let other controllers access them for using them in other views (source view -> source controller -> some other controller -> some other view):
App.ApplicationView = Ember.View.extend({
didInsertElement: function() {
var controller = this.get('controller'),
height = this.$().height(),
width = this.$().width();
controller.setProperties({
height: height,
width: width
});
}
});
App.SomeotherController = Ember.Controller.extend({
needs: ['application'],
applicationViewWidthBinding: 'controllers.application.width',
applicationViewHeightBinding: 'controllers.application.height'
});
App.SomeOtherView = Ember.View.extend({
// assuming its controller is an instance of App.SomeotherController
applicationViewWidthBinding: 'controller.applicationViewWidth',
applicationViewHeightBinding: 'controller.applicationViewHeight'
});
I have a view where I create a new company.
The company has a number of trades, or which 1 is a primary trade.
So when I enter the trades for that company, I select a trade via autocomplete, and this trade is added to a grid of trades underneath the autocomplete textbox. The grid contains the tradeId as a hidden field, the trade, and a radio button to indicate whether the trade is a primary trade and a remove button.
This is part of a form that contains other company details such as address.
Now I am wondering if I can use knockout and (maybe) jsrender to populate the grid without posting to the server?
When I have filled in the grid AND the other company details, I then want to submit the data to the controller post method.
Normally I use the Html helpers to post values to the controller, but I don't see how I can do that using knockout.
Yes you can use Knockout for this. If you have not checked the tutorials out yet then try this Knockout List and Collections tutorial. This should point you in the right direction. What you'll need to do is create a Trade object with observable properties and in a separate knockout view model create an observableArray to store trade objects. For information on posting to the server there are other tutorials in the same location.
function Trade(item) {
var self = this;
self.tradeId = ko.observable(item.tradeId);
self.tradeName = ko.observable(item.tradeName);
self.isPrimary = ko.observable(item.isPrimary);
}
function TradesViewModel() {
var self = this;
// Editable data
self.trades = ko.observableArray([]);
self.removeTrade = function(trade) { self.trades.remove(trades) }
self.save = function() {
$.post("/controller/action", self.trades);
}
}
ko.applyBindings(new TradesViewModel());
I'm just migrating from Sencha Touch 1.x to Sencha Touch 2 and I can't find a way to pass parameters between views.
Lets say I have to views:
Place (a list with all the places)
PeopleAtPlace (A list of the people for each place)
Now what I need to do is to pass the id of the place that is pressed to the peopleatplace view so it can get the people for that specific view.
I've been reading Sencha's documentation but it's pretty confusing to me.
Could somebody please help me? A code snippet would be great help to me.
Controllers can be the glue between different views. I don't know what kind of views you exactly have, but the following code can serve as a base:
Ext.define('MyApp.controller.TestController', {
extend : 'Ext.app.Controller',
config : {
views : [ // you need to list all views your controller will use
'Place',
'PeopleAtPlace'
],
refs : {
place : 'place', // ComponentQuery used to find the view e.g. xtype, id, etc of the view
peopleAtPlace : 'peopleAtPlace'
},
control : {
place : {
select : 'onPlaceSelected' // use the appropriate event
}
}
},
onPlaceSelected : function (view, record) {
var peopleAtPlaceView = this.getPeopleAtPlace(); // generated by Sencha from the ref property
// now you have the reference to the target view, you can put your logic here
peopleAtPlaceView.doSomething(record);
}
});