Extjs Tabs Menu Load from Ajax Full Content

Question

there is a json file includes extjs code (grid and its function etc), like this:

var grid={
    width:700,
    height:400,
    title:"My Title",
    trackMouseOver:false,
    sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
    //disableSelection:true,
    closable:true,
    loadMask: true,
    id:154221,
    root: 'topics',
    totalProperty: 'totalCount',
    idProperty: 'threadid',
    remoteSort: true,
    pageSize:25,
    store: new Ext.data.JsonStore({
                root: 'topics',
                totalProperty: 'totalCount',
                idProperty: 'threadid',
                remoteSort: true,
                pageSize:25,

                fields: [
                    'title', 'forumtitle', 'forumid', 'author',
                    {name: 'replycount', type: 'int'},
                    {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
                    'lastposter', 'excerpt'
                ],


                // load using script tags for cross domain, if the data in on the same domain as
                // this page, an HttpProxy would be better
                proxy: new Ext.data.ScriptTagProxy({
                    url: 'http://extjs.com/forum/topics-browse-remote.php'
                })
            }),
                columns:[{
                    id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
                    header: "Topic",
                    dataIndex: 'title',
                    width: 420,
                    //renderer: renderTopic,
                    sortable: true
                },{
                    header: "Author",
                    dataIndex: 'author',
                    width: 100,
                    hidden: true,
                    sortable: true
                },{
                    header: "Replies",
                    dataIndex: 'replycount',
                    width: 70,
                    align: 'right',
                    sortable: true
                },{
                    id: 'last',
                    header: "Last Post",
                    dataIndex: 'lastpost',
                    width: 150,
                   // renderer: renderLast,
                    sortable: true
                }], 
                viewConfig: {
                    forceFit:true,
                    enableRowBody:true,
                    showPreview:true,
                    getRowClass : function(record, rowIndex, p, store){
                        if(this.showPreview){
                            p.body = '<p>'+record.data.excerpt+'</p>';
                            return 'x-grid3-row-expanded';
                        }
                        return 'x-grid3-row-collapsed';
                    }
                },
                bbar: new Ext.PagingToolbar({
                    pageSize: 25,
                    store: this.store,
                    displayInfo: true,
                    displayMsg: 'Displaying topics {0} - {1} of {2}',
                    emptyMsg: "No topics to display",
                    items:[
                        '-', {
                        pressed: true,
                        enableToggle:true,
                        text: 'Show Preview',
                        cls: 'x-btn-text-icon details',
                        toggleHandler: function(btn, pressed){
                            var view = grid.getView();
                            view.showPreview = pressed;
                            view.refresh();
                        }
                    }]
                })}



function renderTopic(value, p, record){
                return String.format(
                        '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
                        value, record.data.forumtitle, record.id, record.data.forumid);
            }
            function renderLast(value, p, r){
                return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
            }

Call with ajax and take in my object with Ext.util.JSON.decode

 var myObject = Ext.util.JSON.decode(responseText); tabs.add(myObject); tabs.setActiveTab(myObject.id);

there is some error. Generally I read a json or text file with ajax, and parse and add the tabs. Can you give advice?

You can't send arbitrary Javascript back and just call it [*JSON*](http://www.json.org/) - It's not clear what you're trying to achieve with an *AJAX* request, why not [add a script tag to your page dynamically](http://stackoverflow.com/questions/13121948)? — Emissary, Apr 25 '16 at 08:04
Page load Dynamically that create another page. It includes some extjs components ({} grid, object etc),, some functions (function calculate(){} etc) and some definitions (var test=1; etc). All of them in a file. I use ajax and retrieve the code. And I want to parse this script each items for use. — user5504616, Apr 26 '16 at 18:39

score 1 · Answer 1 · answered Apr 25 '16 at 08:50

You are not loading a JSON file, but a JavaScript file. They are different file types, although they look similar, but you have to distinguish them.

To load JavaScript files, ExtJS has a Loader singleton class that may assist you.

Your new JavaScript file should contain the grid definition in default ExtJS format:

Ext.define('SomeGrid',{
    ... // functions and properties go here
});

Then you can use the Loader to load the script:

Ext.Loader.loadScript({
    url:'url/to/file.js',
    onLoad:function() {
        var myObject = Ext.create('SomeGrid');
        tabs.add(myObject);
        tabs.setActiveTab(myObject.id);
    }
});

yes it includes some extjs components ({} grid, object etc),, some functions (function calculate(){} etc) and some definitions (var test=1; etc). All of them in a file. I use ajax and retrieve the code. And I want to parse this script each items for use. I think that Loadscript not support this — user5504616, Apr 26 '16 at 18:37

Extjs Tabs Menu Load from Ajax Full Content

1 Answers1