HTTPProxy - Paging Grid problem - Ext JS

本文档详细记录了一位开发者如何解决使用ExtJS框架时遇到的跨域数据加载问题,包括调整HTTP代理配置、修改URL路径以及解决数据读取格式错误等步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

I just can't seem to get teh HTTPproxy to work at all. I have my PHP proxy file setup to actually write a file and whatever its response is to a text file, and so far, using this latest version of EXT 1.0, I can't seem to get it to even come close to "hitting" my PHP file to retrieve XML data...here's the code - i'm modifying the Paging example:

/*
 * Ext - JS Library 1.0 Alpha 3 - Rev 1
 * Copyright(c) 2006-2007, Jack Slocum.
 */

Ext.onReady(function(){

    // create the Data Store
    var ds = new Ext.data.Store({
        // 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.HttpProxy({url: './web_service_api2.php',
	    method : 'post'
	    }),
params:{a:'getdata',displaycols:'id,job_name,job_start_date,job_start_time,job_due_date,job_due_time,job_for,notes',t2:'z_planner',dbname2 : 'joomla'},
        // create reader that reads the Topic records
        reader: new Ext.data.XmlReader({
          
		   record: 'row',
            totalProperty: '@totalCount',
		   id: 'id'
        }, [
	     	{name: 'id', mapping: 'id'},
            {name: 'job_name', mapping: 'job_name'},
            {name: 'job_start_date', mapping: 'job_start_date'},
            {name: 'job_start_time', mapping: 'job_start_time'},
            {name: 'job_due_date', mapping: 'job_due_date'},
            {name: 'job_due_time', mapping: 'job_due_time'},
            {name: 'job_for', mapping: 'job_for'},
		   {name: 'notes', mapping: 'notes'}
        ]),

        // turn on remote sorting
        remoteSort: true
    });
   ds.setDefaultSort('job_name', 'desc');
   

    // pluggable renders
    function renderTopic(value, p, record){
        return String.format('{0}{1}', value, record.data['excerpt']);
    }
    function renderTopicPlain(value){
        return String.format('{0}', value);
    }
    function renderLast(value, p, r){
        return String.format('{0}
by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastPoster']);
    }
    function renderLastPlain(value){
        return value.dateFormat('M j, Y, g:i a');
    }

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store
	fm = Ext.form;
Ed = Ext.grid.GridEditor;
    var cm = new Ext.grid.ColumnModel([{
				id : "id",
                   header: "Job Name", 
                   dataIndex: 'job_name',
           width: 200,
           editor: new Ed(new fm.TextField({
               allowBlank: false
           }))
        },
			  { 
                   header: "Start Date", 
				dataIndex: 'job_start_date',
                   width: 200, 
                   editor: new Ed(new fm.TextField({
               allowBlank: false
           }))
        },
			  { 
                   header: "Start Time", 
				dataIndex: 'job_start_time',
                   width: 200, 
                   editor: new Ed(new fm.TextField({
               allowBlank: false
           }))
        },
			  { 
                   header: "Due Date", 
				dataIndex: 'job_due_date',
                   width: 200, 
                   editor: new Ed(new fm.TextField({
               allowBlank: false
           }))
        },
			  { 
                   header: "Due Time", 
				dataIndex: 'job_due_time',
                   width: 200, 
                   editor: new Ed(new fm.TextField({
               allowBlank: false
           }))
        },
			  { 
                   header: "Job For", 
				dataIndex: 'job_for',
                   width: 200, 
                  editor: new Ed(new fm.TextField({
               allowBlank: false
           }))
        },
			  { 
                   header: "Notes", 
				dataIndex: 'notes',
                   width: 200, 
                   editor: new Ed(new fm.TextField({
               allowBlank: false
           }))
        }]);

    // by default columns are sortable
    cm.defaultSortable = true;

    // create the editor grid
    var grid = new Ext.grid.Grid('topic-grid', {
        ds: ds,
        cm: cm,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
        enableColLock:false
    });

    // make the grid resizable, do before render for better performance
    var rz = new Ext.Resizable('topic-grid', {
        wrap:true,
        minHeight:100,
        pinned:true,
        handles: 's'
    });
    rz.on('resize', grid.autoSize, grid);

    // render it
    grid.render();

    var gridFoot = grid.getView().getFooterPanel(true);

    // add a paging toolbar to the grid's footer
    var paging = new Ext.PagingToolbar(gridFoot, ds, {
        pageSize: 25,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}',
        emptyMsg: "No topics to display"
    });
    // add the detailed view button
    paging.add('-', {
        pressed: true,
        enableToggle:true,
        text: 'Detailed View',
        cls: 'x-btn-text-icon details',
        toggleHandler: toggleDetails
    });

    // trigger the data store load
//   ds.load({params:{start:0, limit:25, forumId: 4}});
ds.load();

    function toggleDetails(btn, pressed){
        cm.getColumnById('topic').renderer = pressed ? renderTopic : renderTopicPlain;
        cm.getColumnById('last').renderer = pressed ? renderLast : renderLastPlain;
        grid.getView().refresh();
    }
});
some more code (the PHP file that contains the HTML):

<?php
error_reporting(5);
$yuiext_path="./lib/yui-extnew";
?><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Paging Grid Example</title>

<link rel="stylesheet" type="text/css" href="<?php echo $yuiext_path;?>/resources/css/ext-all.css" />


         <script type="text/javascript" src="<?php echo $yuiext_path;?>/yui-utilities.js"></script>     <script type="text/javascript" src="<?php echo $yuiext_path;?>/ext-yui-adapter.js"></script>     
    <script type="text/javascript" src="<?php echo $yuiext_path;?>/ext-all.js"></script>
    
<script type="text/javascript" src="testeditor.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $yuiext_path;?>/examples/grid-examples.css" />


<link rel="stylesheet" type="text/css" href="<?php echo $yuiext_path;?>/examples.css" />

</head>
<h1>Paging Grid Example</h1>


This example shows how to create a grid with paging. This grid uses a ScriptTagProxy to fetch cross-domain
    remote data (from the Ext forums).</p>


Note that the js is not minified so it is readable. See paging.js.</p>

    <div style="width:694px;" class="x-box-blue">
        <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
        <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
            <h3 style="margin-bottom:5px;">Ext - Help Forum</h3>
            <div id="topic-grid" style="border:1px solid #99bbe8;overflow: hidden; width: 665px; height: 300px;"></div>
        </div></div></div>
        <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
    </div>


</body>
</html>
Reply With Quote
  #2  
Old 03-11-2007, 10:02 PM
Default

Of course, I spend hours working on this problem, only to get it fixed MINUTES after posting my question..... I do this every time! ugh... I should just post here every single time I have a problem instead of spending time researching the answer.

Anyway, code that worked with previous versions using the old connection method wouldn't work this time...for my URL I had './web_service_api2.php' whereas what works is '/web_service_api2.php' (need the root of the domain, by the way...)... the extra period kept things looking in the current directory as my script... typical of Unix/Windows path referencing...

Now I have *another* problem - my data that's returned is not displayed in the grid... I'll work on that one some more...
Reply With Quote
  #3  
Old 03-11-2007, 10:12 PM
Default

reader: new Ext.data.XmlReader({ 
        record: 'row', 
        totalProperty: '@totalCount', 
        id: 'id'
on totalProperty replace with totalRecords

totalProperty is argument for JsonReader
Reply With Quote
  #4  
Old 03-12-2007, 12:07 AM
Default

Thanks for that. I had a feeling I was getting that confused - been looking closer at the source code lately to get things fixed.
Reply With Quote
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值