I am fairly new to ExtJS so I was wondering which approach is best for displaying different views of information using one grid. This is what I'm thinking about doing. I have three different data stores that are each utilizing the proxy and returning JSON. Let's call them STORE1, STORE2 and STORE3. I'm using different stores because each one has different parameters that are being executed to be retrieved from the server. Now, I want to include three buttons, each triggering a store to be used to populate the Grid. How exactly do I specify a new store for the Grid to use after it's been instantiated? I don't see a setStore() in the Grid object so I'm not sure how to go about solving my problem. If someone could provide me some insight, that would be much appreciated.
Grid has method bindStore. If you need to also assign different set of columns - check reconfigure method
There are several ways to go about this problem.
The first thing I would do is really think through your use case. Are you sure this is the way you want to handle your user interface? Would it make more sense to filter the data (either by default or by the user interaction). There are several examples of this out there. One that comes to mind is the simple task widget (not that simple) http://docs.sencha.com/ext-js/4-1/#!/example/simple-tasks/index.html - the top right button filter the store based on user selection. It uses one grid + one store .. but filters the data based on user selection.
If you are set on loading data from different stores you can utilize one store to manage the view and other stores to fetch data. On load of the stores that fetch data you use loadData (or loadRecords) method to update the store that controls the view. Makes sense? Watch out for corner cases here though ..what happens if you load the same data twice? Should you use "append" option on the loadData method?
good luck.
Related
I created an App for projects and To Do lists. It consists of one HTML page, which only has an "add To Do list"-button.
The user can click on that button and create a To Do list, in this list he can create tasks.
The lists and tasks are dynamically generated HTML Elements.
Is there a way to just store everything, the dynamically generated DOM and all its elements and their functions? I searched for an answer for hours and all I found was a method to store data locally with localStorage: http://docs.phonegap.com/en/1.2.0/phonegap_storage_storage.md.html#localStorage
Since my elements contain a lot of js functions, it would be very complicated to store everything with this method...
Is there no way of storing "the whole thing"?
Thanks in advance!
Your question require a very large explanation, anyway I would tell you some tips you can use to step forward since I worked on a similar app last year.
Think about a database structure for your app. I got a table "Tasks" in which I stored both tasks and subtasks (task inside other tasks). I also stored alarms (if a task need an alarm), texts, checked/unchecked, archived flag, deleted flag, and so on. Everything you can associate to a task, you need a column for it.
Think about your data amount globally. If you plan to store a large amount of data (more or less 5MB) you better choose SQLite approach. If you think your data will not reach this edge, think about LocalStorage. You can google both to manage their use.
When the user fill the DOM to create a task and click on "create" (or something similar), you have to "scan" the DOM, acquire all info for the task created and put them into your DB
When the user want to update/modify a task, you have to find it in the DB, fetch related data, create the DOM's structures you need to show data, fill the structures with data
These are more or less few tips I can give you on your long way. Good luck
I am trying to create a set of dropdown boxes that are interconnected using PHP and JavaScript.
My objective is to read an input value from a dropdown box, and use it to determine the values of other dropdown boxes.
An example of this is a dropdown list for States where the user takes the following actions:
Choose a State
Choose the province within that State
Choose the city within that province
I wish to do something like this, but reading value from the Database and use the afore mentioned techonologies.
Database queries are executed by PHP. PHP is executed on the server-side.
HTML is rendered on the client-side, which is where user interactions take place.
So to get information from the database based on user interaction, you need to make an HTTP request to get information back from the server.
To do this, you would use AJAX. Read up on that for the solution to your problem.
Without specifying any libraries that you are using one can only guess. However, after a quick search, I recommend the following plugin:
http://www.cssscript.com/generic-country-state-dropdown-list-countries-js/
Github also has a very interesting project regarding this:
https://github.com/mrmarkfrench/country-select-js
These solutions will help you avoid the need to use a DB. However, if you really need to do it, then you have to use AJAX and make at least a request to the server.
Overall if you use a library like jQuery or a Framework like Angular things can be easier, but you can still manage with what you have.
Hope it helps!
I want to call two web services from one store and want to bind them with a listview in sencha touch.
For example, I have two web services which are as follows:
1. Company
comp_id
comp_name
emp_id
2. Employee
emp_id
emp_name
Both of the services have different urls and I have to use these services separately as I don't have control over a customer's database.
So now I want to create one or two models & one store for these two webservices, so that I can simply bind it with the lisview and show it in sencha touch.
But the issue is that store has a proxy which can fire only one request at a time. How can I aggregate it in a model and display it in a list view ?
Disclaimer: You shouldn't do it this way. It just doesn't make sense. Models, stores, and dataviews are meant to operate a certain way. By breaking this concept too often you will only be kicking yourself later on when things get more complex.
With that said, I still understand the reasoning and here are some ideas I recommend:
-Normalize the model and dataview templates (use only one model with generic field names). Don't use the store proxies to call the API, instead just do independent Ajax/JsonP requests asynchronously, map the results to the normalized model fields, and add model records to the store. This allows you to add the data from one or more sources as needed, independent of each other.
-Add logic to the proxy on beforerequest. When loading the store, pass custom arguments and handle them in this logic to switch URLs. Then handle results on requestcomplete to set them to the relevant models. You still are faced with the issue though that really one model = one store.
-Consider doing something like the above, except use store associations. One model can be the associated model and you can use the provided relations functions for templating.
I have a rather complex web page with various tabs, forms, radio buttons, drop downs, etc. It's all bound using Knockout.js to a very complex JavaScript object that was loaded via an AJAX call. Of course the user can muck with stuff to their heart's content, at which point they hit a Save button to persist all their changes back to the server.
I'm in the process of coming up with a good design to track exactly what was changed on the page so I can implement saving. So, I've come up with a few possible implementations.
Option 1) Just send everything back and let the server sort it out: With this method, I'd let Knockout just update the data source. The Save button would call .toJS() and send that data back to the server. Pros: It's super easy, and takes very little work on the client. Cons: The server doesn't really know what changed and has to either load the data from the database to compare, or just save all the fields again. These fields come from multiple tables and have complex relations. It also treats the entire document as a single atomic unit. If someone else changed Field A and you changed field B, one user is going to lose their change.
Option 2) Use JavaScript to compare the original data and the current data: Using this technique, when the user clicks on the Save button, I would systematically compare the original data and current data and generate a graph of changes. Pros: This would ideally result in a compact graph of exactly what the user changed, and could even no-op if nothing was changed. Cons: The data I'm binding to is complex. It consists of strings, arrays, objects, arrays of objects, arrays of objects with other objects, etc. Looking for changes would be a rather complex nested loop.
Option 3) Track changes as they are being made in the UI: I would have to observe changes as they happen, and keep a delta as UI elements were changed. The Save button would simply send that change graph to the server if it had any pending changes. Pros: No need to compare two huge JavaScript objects looking for changes, but still has all the benefits of option 2. Cons: Knockout doesn't appear to have a standard way to listen to all changes using a single event handler. I believe I would have to resort to binding to all the UI elements, or creating custom bindingHandlers in Knockout to implement this real-time change tracking.
My Question:
My question is mostly for Knockout.js experts. Is there a standard approach, or recommended guidelines to solving this obviously common scenario? Is sending back all the data, even stuff that hasn't changed, a common design? Or are people implementing custom change trackers? Does Knockout provide any sort of framework that eases this requirement?
Update: Found this thing, not sure if it could be useful or if anyone has any feedback on it.
If it's a question of enabling/disabling the Save button, allowing the user to navigate "from" that page/state, then you can check with the https://github.com/CodeSeven/kolite
check the knockout.dirtyFlag.js
Hope this helps.
Edit: remember that you should "never" trust the data coming from the "UI". The real comparison and validation, ultimately goes in your "controlled" environment within the server.
What I would probably do is take option 2 - the comparison itself can be as simple as stringifying the JS object and comparing it with a cached version of itself.
A few other options are discussed here.
P.S. Maybe ko.mapping can help you manage this monster of a JS object?
I wrote a change tracker extension for knockout that Pete Smith greatly expanded on...
Take a look here:
https://roysvork.wordpress.com/2014/01/12/tracking-changes-to-complex-viewmodels-with-knockout-js/
It works on the principle of extending the observable to track initial state vs. changes the user has made on the client. I think this works really great and can give users real-time feedback to know what they've modified. In practice, we actually implement a save panel that shows all pending changes and even lets them undo individual changes, all by using the change tracker's reusable capability.
ko.extenders.trackChange = function (target, track) {
if (track) {
target.isDirty = ko.observable(false);
target.originalValue = target();
target.subscribe(function (newValue) {
// use != not !== so numbers will equate naturally
target.isDirty(newValue != target.originalValue);
});
}
return target;
};
I am trying to create a car make/model form using Javascript or AJAX, problem is that I don't have a lot of experience with either, but here it goes. . .
I need to create a form that has a car make and model drop down list in it, and when a user chooses a specific make, the model drop down will be populated with all of the models for that make, now I have a few ideas on how to accomplish that, but I would like some input on what the best way would be to approach this, to cut down on dev time.
I was thinking of creating an array within an array, one with the makes, and within each "make" array have the models array in there, so when the user clicks on a make, a AJAX/Javascript function will fire which will take the value of the current field and use that to get the location of the make in the array, which will then traverse through the inner models array and generate the drop down menu for that specific make.
Now I am not sure if this is a sound idea, or if there is a better way of doing it, but I have very little time to test, so process of elimination is out of the question, so could someone please point me in the general direction I need to go in, or maybe point me to a ready made script? as my understanding of Javascript syntax is little to none at the moment!
Thanx in advance!
The key decision is whether you want to load all of the information at the beginning (in which case the user may experience a delay while you load all of the models for the makes that they don't care about) or whether you want to retrieve the models as they choose a make. The answer will depend on
how much data there's likely to be
how fast you need the page to be
how much load will be on the server
etc.
Basically, can you afford the performance impact of loading all of the models at the beginning?
If you decide that you can afford to load everything at the beginning, I think the approach you describe is reasonable, although I wouldn't actually use an array for the outer container. I'd do this:
var models = {
Audi: ["Quattro","A4", ...],
BMW: ["M3", "M6", ...],
...
};
The thing stored in the "models" variable is actually a javascript object, although people do sometimes call it an "associative array".
Note that in this scenario you aren't really doing "AJAX", as you aren't retrieving data from the server on-the-fly.
The alternative scenario is that you set up a URL where you can query it with a model, and it will respond with a list of makes. Then you fire off the query when the user selects a model. That's AJAX.