Sencha Touch 2 + Wordpress

[judsonbomfim]

Hello!

How do I search json data in Wordpress?
I'm using WP REST API in Wordpress

I'm starting now with Sencha.
I read something about sencha touch + wordpres, but it is very old, 2-3 years ago.
Let's help with something more current!

I thank you!

[digeridoo]

The best plugin for Wordpress to Sencha integration is probably 'JSON API'. Install that then you can call stuff with this link:

http://yourwordpresswebsite.com/api/get_page_index/

...which gives this back:

{"status":"ok",    "pages":[
     {page 1 info},
     {page 2 info},
     {page 3 info},
     {etc...}
] }

A rootProperty of 'pages' will have to be set in your store reader.

You can try other links too such as:

                                                
http://yourwordpresswebsite.com/api/get_page_index/

                                                
                
http://yourwordpresswebsite/api/get_page_index/?dev=1

You just have to setup your model and then attach to a list etc.

:-)

[judsonbomfim]

I took a exeplo coming in framework and modified with my data, but does not seek information

//<debug>
Ext.Loader.setPath({
    'Ext': '../../src'
});
//</debug>


/**
 * This is the output of the Sencha Touch 2.0 Getting Started Guide. It sets up a simple application
 * with Sencha Touch, creating a Tab Panel with 3 tabs - home, blog and contact. The home page just
 * shows html, the blog page uses a nested list to display recent blog posts, and the contact page
 * uses a form to wire up user feedback.
 */
Ext.application({
    name: 'Sencha',


    startupImage: {
        '320x460': 'resources/startup/Default.jpg', // Non-retina iPhone, iPod touch, and all Android devices
        '640x920': 'resources/startup/640x920.png', // Retina iPhone and iPod touch
        '640x1096': 'resources/startup/640x1096.png', // iPhone 5 and iPod touch (fifth generation)
        '768x1004': 'resources/startup/768x1004.png', //  Non-retina iPad (first and second generation) in portrait orientation
        '748x1024': 'resources/startup/748x1024.png', //  Non-retina iPad (first and second generation) in landscape orientation
        '1536x2008': 'resources/startup/1536x2008.png', // : Retina iPad (third generation) in portrait orientation
        '1496x2048': 'resources/startup/1496x2048.png' // : Retina iPad (third generation) in landscape orientation
    },


    isIconPrecomposed: false,
    icon: {
        57: 'resources/icons/icon.png',
        72: 'resources/icons/icon@72.png',
        114: 'resources/icons/icon@2x.png',
        144: 'resources/icons/icon@144.png'
    },


    requires: [
        'Ext.tab.Panel',
        'Ext.form.*',
        'Ext.field.*',
        'Ext.data.*',
        'Ext.data.proxy.JsonP'
    ],


    launch: function() {
        //The whole app UI lives in this tab panel
        Ext.Viewport.add({
            xtype: 'tabpanel',
            fullscreen: true,
            tabBarPosition: 'bottom',


            items: [
                // This is the home page, just some simple html
                {
                    title: 'Home',
                    iconCls: 'home',
                    cls: 'home',
                    scrollable: true,
                    html: [
                        '<img height=260 src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>Building the Getting Started app</p>",
                        '<h2>Sencha Touch (2.0.0)</h2>'
                    ].join("")
                },


                // This is the recent blogs page. It uses a tree store to load its data from blog.json
                {
                    xtype: 'nestedlist',
                    title: 'Blog',
                    iconCls: 'star',
                    cls: 'blog',
                    displayField: 'title',


                    store: {
                        type: 'tree',
                        autoLoad: false,
                        fields: ['title', 'content'],


                        proxy: {
                            type: 'jsonp',
                            url: 'http://www.clickagencia.com.br/modelo/prata/wp-json/posts?type=pastorais',
                            reader: {
                                type: 'json',
                                rootProperty: 'posts'
                            } 
                        }
 
                    },


                    detailCard: {
                        xtype: 'panel',
                        scrollable: true,
                        styleHtmlContent: true
                    },


                    listeners: {
                        itemtap: function(nestedList, list, index, element, post) {
                            this.getDetailCard().setHtml(post.get('content'));
                        }
                    }
                },


                // This is the contact page, which features a form and a button. The button submits the form
                {
                    xtype: 'formpanel',
                    title: 'Contact Us',
                    iconCls: 'user',
                    url: 'contact.php',
                    layout: 'vbox',


                    items: [
                        {
                            xtype: 'fieldset',
                            title: 'Contact Us',
                            instructions: 'Email address is optional',


                            items: [
                                {
                                    xtype: 'textfield',
                                    label: 'Name',
                                    name: 'name'
                                },
                                {
                                    xtype: 'emailfield',
                                    label: 'Email',
                                    name: 'email'
                                },
                                {
                                    xtype: 'textareafield',
                                    label: 'Message',
                                    name: 'message',
                                    height: 90
                                }
                            ]
                        },
                        {
                            xtype: 'button',
                            text: 'Send',
                            ui: 'confirm',


                            // The handler is called when the button is tapped
                            handler: function() {


                                // This looks up the items stack above, getting a reference to the first form it see
                                var form = this.up('formpanel');


                                // Sends an AJAX request with the form data to the url specified above (contact.php).
                                // The success callback is called if we get a non-error response from the server
                                form.submit({
                                    success: function() {
                                        // The callback function is run when the user taps the 'ok' button
                                        Ext.Msg.alert('Thank You', 'Your message has been received', function() {
                                            form.reset();
                                        });
                                    }
                                });
                            }
                        }
                    ]
                }
            ]
        });
    }
});

[judsonbomfim]

(Google Tradutor)

Thank digeridoo for his return, but I need something a little more detailed, because as I said I'm starting with Sencha

I made the following store, but still gives error

Ext.define('AppWp.store.WpStore', {
    extend: 'AppWp.model.WpModel',
    config: {
        model: 'Hello.model.GreetingModel',
        proxy: {
            type: 'rest',
            url: 'http://www.clickagencia.com.br/modelo/prata/wp-json/posts?type=pastorais'
        },
        listeners: {
            beforeload: function () {
                var name = document.location.search.slice(1);
                this.getProxy().setExtraParam('name', name);
            }
        }
    }
});

this is the error

XMLHttpRequest cannot load http://www.clickagencia.com.br/model...art=0&limit=25. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.
app.js:14 Uncaught TypeError: Cannot read property 'getData' of undefined

Follow this example

https://spring.io/guides/gs/consuming-rest-sencha/

I have an application using Onsen + AngularJs + Phonegap and works perfectly. see code

    app.factory('pastoraisData', function(){
        var data = { url: 'http://www.clickagencia.com.br/modelo/prata/wp-json/posts?type=pastorais' };
        return data;
    });
    app.controller("pastoraisPosts", function($scope, $http, $sce, pastoraisData) {
        $scope.isLoading = true;  
        $http.get(pastoraisData.url, {
            cache: true
              })
            .success(function(data, status, headers, config) {
            $scope.isLoading = false;
            $scope.posts = data;
        }).
        
        error(function(data, status, headers, config) {
        // log error
        });
    });

I really want to learn more about Sencha, for I have seen that it is very good, but this integration is fundamental to me.


Would anyone be able to give a help I thank you very much

[digeridoo]

I don't have time to test your example just yet...but it should be quite easy to adapt. A quick check seems that the response is JSON and not JSONP (I didn't see a callback at the start, before the data?). This would mean your Sencha app would have to be run from the same server as the link you gave, is this possible?

I would recommend reading the Sencha and Wordpress chapter in the book 'Creating Mobile Apps With Sencha Touch 2'. Everything you need is explained in there. They have a specific section on Sencha and Wordpress (p262).

Also I notice that you are using wp-json plugin instead of JSON API plugin for Wordpress. Have you tried that one instead? If I have time, I will reply later in relation to your post.

:-)

[judsonbomfim]

I'll check the book.The search will be on an external server.

The plugin I'm using is the WP REST API (WP API) because it is more up to date has a great documentation. Using rest.

Plugin
https://wordpress.org/plugins/json-rest-api/

Documentation
http://wp-api.org/

I will still test the other plugin to see if this is the problem.

[judsonbomfim]

With the aid of the book and spring.io the tutorial, I got the data with the JSON API


The following code

Ext.define('Hello.store.GreetingStore', {
    extend: 'Ext.data.Store',
    config: {
        model: 'Hello.model.GreetingModel',
        proxy: {
            type: 'jsonp',
            url: 'http://www.meusite.com.br/api/get_page_index/',
			reader: {
				type: 'json',
				rootProperty: 'pages'
			}
        },
    }
});

Thank you very much for your help!


But the question remains: And the other plugin?
Could someone enlighten me because I can not with WP REST API (WP API)? What is the difference between them?


It is more current and more complete. Excelnte would be if someone could help

[judsonbomfim]

This link can be used for testing

http://www.clickagencia.com.br/model...type=pastorais

[judsonbomfim]

(Google translator)


After much research, I could find a solution!
I will describe each problem and solution that worked for me.


As had already posted, I indicate this tutorial for mounting an application example.
https://spring.io/guides/gs/consuming-rest-sencha/


JSON API


This is an example of store for JSON Api

Ext.define('MyApp.store.appStore', {
    extend: 'Ext.data.Store',
    config: {
        model: 'MyApp.model.appStore',
        proxy: {
            type: 'jsonp',
            url: 'http://www.mysite.com/api/get_page_index/',
            reader: {
                type: 'json',
                rootProperty: 'pages'
            }
        },
    }
});

WP REST API (API WP)


This is an example of store for WP Rest API

Ext.define('MyApp.store.appStore', {
    extend: 'Ext.data.Store',
    config: {
        model: 'MyApp.model.appStore',
        proxy: {
            type: 'rest',
            url: 'http://www.mysite.com/wp-json/posts',
            reader: {
                type: 'json'
            }
        },
    }
});// JavaScript Document

The point of this plugin are some errors caused because of perissões CORS.


Solution:


Creates a file called httpd.conf and place the root of your web site.

<IfModule mod_rewrite.c>
  Header set Access-Control-Allow-Origin "*"
  Header set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
  Header set Access-Control-Allow-Headers: "Content-Type"
 
  RewriteEngine on
  RewriteBase /
</IfModule>

In its Chrome browser, you need to install the Allow-Control-Allow-Origin extension
https://chrome.google.com/webstore/d...jhddihlkkiljbi


With this you can use the Plugin WP Rest API, which is excellent!


OTHER USEFUL LINKS


WP REST API (API WP) (Recommended)
https://wordpress.org/plugins/json-rest-api/
Documentation
http://wp-api.org/

JSON API
https://wordpress.org/plugins/json-api/


Test CORN
http://embed.plnkr.co/1E8ot9e1eVs23IrjzqKr/preview


Postman - REST Client
https://chrome.google.com/webstore/d...pjoooidkmcomcm


XAMPP Apache + MySQL + PHP + Perl
https://www.apachefriends.org/


Thanks to user digeridoo for the tips!


I hope I can help with these tips!!!

[digeridoo]

Great, glad I could help thank you for sharing your solution. Do you think WP JSON plugin is better then than the JSON API plugin? I've not tried it.Thanks:-)