用GridPanel显示不出数据

最新推荐文章于 2024-07-18 15:45:25 发布

powercat_sd

最新推荐文章于 2024-07-18 15:45:25 发布

阅读量364

点赞数

文章标签： EXT JavaScript json ASP prototype ViewUI

用EXT2做了一个小东西，按钮弹出FORM，FORM里面有个Tab，Tab里面是一个GridPanel，从后台穿过来Json，但是前台就是显示不出来。请各位帮着给看看。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"></link>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type= "text/javascript" src="../examples.js"></script>
<script type="text/javascript" src="../../build/local/ext-lang-ja.js"></script>
<script type="text/javascript" src="Tab.js"></script>
<script type="text/javascript">
    Ext.onReady(Tab1.app.init,Tab1.app);
</script>
<style>   
#actions li {   
    margin:.3em;   
}   
#actions li a {   
    color:#666688;   
    text-decoration:none;   
}   
</style> 
</HEAD>
<BODY>
<div id="grid" style="height:265px;"></div>
</BODY>
</HTML>


// JavaScript dOCUMENT
//image
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

//Create namespace
Ext.namespace('Tab1');

// Create Function
Tab1.app = function(){
    //

    // Private VAR

    // Private function

    // Public space
    return{
        // Public attribute
        // Public function
        init: function(){
            var Show_form;
            var Btn = new Ext.Button({
                renderTo:Ext.getBody()
                ,text:'タスク一覧'
                ,id:'Btn_show'
                //,handler:Btn_Click
            });
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget='side';

            var sm = new Ext.grid.CheckboxSelectionModel();

            var cm = new Ext.grid.ColumnModel([
                sm,
                {header:"宛先",dataIndex:"EmployeeName",sortable:true},
                {header:"社員番号",dataIndex:"EmployeeCode",sortable:true}/*,
                {header:"タスク",dataIndex:"Task"},
                {header:"状態",dataIndex:"Confirm"},
                {header:"終了日",dataIndex:"End"},
                {header:"今の段階",dataIndex:"State"},
                {header:"状況報告",dataIndex:"StateReport"},
                {header:"段階終了日",dataIndex:"StateEndDate"},
                {header:"本人最新コメント",dataIndex:"Comment"}*/
            ])

            var ds = new Ext.data.Store({
                proxy: new Ext.data.HttpProxy({url:'tab.asp'}),
                reader: new Ext.data.JsonReader(
                    {
                        totalProperty:'totalProperty',
			root:'root'
                    }, 
                    [{name: "EmployeeName",type:String,mapping:0},
                    {name: "EmployeeCode",type:String,mapping:1}/*,
                    {name: "Task"},
                    {name: "Confirm"},
                    {name: "End"},
                    {name: "State"},
                    {name: "StateReport"},
                    {name: "StateEndDate"},
                    {name: "Comment"}*/
                    ]
                )
            });

            var grid = new Ext.grid.GridPanel({
                //el:"grid",
                ds:ds,
                cm:cm,
                //sm:sm,
                //autoScroll:true,
                height:190,
                loadMask:{msg:"Wait..."},
                bbar:new Ext.PagingToolbar({
                        pageSize: 10,
                        store:ds,
                        displayInfo:true,
                        displayMsg:"第{0}から第{1}まで、全部は{2}",
                        emptyMsg:"なし"
                })
            });
            //grid.render();
            ds.load();
            var tabPanel = new Ext.TabPanel({   
                //region:'center',   
                deferredRender:false,   
                autoScroll: true,
                margins:'0 4 4 0',   
                activeTab:0,
                plain: true,
                height:240,
                items:[{   
                    id:'tab1',   
                    //contentEl:'tabs',   
                    title: 'TAB1',   
                    closable:false,   
                    autoScroll:true,
                    items:[grid]
                }]   
            });

            var fsf = new Ext.form.FormPanel({
                labelAlign: 'left'
                ,region: 'center'
                ,labelWidth:50
                ,waitMsgTarget:true
                ,height:240
                //,defaults: {width: 210}
                ,frame:true
                ,items:[
                    tabPanel
                ]
            })
            function Ok_Click(){
                Ext.Msg.alert('Click','You Click A OK');
            }
            var button = Ext.get('Btn_show');
            button.on('click',function(){
                if(!Show_form){
                    Show_form = new Ext.Window({
                        width:550
                        ,height:300
                        ,closeAction:'hide'
                        ,layout:'border'
                        ,plain: true
                        ,title:'タスク一覧'
                        ,resizable:false
                        //,defaultType: 'textfield'
                        ,items:[fsf]
                        ,buttons: [{
                            text:'確定'
                            ,handler:Ok_Click
                        },{
                            text:'リセット',
                            handler: function(){
                                //Show_form.getForm().reset();
                                fsf.getForm().reset();
                            }
                        },{
                            text: 'チャンセル',
                            handler: function(){
                                Show_form.hide();
                            }
                        }]
                    });                  
                }

                Show_form.show(this);

                //alert('init success');
            });
        }
    };
}
(); //End of function
// End of file

后台的json是{totalProperty:2,root:[{EmployeeName:'老宅',EmployeeCode:'2200364'},{EmployeeName:'曹飛',EmployeeCode:'2200471'}]}
附件有截图。
谢谢了。

powercat_sd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用GridPanel显示不出数据

用EXT2做了一个小东西，按钮弹出FORM，FORM里面有个Tab，Tab里面是一个GridPanel，从后台穿过来Json，但是前台就是显示不出来。请各位帮着给看看。[code="html"] New Document Ext.onReady(Tab1.app.init,Tab1.app); #act...
复制链接

扫一扫