1. #11
    Sencha User
    Join Date
    Mar 2010
    Location
    Laguna Niguel, CA
    Posts
    62
    Vote Rating
    0
    jeetmarwah is on a distinguished road

      0  

    Default Issue with implementation of Ext.Direct Spring

    Issue with implementation of Ext.Direct Spring


    Firstly, I would like to appreciate your effort in integrating the ExtJs4 with Spring.

    I am trying to plug it in my product (Tomcat6/spring3x/extjs4.x) but running into few issues. These are the steps I have taken till now:

    - enabled spring by adding the jar file and editing the spring conf file

    Code:
    <mvc:annotation-driven />
    
    
        <!-- to enable the Ext.Direct -->
        <context:component-scan base-package="ch.ralscha.extdirectspring.demo" use-default-filters="false">
            <context:include-filter expression="org.springframework.stereotype.Controller" type="annotation" />
        </context:component-scan>
    
    
        <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
            <property name="maxUploadSize" value="1000000" />
        </bean>
        <!-- End of Ext.Direct -->
    - created a sample class file

    Code:
    @Controller
    @Service
    public class ExtjsExamplesController
    {
    
    
        @ExtDirectMethod(value = ExtDirectMethodType.STORE_READ, group = "treestreams")
        public String extjsdirectMethod(HttpServletResponse response, 
                                  HttpServletRequest request, 
                                  Locale locale) throws ServletException, IOException
        {
          //do something here
    //        return new ArrayList<Node>();
            return extjsRequest(request, response);
        }  
    }
    - On the client side, my index.html looks like this

    Code:
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title id="page-title">Resolve Social</title>
    
    
        <link rel="stylesheet" type="text/css" href="../js/extjs4/resources/css/ext-all.css">
        <style type="text/css">
                .task {
                    background-image: url(../js/extjs4/examples/shared/icons/fam/cog.gif) !important;
                }
                .task-folder {
                    background-image: url(../js/extjs4/examples/shared/icons/fam/folder_go.gif) !important;
                }
        </style>
    
    
        <script type="text/javascript" src="../js/extjs4/ext-debug.js"></script>
        <script src="resolve/api-debug.js?group=treestreams"></script>
    
    
    
    
        <script type="text/javascript" src="app/view/States.js"></script>
        <script type="text/javascript" src="app.js"></script>
        <script type="text/javascript" >
    
    
        Ext.onReady(function()
        {
            var cb = Ext.create('RS.view.States', {renderTo: 'states-div'});
            var streams = Ext.create('RS.view.Streams', {renderTo: 'tree-example'});
            /*
            var cb = new RS.view.States({
                renderTo: 'states-div'
            });
            */
    
    
        });
    
    
        </script>
        <!--  <script type="text/javascript" src="app/app.js"></script>  -->
    </head>
    <body>
    <div id='states-div'>States : </div>
    <br/><br/>
    <div id="somethingelse">
    Some other text
    </div>
    <div id="tree-example"></div>
    <div id="somethingelse2">
    Some other text
    </div>
    </body>
    </html>
    - my store where I have enabled my direct call looks like this
    Code:
    Ext.require([
        'Ext.data.*',
        'Ext.direct.*',
        'RS.model.Task' //This is like import and it does not work if this is not there
    ]);
    
    
    Ext.Direct.addProvider(Ext.app.REMOTING_API);
    
    Ext.define('RS.store.StreamStore', {
    
    
        extend : 'Ext.data.TreeStore',
        model: 'RS.model.Task',//also, this has to be full name as it does not work if you just put Task
        proxy: {
            //this works
            //type: 'ajax',
            //url: 'data/treegrid.json' //the store will get the content from the .json file
            //url : '/resolve/service/example/wiki/extjs'
        
            //this DOES NOT WORK
            type:'direct',
            //url : '/resolve/service',
            directFn : extjsExamplesController.extjsdirectMethod
            
            
        },
        autoLoad : true, //will query the data on stores load, this will only be READONLY, so its a good idea
        folderSort: false
        
    });
    - I am getting the following error:
    Code:
    provider is undefined
    
     * @param {String} className - ext-debug.js(line 7596)
    error.jpg

    Please let me know what am I missing.

    Thanks,
    Jeet.

  2. #12
    Sencha User
    Join Date
    Mar 2010
    Location
    Laguna Niguel, CA
    Posts
    62
    Vote Rating
    0
    jeetmarwah is on a distinguished road

      0  

    Default any inputs for the setting up the plug in?

    any inputs for the setting up the plug in?


    any inputs for the setting up the plug in? I am still getting the above error and not able to figure out what am I missing.

    Please advise.
    Thanks,
    Jeet

  3. #13
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    126
    Vote Rating
    11
    ralscha will become famous soon enough

      0  

    Default


    Quote Originally Posted by jeetmarwah View Post
    any inputs for the setting up the plug in? I am still getting the above error and not able to figure out what am I missing.
    Jeet
    Sorry.Haven't seen the previous post. At a first look there is a line missing. To activate the plugin you need this line: <context:component-scanbase-package="ch.ralscha.extdirectspring"/>

    To be sure that the server side is working you can check the output of
    resolve/api-debug.js?group=treestreams
    If this script contains the method definitions the server side should work.

  4. #14
    Sencha User
    Join Date
    Mar 2010
    Location
    Laguna Niguel, CA
    Posts
    62
    Vote Rating
    0
    jeetmarwah is on a distinguished road

      0  

    Default


    I have added the <context:component scan...>' in my spring config but still the same issue.

    Also, I am not able to locate the api-debug.js' file. Where should I look for this file?

    Please advise.
    Thanks,
    Jeet

  5. #15
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    126
    Vote Rating
    11
    ralscha will become famous soon enough

      0  

    Default


    api-debug.js is generated during runtime it does not exists in the filesystem.
    You have to check the output in a browser. Enter this url and you should see an output
    http//localhost:8080/resolve/api-debug.js?group=treestreams

  6. #16
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    126
    Vote Rating
    11
    ralscha will become famous soon enough

      0  

    Default


    At a second look, the url for the api looks a bit strange.
    It should be something like this http://server/context/servlet_name/api-debug.js

    context the context where your application is installed. may also be root (/)
    servlet_name is the name of the DispatchServlet in web.xml. With the following code it's "action"

    <servlet>
    <servlet-name>action</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
    </servlet>

  7. #17
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    126
    Vote Rating
    11
    ralscha will become famous soon enough

      0  

    Default


    Sorry not the name of the servlet the url-mapping.

    <servlet-mapping>
    <servlet-name>action</servlet-name>
    <url-pattern>/action/*</url-pattern>
    </servlet-mapping>

  8. #18
    Sencha User
    Join Date
    Mar 2010
    Location
    Laguna Niguel, CA
    Posts
    62
    Vote Rating
    0
    jeetmarwah is on a distinguished road

      0  

    Default


    Thanks, that helped and I a step further now but not working yet.

    - I added this in web.xml
    Code:
    <servlet-mapping>
            <servlet-name>resolve</servlet-name>
            <url-pattern>/extjsspring/*</url-pattern>
        </servlet-mapping>
    - Changed my index.html to this
    Code:
    <link rel="stylesheet" type="text/css" href="../js/extjs4/resources/css/ext-all.css">
        <style type="text/css">
                .task {
                    background-image: url(../js/extjs4/examples/shared/icons/fam/cog.gif) !important;
                }
                .task-folder {
                    background-image: url(../js/extjs4/examples/shared/icons/fam/folder_go.gif) !important;
                }
        </style>
    
    
        <script type="text/javascript" src="../js/extjs4/ext-debug.js"></script>
        <script src="resolve/extjsspring/api-debug.js?group=treestreams"></script>
    
    
    
    
        <script type="text/javascript" src="app/view/States.js"></script>
        <script type="text/javascript" src="app.js"></script>
        <script type="text/javascript" >
    - The url 'http://localhost:8080/resolve/extjsspring/api-debug.js?group=treestreams' gives me this (which is good)
    Code:
    Ext.ns('Ext.app');Ext.app.REMOTING_API = {  "actions" : {    "extjsExamplesController" : [ {      "name" : "extjsdirectMethod",      "len" : 1    } ]  },  "type" : "remoting",  "url" : "/resolve/extjsspring/router"};
    - Changed my Java api as follows:
    Code:
    @Controller
    @Service
    public class ExtjsExamplesController
    {
        public static class Task
        {
            public String task;
            public String user;
            public String duration;
        }
        
        
        @ExtDirectMethod(value = ExtDirectMethodType.STORE_READ, group = "treestreams")
        public List<Task> extjsdirectMethod(HttpServletResponse response, 
                                  HttpServletRequest request, 
                                  Locale locale) throws ServletException, IOException
        {
          //do something here
            return new ArrayList<Task>();
            //return extjsRequest(request, response);
        }
    }
    - My store is still the same but here it is for convenience
    Code:
    Ext.require([
        'Ext.data.*',
        'Ext.direct.*',
        'RS.model.Task' //This is like import and it does not work if this is not there
    ]);
    
    
    Ext.Direct.addProvider(Ext.app.REMOTING_API);
    
    
    Ext.define('RS.store.StreamStore', {
    
    
        extend : 'Ext.data.TreeStore',
        model: 'RS.model.Task',//also, this has to be full name as it does not work if you just put Task
        proxy: {
        	//this works
            //type: 'ajax',
            //url: 'data/treegrid.json' //the store will get the content from the .json file
            //url : '/resolve/service/example/wiki/extjs'
        
        	//this DOES NOT WORK
            type:'direct',
            directFn : extjsExamplesController.extjsdirectMethod
        },
        autoLoad : true, //will query the data on stores load, this will only be READONLY, so its a good idea
        folderSort: false
        
    });

    Thanks for your quick responses.
    Jeet

  9. #19
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    126
    Vote Rating
    11
    ralscha will become famous soon enough

      0  

    Default


    The last thing that looks a little bit odd is the word resolve in this url
    <script src="resolve/extjsspring/api-debug.js?group=treestreams"></script>
    If resolve is the context the application is deployed to and index.html is located in the root folder
    the src url looks like this http://serverip/resolve/resolve/extj...up=treestreams
    Isn't there a 404 error in the firebug console?

    Shouldn't the script tag looks like this?
    <script src="extjsspring/api-debug.js?group=treestreams"></script>

  10. #20
    Sencha User
    Join Date
    Mar 2010
    Location
    Laguna Niguel, CA
    Posts
    62
    Vote Rating
    0
    jeetmarwah is on a distinguished road

      0  

    Default


    I am a step ahead now. My request is reaching the server (java api) but the UI does not understand what it is getting. So I am getting closer but not there yet.

    My server side code is as follows:
    Code:
    public class ExtjsExamplesController
    {
        private static int counter = 0;
        
        public static class Task
        {
            public String task;
            public String user;
            public String duration;
        }
        
        
        @ExtDirectMethod(value = ExtDirectMethodType.STORE_READ, group = "treeStreams")
        public String getTreeStreams1(HttpServletRequest request, HttpServletResponse response)  throws ServletException, IOException
        {
          //do something here
    //        return new ArrayList<Task>();
            return extjsRequest(request, response);
        }  
    
    public String extjsRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
        {
            String content = "";
            
            try
            {
    //read the json and return as a string
                content = FileUtils.readFileToString(new File("C:\\project\\resolve3\\dist\\tomcat\\webapps\\resolve\\social\\data\\treegrid.json"));
                
            }
            catch(Exception e)
            {
                
            }
            
            return  content;
        }
    
    
    }
    My JSON data is as follows:
    Code:
    {"text":".","children": [
        {
        task:'Inbox',
        duration:0.25,
        user:'Tommy Maintz',
        leaf:true,
        iconCls:'task'
        },
        {
        task:'Blog',
        duration:0.25,
        user:'Tommy Maintz',
        leaf:true,
        iconCls:'task'
        },
        {
        task:'Sent',
        duration:0.25,
        user:'Tommy Maintz',
        leaf:true,
        iconCls:'task'
        },
        {
        task:'Notification',
        duration:0.25,
        user:'Tommy Maintz',
        leaf:true,
        iconCls:'task'
        },
        {
        task:'Starred',
        duration:0.25,
        user:'Tommy Maintz',
        leaf:true,
        iconCls:'task'
        },
        {
            task:'Projects',
            duration:13.25,
            user:'Tommy Maintz',
            iconCls:'task-folder',
            //expanded: true,
            children:[
            {
                task:'Project1',
                duration:1.25,
                user:'Tommy Maintz',
                iconCls:'task-folder',
                //expanded: true,
                children:[{
                    task:'Project1(only)',
                    duration:0.25,
                    user:'Tommy Maintz',
                    leaf:true,
                    iconCls:'task'
                },
                {
                        task: 'Team C',
                        duration: 0.5,
                        user: 'Aaron Conran',
                        iconCls: 'task-folder',
                        //expanded: true,
                        children: [{
                            task: 'Team C(only)',
                            duration: 0.25,
                            user: 'Aaron Conran',
                            iconCls: 'task',
                            leaf: true
                        }, {
                            task: 'User 1',
                            duration: 0.25,
                            user: 'Aaron Conran',
                            iconCls: 'task',
                            leaf: true
                        }]
            },
                
                
             {
                    task:'Runbooks',
                    duration:2.75,
                    user:'Tommy Maintz',
                    leaf:true,
                    iconCls:'task-folder'
                },{
                    task: 'ActionTasks',
                    duration: .75,
                    user: 'Tommy Maintz',
                    leaf: true,
                    iconCls: 'task-folder'
                }, {
                    task: 'RSS',
                    duration: 2,
                    user: 'Tommy Maintz',
                    leaf: true,
                    iconCls: 'task-folder'
                }]
            }, {
                task:'Project2',
                duration:12,
                user:'Tommy Maintz',
                iconCls:'task-folder',
                //expanded: true,
                children:[{
                    task:'Project2(only)',
                    duration:6.5,
                    user:'Tommy Maintz',
                    leaf:true,
                    iconCls:'task'
                },{
                    task:'Team D',
                    duration: 2.75,
                    user:'Tommy Maintz',
                    iconCls:'task-folder',
                    //expanded: true,
                    children: [{
                        task: 'Team D(only)',
                        duration: 1.25,
                        user: 'Tommy Maintz',
                        iconCls: 'task',
                        leaf: true
                    }, {
                        task: 'User 5',
                        duration: 1.5,
                        user: 'Tommy Maintz',
                        iconCls: 'task',
                        leaf: true
                    }]
                },{
                    task:'Runbooks',
                    duration:2.75,
                    user:'Tommy Maintz',
                    leaf:true,
                    iconCls:'task-folder'
                },{
                    task: 'ActionTasks',
                    duration: .75,
                    user: 'Tommy Maintz',
                    leaf: true,
                    iconCls: 'task-folder'
                }, {
                    task: 'Rss',
                    duration: 2,
                    user: 'Tommy Maintz',
                    leaf: true,
                    iconCls: 'task-folder'
                }]
            }]
        },{
            task:'Teams',
            duration:2,
            user:'Core Team',
            iconCls:'task-folder',
            //expanded: true,
            children:[{
                task: 'Team A',
                duration: 0.75,
                user: 'Tommy Maintz',
                iconCls: 'task-folder',
                //expanded: true,
                children: [{
                    task: 'Team A(only)',
                    duration: 0.25,
                    user: 'Tommy Maintz',
                    iconCls: 'task',
                    leaf: true
                }, {
                    task: 'User 1',
                    duration: 0.25,
                    user: 'Tommy Maintz',
                    iconCls: 'task',
                    leaf: true
                }, {
                    task: 'User 2',
                    duration: 0.25,
                    user: 'Tommy Maintz',
                    iconCls: 'task',
                    leaf: true
                }]
            },{
                task: 'Team B',
                duration: 3.75,
                user: 'Darrell Meyer',
                iconCls: 'task-folder',
                //expanded: true,
                children: [{
                    task: 'Team B(only)',
                    duration: 0.25,
                    user: 'Darrell Meyer',
                    iconCls: 'task',
                    leaf: true
                }, 
                {
                        task: 'Team C',
                        duration: 0.5,
                        user: 'Aaron Conran',
                        iconCls: 'task-folder',
                        //expanded: true,
                        children: [{
                            task: 'Team C(only)',
                            duration: 0.25,
                            user: 'Aaron Conran',
                            iconCls: 'task',
                            leaf: true
                        }, {
                            task: 'User 1',
                            duration: 0.25,
                            user: 'Aaron Conran',
                            iconCls: 'task',
                            leaf: true
                        }]
            },  
                
                {
                    task: 'User 3',
                    duration: 0.25,
                    user: 'Darrell Meyer',
                    iconCls: 'task',
                    leaf: true
                }, {
                    task: 'User 4',
                    duration: 0.25,
                    user: 'Darrell Meyer',
                    iconCls: 'task',
                    leaf: true
                },{
                    task: 'User 5',
                    duration: 3,
                    user: 'Darrell Meyer',
                    iconCls: 'task',
                    leaf: true
                }]
            },{
                task: 'Team C',
                duration: 0.5,
                user: 'Aaron Conran',
                iconCls: 'task-folder',
                //expanded: true,
                children: [{
                    task: 'Team C(only)',
                    duration: 0.25,
                    user: 'Aaron Conran',
                    iconCls: 'task',
                    leaf: true
                }, {
                    task: 'User 1',
                    duration: 0.25,
                    user: 'Aaron Conran',
                    iconCls: 'task',
                    leaf: true
                }]
            }]
        },
        {
                    task: 'Runbooks',
                    duration: 0.5,
                    user: 'Aaron Conran',
                    iconCls: 'task-folder',
                    //expanded: true,
                    children: [ {
                        task: 'Runbook.WebHome1',
                        duration: 0.25,
                        user: 'Aaron Conran',
                        iconCls: 'task',
                        leaf: true
                    }]
            },
        {
                    task: 'ActionTasks',
                    duration: 0.5,
                    user: 'Aaron Conran',
                    iconCls: 'task-folder',
                    //expanded: true,
                    children: [{
                        task: 'comment#resolve',
                        duration: 0.25,
                        user: 'Aaron Conran',
                        iconCls: 'task',
                        leaf: true
                    }]
            },
            {
                        task: 'Users',
                        duration: 0.5,
                        user: 'Aaron Conran',
                        iconCls: 'task-folder',
                        //expanded: true,
                        children: [ {
                            task: 'User 9',
                            duration: 0.25,
                            user: 'Aaron Conran',
                            iconCls: 'task',
                            leaf: true
                        }]
            } ,
        {
                    task: 'RSS',
                    duration: 0.5,
                    user: 'Aaron Conran',
                    iconCls: 'task-folder',
                    //expanded: true,
                    children: [{
                        task: 'CNN',
                        duration: 0.25,
                        user: 'Aaron Conran',
                        iconCls: 'task',
                        leaf: true
                    }]
            },
        {
                    task: 'Forums',
                    duration: 0.5,
                    user: 'Aaron Conran',
                    iconCls: 'task-folder',
                    //expanded: true,
                    children: [{
                        task: 'Extjs 4 Forum',
                        duration: 0.25,
                        user: 'Aaron Conran',
                        iconCls: 'task',
                        leaf: true
                    }]
            }
    ]}
    My store is as follows:
    Code:
    Ext.require([
        'Ext.data.*',
        'Ext.direct.*',
        'RS.model.Task' //This is like import and it does not work if this is not there
    ]);
    
    
    Ext.define('RS.store.StreamStore', {
    
    
        extend : 'Ext.data.TreeStore',
        model: 'RS.model.Task',//also, this has to be full name as it does not work if you just put Task
        proxy: {
            //type: 'ajax',
            //url: 'data/treegrid.json' //the store will get the content from the .json file
            //url : '/resolve/service/example/wiki/extjs'
                
                
            type:'direct',
            directFn : extjsExamplesController.getTreeStreams1
        },
        autoLoad : true, //will query the data on stores load, this will only be READONLY, so its a good idea
        folderSort: false
        
    });

    This is the error I get it on the client side:
    Code:
    POST http://localhost:8080/resolve/extjsspring/router     406 Not Acceptable




    ext direct client side error.jpg

    So I think If I can figure out what should be the correct return type of my java method that my client can read it correctly, this task will be successful.

    Please advise.

    Thanks,
    Jeet

Similar Threads

  1. Ext + Java + Spring + DWR
    By sfwalter in forum Community Discussion
    Replies: 59
    Last Post: 13 Dec 2010, 3:31 AM
  2. Ext JS 3.1 And Spring Webflow 2.0.8 Integration
    By erosszz in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 2 Feb 2010, 11:33 PM
  3. Ext.Direct width Spring??
    By jonathanlarav in forum Ext.Direct
    Replies: 0
    Last Post: 1 Jun 2009, 5:10 PM
  4. Ext GWT and Spring MVC
    By Ivan Polak in forum Community Discussion
    Replies: 4
    Last Post: 12 May 2009, 10:55 PM
  5. Spring with EXT
    By sshah in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 11 May 2008, 12:53 PM

Thread Participants: 13

Tags for this Thread