Ext3.4--TreeGridDemo 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CategoryPropertyInfo.aspx.cs" Inherits="WebUI.NewMall.PropertyManage.CategoryPropertyInfo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- ext css includes -->
    <link rel="stylesheet" type="text/css" href="../resources/Ext/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../resources/Ext/examples/ux/treegrid/treegrid.css" />

    <!-- ext javascript includes -->
    <script type="text/javascript" src="../resources/Ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../resources/Ext/ext-all.js"></script>
    <link href="../resources/Ext/examples/ux/css/ColumnNodeUI.css" rel="stylesheet" />
    <link href="../resources/Ext/examples/tree/column-tree.css" rel="stylesheet" />
    <script src="../resources/Ext/examples/ux/ColumnNodeUI.js"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.QuickTips.init();
            var tree = new Ext.ux.tree.ColumnTree({
                width: 500,
                height: 300,
                rootVisible: true,
                autoScoll: true,
                title: '种类属性列表',
                renderTo: Ext.getBody(),
                columns: [{
                    header: '任务',
                    width: 330,
                    dataIndex: 'task'
                }, {
                    header: '持续时间',
                    width: 100,
                    dataIndex: 'duration'
                }, {
                    header: '负责人',
                    width: 100,
                    dataIndex: 'user'
                }],
                loader: new Ext.tree.TreeLoader({
                    dataUrl: 'CategoryPropertyInfo.aspx?op=getData?id=1',
                    uiProviders: {
                        'col':Ext.ux.tree.ColumnNodeUI
                    }
                }),
                root:new Ext.tree.AsyncTreeNode({text:'Tasks'})
            })
        });
    </script>
</head>
<body>
</body>
</html>

　　

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WebUI.Mall;

namespace WebUI.NewMall.PropertyManage
{
    public partial class CategoryPropertyInfo : PageBaseMall
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Request["op"] == "getData")
            {
                var str = @"[
            {
                task: '深入浅出Extjs',
                duration: '12个月',
                user: '',
                uiProvider: 'col',
                iconCls: 'task-folder',
                children:[{
                    task: '第一章',
                    duration: '1个月',
                    user: 'Lingo',
                    uiProvider: 'col',
                    iconCls: 'task',
                }, {
                    task: '第2章',
                    duration: '2个月',
                    user: 'Lio',
                    uiProvider: 'col',
                    iconCls: 'task',
                }, {
                        task: '第3章',
                        duration: '11个月',
                        user: 'Lio',
                        uiProvider: 'col',
                        iconCls: 'task',
                }]
            }]";
                Response.Write(str);
                Response.End();
            }
        }
    }
}

　　

posted @ 2014-03-25 17:53  尼姑哪里跑  阅读(410)  评论(0)  编辑  收藏  举报