Sencha-touch list does not show data - list

I'm quite new to Sencha-touch and I'm following the getting started video on the documentation website.
There is a part where the app shows blogposts in a list, but it doesn't seem to work for me.
I have the same code in the video but it doesn't work.
Ext.define('GS.view.Blog', {
extend: 'Ext.navigation.View',
xtype: 'blog',
config: {
title: 'Blog',
iconCls: 'star',
items: {
xtype: 'list',
itemTpl: '{title}',
store: {
autoload: true,
fields: ['title', 'link', 'author'],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
}
}
});
Has the code/library from sencha touch changed since the video or am I doing something wrong (and what)?

Took me a little while to figure out, but it is because the store is not loading. You may ask why, as you have specified autoload to be true? The reason is because it is autoLoad (notice the capital L).
:)

please download latest sencha 2.0 framework sdk ,I also faced same issue but after downloading and using sencha-touch-all. js ,everything works fine .Probs they have updated the 2.0 with added new js files like navigation view .Open your existing sdk and check in document whether you can find Ext.View.navigation exist or not.

Related

Filter products by sku number in admin

I need to have SKU in product list in admin panel "OC3.0.2.0" and if that possible to have it in filter at same place. Is here anybody can show me the way to solve this small problem.
Thanks a lot for your time.
You need to modify controller, language, model and template files to add SKU filter in admin product list page, where its lengthy process.
I just modified this pages but can paste the whole code here because code is more than 30000 characters. I created a zip file with modified files.
If you are using default theme please download this files from this link and replace the default files with new files
If you are using a customized theme you can download the extension from this link.
Note: If SKU is not Mandatory then please remove the autocomplete from the product list. Otherwise, it creates displays empty fields in its column.
Please Open product_list.twig from admin/view/template/catalog
and remove the following code from it
$('input[name=\'filter_sku\']').autocomplete({
'source': function(request, response) {
$.ajax({
url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_sku=' + encodeURIComponent(request),
dataType: 'json',
success: function(json) {
response($.map(json, function(item) {
return {
label: item['sku'],
value: item['product_id']
}
}));
}
});
},
'select': function(item) {
$('input[name=\'filter_sku\']').val(item['label']);
}
});
Hope this helps you
I created a free extension for this to help the community. Here is the link:
https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=38074
Designed to work for Opencart 3.x version.

Ember-models-table addon throws ember warn error while trying to use 'routeName' property

Am using ember-models-table to display table in my applicaiton. The table is great for sorting , pagination etc, but am trying to route from specific row to different page based on the id. it has mentioned in its example to use 'routeName'
But when I use it throws the following error:
"Assertion Failed: When calling warn you must provide an options hash as the third parameter. options should include an id property."
My .js coding :
columns:[
{
"propertyName": "firstName",
"title":"First Name",
"routeName":"/#/profile/_id"
},
and so on
Thanks for your help.
update: the error is gone after updating ember to ember 3.1.2
but there is a warning and its not functioning properly as expected , where am i going wrong?
my code :
columns:[
{
"propertyName": "firstName",
"title":"First Name",
"routeName":"profile"
},
If you look at the example app for this addon, you'll see the following syntax for the route:
{
propertyName: 'id',
routeName: 'users.user'
},
This roughly corresponds to a route like users/1. So, if this is your router:
Router.map(function() {
this.route('users', function() {
this.route('user', { path: '/users/:user_id' });
});
});
And here are the columns:
columns: [
{
"propertyName": "something",
"routeName": "users.user"
},
{
"propertyName": "id",
"routeName": "users.user"
}
]
Here's the template:
{{models-table
data=model
columns=columns
...
}}
routeName should not include the id segment.
Hover over the anchor tag created to see where it leads to, and make adjustments until it matches where it should go. It will only render when there's a valid route for the link. The path seems like it might be relative, so if you're already on the users route, you may only need to specify user for the routeName.
I figured this out by searching the addon codebase for routeName and then trying it out with the same kind of format that {{link-to}} helper uses in Ember.
P.S. this is some missing info in the documentation, so if this addon is helping you out, consider making a PR to help others.

Can't create ember record from console

I've just started learning ember.js (v2.0.0), I was following this page, and at one point, the tutorial instructs me to create 4 records from the chrome console. I do exactly as instructed, but nothing happens. No errors, warnings, nothing.
On the Ember Inspector, I'm doing this:
On the console, after clicking ">$E" as mentioned in the image, I'm entering this:
$E.store.createRecord('customer', { name: 'John Smith', location: 'Boston', isSubscribed: false }).save()
$E.store.createRecord('customer', { name: 'Jenny Reed', location: 'New York', isSubscribed: false }).save()
$E.store.createRecord('customer', { name: 'Bill Crawford', location: 'Philadelphia', isSubscribed: true, subscriptionDate: new Date(), subscriptionDuration: 12 }).save()
$E.store.createRecord('customer', { name: 'Cathy Smith', location: 'Boston', isSubscribed: true, subscriptionDate: new Date(), subscriptionDuration: 6 }).save()
This is the screenshot after that.
EDIT: The data tab shows "customer(0)", customer being the model, with no entries. Also, I thought I'll just log what's in $E, but, I can't. I'm not clear with how that works. And, I checked my firebase server too. Nothing there either. But that's ok I guess considering that EmberFire just synced my Ember-Data records to firebase, and the Ember-Data record was empty here.
If things went as expected, I should have had 4 records synced to my firebase server, but that's not what happened.
I have the Ember Inspector from Chrome Web Store installed.
Basically, I've followed the instructions exactly as described in the tutorial.
Hours of googling didn't help.
Any help is appreciated. Thanks.

How do I properly setup app-test.js when unit testing ExtJS using Jasmine?

I am fairly new to both Jasmine(2.2) as well as ExtJS(4.2.1). I am following the Unit Testing instructions in the Sencha docs to test the feed-viewer example ExtJS application. I cannot seem to get the app-test file quite right to load the application.
Here is my app-test.js
Ext.Loader.setConfig({ enabled : true });
var Application = null;
Ext.onReady( function() {
Application = Ext.create('app', {
name: 'FV',
controllers: [
'Articles'
],
launch: function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
jasmineEnv.execute();
}
});
});
Here is the app.js
Ext.application({
name: 'FV',
paths: {
'Ext.ux': '../../../examples/ux/'
},
controllers: [
'Articles',
'Feeds'
],
autocreateViewport: true
});
And, in case this may be a part of the issue, my folders are structured as such:
FV/
- app/
- app-test/
- resources/
- specs/
- app.js
- app-test.js
- run-test.html
My test to see that the application has been properly loaded is failing. Chrome's dev tools show me two errors. The first is an XMLHttpRequest cannot load, and the second is an Uncaught TypeError: Object is not a function being thrown at the third line of app-test.js
I feel like there's something remarkably simple I may have missed.
Any help would be immensely appreciated!
I finally got it working. Here is my revised app-test.js
Ext.Loader.setConfig({ enabled : true });
Ext.ns('FV');
Ext.application({
name: 'FV',
appFolder: 'app',
controllers: ['Articles'],
autoCreateViewport: false,
launch: function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
jasmineEnv.execute();
}
});
Considering how different this is from the tutorial in the Sencha docs, and how much Jasmine has changed since 1.1.0 (which is the version their tutorial uses), it's definitely time for them to do an update.

How do I add custom HTML in Rally sdk 2.0?

I'm creating an app with some custom gauges using Rally SDK 2.0. This requires some custom HTML. I took a rake-compiled app.html file from the examples as a starting point. Using JustGage for my gauges. Here is my launch function.
launch: function () {
var info = this.getStoriesForProject(); //Gets some aggregate info
$('#header label').html(info.Title);
var g = new JustGage({
id: "devgauge",
value: info.DevPercent,
levelColors: ['#f80404', '#f8f804', '#50ed0e'],
min: 0,
max: 100,
title: "Dev %"
});
this.add('foo');
},
Then I added some custom HTML in app.html.
Now, if i run this without the code "this.add('foo')", the app adds a new div in the body with class="x-container" and puts my custom HTML outside that div effectively hiding it.
If i use the "this.add('foo') it does NOT create the div class=x-container and it shows my widget just fine.
What is the PROPER way to accomplish what I'm attempting using the 2.0 sdk? I realize the add method is for adding Ext components, but somehow calling this is causing my HTML to render ok. Looking at some apps we developed in the old SDK, using the custom HTML worked just fine in those.
Ext likes to know what is going on layout-wise and often gets confused if you're manually manipulating the dom beneath it without its knowledge. Usually if we have some known set of initial layout we add those via the items collection on the app:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
itemId: 'header'
},
{
xtype: 'container',
itemId: 'devguage'
}
]
});
Then inside of launch you can add content to those like so:
this.down('#devguage').add({
//some other component
});
You can always just drop all the way down to the element level though as well:
this.down('#header').getEl().dom //the raw html element
By default apps use an auto layout, so any items should flow as you would expect with normal html.
Or, instead of using itemId, you can set the id of the container's element using its id property:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
id: 'header'
},
{
xtype: 'container',
id: 'devguage'
}
]
});
The resulting html elements will use those ids, which allows you to target them directly with your own custom rendering.