I am new to sencha touch and I have some simple questions. I don't need 100% working code as answers, but if someone could point me in the correct direction, this would be great. But keep in mind, sencha touch is new to me. I use sensha touch 1.x.
Let me first explain what my app does. It shows a list with items (fetched from a db via json proxy). You can tap on a item, which shows a form. You can then update or delete the item. On the list screen you can also add a new item. Quite simple :-)
Here are my questions:
1/ Datepickerfield:
In the form there is a datepickerfield. The default format is month/day/year. I live in Europe so the formate should be day/month/year. With slotorder, I can change this. But the field itself still has the wrong format. I tried to fix this with a listener:
change: function() {
this.fieldEl.dom.value = this.getValue().format('d/m/Y');
}
This works when selecting a date. But when tapping an item from the list, the datepickerfield remains the wrong format. I tried using other listeners like afterrender, scope, etc. But nothing works.
2/ Numberfields:
In the model I have a field duration. It is of the type time in the sql-table. So the format is hh:mm:ss. In the form I have 3 numberfields. One for the hour, one for the minutes and one for the seconds.
How can I make the field duration split up into 3 parts and filled in the 3 numberfields when tapping an items from the list?
3/ Contextual selectfield
In the form there is a selectfield with values that depend on the user that is logged in. If user 1 is logged in, the values should be x, y, z. If user 2 is logged in, the values should be x, a, b, etc.
So, when opening the form the selectfield should be pre-filled with data. It should call a function from the server to fetch the correct data. How can this be achieved?
4/ Refresh list like twitter
I want the list to fetch additional items when reaching the end (like twitter). I found something on the Internet: PullRefresh plugin. But I can't make it work.
Any ideas?
5/ Style the list
Is it possible to style each item of a list separately? You can use styleHtmlCls, etc but that styles the whole list.
Thanks a lot in advance.
1 - This is easy set:
picker: {
slotOrder: ["day","month","year"]
}
2 - I dont understand 2 give more clarity
3 - You need to use local storage for this
4 - For paging try this link sencha list paging plugin
5 - You cant directly style each item differently but you can define a style for each item in the list by setting its style config
For those who are interested, my solutions.
1/ This code Ext.apply(Ext.util.Format, {defaultDateFormat: 'd/m/Y'}); which sets the format for all the dates in the application.
2/ I created in my model 3 extra fields. It are 3 "convert" fields for the field "duration" which is in format "hh:mm:ss". This is the code (the same for the fields duration_m and duration_s):
name: 'duration_h',
convert: function(value, record)
{
var duration= record.get('duration'),
splits = duration.split(":"),
duration_h = splits[0];
return duration_h;
}
In my form I use now 3 numberfields linked to those 3 extra fields. When saving you data you must not forget to do
PHP Code:
model.set('duration_h', '');
Otherwise those fields are not set in the model and keep being empty.
3/ and 4/ I did not yet solved.
Related
So i've been asked to remake some registration forms. The way its supposed to work is, that an interpreter chooses X amount of languages in the first select box. Then based on the selections of languages, the user must specify from which languages they can translate from/to.
I want to store this data in a key/value array, with the key being "LanguageFrom" and Value being another array, of "LanguagesTo". This is how i have solved this:
function btnTest() {
var fromArray = $('.freelancerLanguagesFrom').map(function() {
return $(this).val();
}).get();
var toArray = $('.freelancerLanguagesTo').map(function() {
return $(this).val();
}).get();
var tempArray = {};
tempArray[fromArray] = toArray;
}
This method is being called with an "onclick" function in the html part. The user should specify which languages he can translate to for each of the chosen languages in the first box,
I am aware that this probably isn't the ideal approach, but im still an inexperienced developer, and i'd love to hear your take on another approach.
Now comes my problem:
1) How do i make it so the array wont overwrite the existing array with each button click, and instead just add to the array?
2) How do i process this array on the server side (php), so that i can store the values in my database?
3) Is it possible to skip the flow where the user has to press the save(gem) button after each language he has chosen?
edit: Question 1 and 3 are now solved, my only problem is accessing the array i made in js, on the php side
1) tempArray exists only in the scope of the btnTest() function. Declare it outside (in the global scope), initialize it as {} and don't reset it every time you click the button. The way you get the fromArray variable may require some tweaking depending on whether the "from" list can accept a multiple selection or not.
2) Ajax may help. Create a php endpoint to receive the request and call it using ajax. You can work on the array using JSON. Send your data using JSON.stringify(tempArray) and read it using json_decode() in your php script, or simply set the request headers as "application/json" to have it done automatically for you.
3) I personally wouldn't automate this process. Let's say I have 4 languages, Italian, English, French and Chinese.
I have selected a desirable state of languages I can handle:
Italian -> English, French
But I also know how to translate French in Italian so I click, in the from list, French, and I get
French -> English
Which is an undesirable state, for me, because I don't know how to do that. Especially if I were to select many languages, I'd get, inbetween 2 states I want to save, an indefinite amount of states I don't want to save.
If you still want to do so, you need to move the even listener from the button to the list(s), with the onchange event.
I'd also suggest you do your event binding trough jQuery, if you aren't already.
Hope this helped.
Let's imagine a situation like this:
I have an ViewBag dynamic object which is basically a list fille with some results;
Scenario 1:
User 1 comes in and fills the ViewBag.Products object with a list of 50 items inside;
Scenario 2:
User 2 comes in and fills ViewBag.Products object with a list of 50 NEW items which ARE DIFFERENT than the previous 50 ones of a user 1.
Now when the both users get displayed results onto their page, which is located at /Analyze/Index <- view
I enable them so that they can sort out that list by a certain property of a class which is located inside the object like this:
public JsonResult GetSortedBySales()
{
var list = lista.OrderByDescending(x => x.SaleNumber).ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
public JsonResult GetSortedByFeedback()
{
var list = lista.OrderByDescending(x => x.Feedback).ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
As you can see this produces an issue like this:
The last user that added it's own items to the list are the items which will be shown to User 1 when he tries to sort out the list, since the list is now filled with User #2's items...
The list is filled with the items from the eBay API, therefore I cannot guarantee the integrity and uniqueness of the data to each user...
What I thought I can do here?? Is that I can store these items from the list somehow into the local jquery array and then perform the sorting from that local array, so that each jquery array is local to each user in their browser and no mixing of data is done...
Do you guys understand me what I'm trying to achieve here?
I apologize if my English is bad, I've tried my best to explain the issue that I have.
Edit: here is more data on what I'm trying to achieve
Basically I have a form where users perform a search of ebay items based on a certain keyword. After the search via http request I display the results to them in a manner where they can select all of those products in a table and then perform analyzing of those selected products.
Then they are transferred with another page with the analyzed data and I display the results to them in the list object called "lista".
The "lista" list is always filled differently based on what the user searches on the page via the process that I just explained above.
So the "lista" object is always filled with the new data and when the user performs sorting of data in list "lista" they are always displayed differently if 2 users perform analyzing of data like in scenario 1 and 2 that I explained above.
Does this helps?
Edit 2:
Here is a graphical explanation of what I ment
Step 1:
Step 2:
P.S. the "lista" list is declared as static, is that what's causing the issue?
Edit again:
Okay so guys I've found a way so that the data isn't changed when I sort it. Instead of doing a jQuery post, I perform sorting of data based on two extra attributes that I added into my table tr - sales and feedback and then sorted it like following:
$(".feedbackClick").click(function() {
var $wrapper = $('#tableSellers');
$wrapper.find('.test').sort(function(a, b) {
return +$(b).attr('feedback') - +$(a).attr('feedback');
}).appendTo($wrapper);
});
This sorts the data locally in jQuery thus no data is lost at the time when multiple users perform a search.
P.S. the "lista" list is declared as static, is that what's causing the issue?
Yes. That is the problem.
You should almost never be using static variables in a web site, as those variables will end up being shared across all users.
I have a working DHTMLX grid that has a number of columns containing Combo Boxes.
A Few of these combo boxes need to be dynamically filled with data after a selection has been made in previous combo boxes.
Eg.
If User Selects a Project of 1234 in the Project Combo Box the Jobs Combo box should only display results from Jobs that belong to Project 1234.
I have been told to use the following functions and methods but cannot work out how to correctly apply them all.
Main APP Javascript code:
JoineryItems = timesheetGrid.getColumnCombo(6);
timesheetGrid.attachEvent("onEditCell",function(stage,rId,cInd,nValue,oValue){
if(cInd == 4 && stage == 2) {
JoineryItems.clearAll();
JoineryItems.load("data/combo/JoineryItems.php?Project="+nValue);
}
else {}
});
With the following PHP Code in the Server Side Combo Connector
$Project = $_GET[Project];
include_once '../../includes/db_connect.php';
include_once '../../includes/functions.php';
require_once("../../codebase/connector/combo_connector.php");
$data = new ComboConnector($res, "MySQL");
$data->render_sql("SELECT jmpJobID as value, jmpJobID as label from Inf_Jobs where jmpClosed = 0 AND jmpProjectID = $Project",
"jmpJobID",
"jmpJobID(value),jmpJobID(label)"
);
?>
Currently I cannot get the following to function correctly:
JoineryItems.clearAll(); - This Code does not seem to do anything at all even after the code runs the JoineryItems Combo Box still contains values.
JoineryItems.load(...); - Using a browser inspector I can see the results are coming through in XML format but the value is incorrect instead of the value and label being identical the label is coming through correctly and the value is coming through as an odd string of numbers which I cannot determine where they are coming from.
Whenever the onEditCell Event is attached to the grid, updating of my cell values does not occur until after a page refresh. E.G. if a user changes the date of work from the 2nd of March to the 3rd of March the cell displays the 2nd of March until the page is refreshed at which point it then displays the 3rd of march and if multiple changes are made before page refresh than only the last change is made.
Your JavaScript code looks fine with one missing condition:
timesheetGrid.attachEvent("onEditCell",function(stage,rId,cInd,nValue,oValue){
if(cInd == INDEX_OF_PROJECT_COLUMN){
JoineryItems.clearAll();
JoineryItems.load("data/combo/JoineryItems.php?Project="+nValue);
}
});
Additional if condition will prevent clearing job combo upon edit of any other cell but project column. INDEX_OF_PROJECT_COLUMN will be the index value of the column where you have project combo. Also I have removed extra js variable ProjectID as in the code given there is no need to create that but it is upto you.
Also I do not know PHP but as long as the returned data is something supported by combo then it will work fine. You may check this link for type of data supported. Hope this help.
This is done by the following:
Define Column as a Combo using any of the available methods.
Get the combo column
MyCombo = MyGrid.getColumnCombo(ColumnIndex);
Load the custom
timesheetGrid.attachEvent("onCellChanged",function(rId,cInd,nValue){
if (cInd == 0 ) {
MyCombo.clearAll();
MyCombo.load("data/combo/MyCombo.php?CustomGetVariable="+nValue);
}
Then in php you use your custom variable as part of your select statment and it returns the set of values as combo box options
If you want to load jobs accroding to the project means you should use like below
timesheetGrid.attachEvent("onEditCell",function(stage,rId,cInd,nValue,oValue){
if(cInd == 4 && stage == 2)
{
var combo2 =timesheetGrid.cells(rId,5).getCellCombo();
JoineryItems.clearAll();
JoineryItems.load("data/combo/JoineryItems.php?Project="+nValue);
}
});
I've got a list of users which I retrieve from my service. When I select any user I can see and edit info (email, roles, etc). The problem is that I don't want these changes to affect user's data in the list, I want to update data only after saving (clicking a button).
Now I'm using two variables:
$scope.selected - currently selected user
$scope.editable - variable for storing the data I'm editing
And I exchange data like this:
$scope.initEditable = function ()
{
$scope.editable = {};
$.extend($scope.editable, $scope.selected);
}
Looks like a terrible solution. What is the proper way to do it?
Actually, this is the Angular-way of approaching this problem, you are on the right track. In scenarios like yours one would typically:
Copy an item upon selection (edit start) - this is what you do with editable
Have 2-way data binding changing a copy (or an original element)
Upon edit completion we can propagate changes from a copy to the original
The nice things about this pattern is that we can easily:
Offer the 'cancel' functionality where users can revert their changes
Be able to compare a copy and the original and drive parts of the UI based on this comparison (for example, we could disable a 'Save' button if there were no changes)
So, I don't think at all that this approach is terrible. The only suggestion I could have is to use angular's angular.copy method instead of $.extend.
I have a page that has around 30 different entry fields, one of the top fields is a textfield and after this is filled in, I want to populate a dropdown and a textfield. I currently have it calling a javascript function, however my main problem is that I need to query the database to find out what value to populate the fields with.
Here is the type of thing I was trying to do:
function populateState(){
<cfquery name="getState" datasource="#application.dsn#">
SELECT STATE_CODE, CODE_ID
FROM LERG_LATA_V1 LEFT OUTER JOIN Code ON STATE_CODE = CHAR1_TX
WHERE NPX = #NPANXX#
</cfquery>
}
And then after that I would need to read the result and select that element. Any suggestions on how to do this? Most of what I am finding on my google searches are saying you cannot mix cf and js since they execute at different times.
You need to either create a state JavaScript array with your query, and then reference that in your javascript, or use the built-in cfselect tag binding to make this happen. Here's a simple example of how I do this:
http://www.dansshorts.com/post/cfselect-binding-and-selectedvalues
Dan