Question

有一个json文件包含extjs代码（网格及其功能等），如下所示：

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']);
            }

使用ajax调用并使用Ext.util.JSON.decode

获取我的对象

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

有一些错误。通常我用ajax读取json或文本文件，然后解析并添加选项卡。你能提出建议吗？

Answer 1

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);
    }
});

从Ajax完整内容加载Extjs选项卡菜单

1 个答案: