Ext.Direct Spring 1.0.0

**jeetmarwah** · 28 Oct 2011 2:08 PM

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.

**jeetmarwah** · 1 Nov 2011 11:16 AM

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

**ralscha** · 1 Nov 2011 11:56 AM

Originally Posted by jeetmarwah

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.

**jeetmarwah** · 1 Nov 2011 12:49 PM

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

**ralscha** · 1 Nov 2011 12:55 PM

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

**ralscha** · 1 Nov 2011 1:05 PM

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>

**ralscha** · 1 Nov 2011 1:07 PM

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

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

**jeetmarwah** · 1 Nov 2011 1:49 PM

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

**ralscha** · 1 Nov 2011 8:28 PM

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>

**jeetmarwah** · 2 Nov 2011 9:54 AM

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

Ext.Direct Spring 1.0.0

Thread Tools

Search Thread

Display

Issue with implementation of Ext.Direct Spring

Issue with implementation of Ext.Direct Spring

any inputs for the setting up the plug in?

any inputs for the setting up the plug in?

Similar Threads

Ext + Java + Spring + DWR

Ext JS 3.1 And Spring Webflow 2.0.8 Integration

Ext.Direct width Spring??

Ext GWT and Spring MVC

Spring with EXT

Tags for this Thread