Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Sencha Touch 2 + Wordpress

  1. #1
    Sencha User
    Join Date
    May 2015
    Posts
    7
    Answers
    1

    Default Answered: Sencha Touch 2 + Wordpress

    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!

  2. (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
    Code:
    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
    Code:
    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 perisses CORS.


    Solution:


    Creates a file called httpd.conf and place the root of your web site.
    Code:
    <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!!!

  3. #2
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default Try this...

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

    Code:
    http://yourwordpresswebsite.com/api/get_page_index/
    ...which gives this back:

    Code:
    {"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:

    Code:
                                                    
    http://yourwordpresswebsite.com/api/get_page_index/
    Code:
                                                    
                    
    http://yourwordpresswebsite/api/get_page_index/?dev=1
    You just have to setup your model and then attach to a list etc.

    :-)
    I got tired of my stupid username :-)

  4. #3
    Sencha User
    Join Date
    May 2015
    Posts
    7
    Answers
    1

    Default

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

    Code:
    //<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/[email protected]',
            114: 'resources/icons/[email protected]',
            144: 'resources/icons/[email protected]'
        },
    
    
        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();
                                            });
                                        }
                                    });
                                }
                            }
                        ]
                    }
                ]
            });
        }
    });

  5. #4
    Sencha User
    Join Date
    May 2015
    Posts
    7
    Answers
    1

    Default

    (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

    Code:
    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

    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

  6. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default Try the book...

    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.

    :-)
    I got tired of my stupid username :-)

  7. #6
    Sencha User
    Join Date
    May 2015
    Posts
    7
    Answers
    1

    Default

    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.

  8. #7
    Sencha User
    Join Date
    May 2015
    Posts
    7
    Answers
    1

    Default

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


    The following code

    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

  9. #8
    Sencha User
    Join Date
    May 2015
    Posts
    7
    Answers
    1

    Default

    This link can be used for testing

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

  10. #9
    Sencha User
    Join Date
    May 2015
    Posts
    7
    Answers
    1

    Default

    (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
    Code:
    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
    Code:
    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 perisses CORS.


    Solution:


    Creates a file called httpd.conf and place the root of your web site.
    Code:
    <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!!!

  11. #10
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default

    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:-)
    I got tired of my stupid username :-)

Page 1 of 2 12 LastLast

Similar Threads

  1. Sencha Touch and wordpress
    By ajit.mankottil in forum Sencha Touch 2.x: Q&A
    Replies: 4
    Last Post: 22 Oct 2018, 5:13 AM
  2. Replies: 2
    Last Post: 28 Jun 2012, 10:30 PM
  3. implement sencha.io src into wordpress
    By helgatheviking in forum Community Discussion
    Replies: 5
    Last Post: 18 May 2012, 11:57 AM
  4. ExtJS/Sencha and Wordpress Collide
    By mrlynn in forum Community Discussion
    Replies: 0
    Last Post: 23 Nov 2010, 12:28 PM
  5. A sencha-touch based theme plugin for WordPress: first working alpha
    By sandro.paganotti in forum Sencha Touch 1.x: Examples and Showcases
    Replies: 4
    Last Post: 4 Sep 2010, 6:15 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •