Extjs项目开发之一

来源：互联网发布：mongodb和mysql 编辑：程序博客网时间：2024/06/05 07:13

ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。国庆节放假作短暂休息之后，想起多日来学生问的关于Extjs问题，决定做一项目给予理解：

后台主界面制作：

后台主界面

过程步骤：

一、导入Extjs文件分别为：

Extjs包

其中vswd-ext_2.2.js为vs2008智能提示插件；

二、新建一个js文件来编写Extjs:

</head>
<body>

        //定期更新时间
        Ext.TaskMgr.start({
         run: function(){
             Ext.fly(clock.getEl()).update(new Date().format('Y-m-d G:i:s A')+' '+aWeek[new Date().getDay()]);
        },
        interval: 1000
        });
        var viewport=new Ext.Viewport({
        layout:'border',
        items:[{
            title:'山西IT人才网后台管理',
            region:'north',
            contentEl:'north-div',
            split:true,
            border:false,
            collapsible:true,
            height:50,
            minSize:50,
            maxSize:120,
            tbar:[clock,//添加一文本
            {xtype:"tbseparator"},
            {xtype:"tbtext",text:'欢迎：admin管理员'},
            {xtype:"tbfill"},//加上这句，后面的就显示到右边去了
            {pressed:true,text:"清空缓存"},
            {pressed:true,text:"注销"}
            ]
        },{
            region:'south',
            contentEl:'south-div',
            split:true,
            border:false,
            collapsible:true,
            height:25,
            minSize:50,
            maxSize:120,
            html:'<div class="menu south">山西IT人才网，版权所有copyright:玛维斯工作室</div>'
        },{
            title:'菜单导航',
            region:'west',
            contentEl:'west-div',
            split:true,
            border:true,
            collapsible:true,
            width: 200,
            minSize:120,
            maxSize:200,
            //设定布局为fit,子容器自动填充整个父容器
             layout:'fit',
               layoutConfig:{ activeontop:true},
                defaults: { bodyStyle: 'margin:0;padding:0;'},
                 items:
                 //添加TabPanel面板
                    new Ext.TabPanel({
                        border:false,
                        activeTab:0,
                        //位置为底部
                        tabPosition:'bottom',
                        items:[{
                                contentEl:'west_content',
                                layout:'accordion',
                                layoutConfig:{animate:true },
                                title:'会员管理',
                                autoScroll:true,
                                border:false,
                                items:[<%=MemberXMLMenus %>]

                               },{
                                  layout:'accordion',
                                  layoutConfig:{animate:true },
                                  title:'系统管理',
                                  autoScroll:true,
                                  border:false,
                                  items:[<%=SysXMLMenus %>]
                               }]
                     })
        },{
           //中间内容区域
            region:'center',
            contentEl:'center-div',
            split:true,
            border:true,
            collapsible:true,
            html:'<iframe id="center-iframe" width="100%" height=100% name="main" frameborder="0" scrolling="auto" style="border:0px none; background-color:#BBBBBB; " ></iframe>'
        }]

    });
    //加载过程时间为250毫秒
      setTimeout(function(){
        Ext.get('loading').remove();
        Ext.get('loading-mask').fadeOut({remove:true});
        }, 200)
        });
    </script>

注意：

MemberXMLMenus

SysXMLMenus

这后台定义变量，将为HTML格式数据；（目的是添加折叠菜单）

三、编写后台代码：

public partial class Default : System.Web.UI.Page
    {
        public string SysXMLMenus;
        public string MemberXMLMenus;
        protected void Page_Load(object sender, EventArgs e)
        {
            XMLHelper xmlHelper1 = new XMLHelper(@"~/app_data/SysXMLMenus.xml");
            SysXMLMenus = xmlHelper1.CreateHTML();
            XMLHelper xmlHelper2 = new XMLHelper(@"~/app_data/MemberXMLMenus.xml");
            MemberXMLMenus = xmlHelper2.CreateHTML();
        }
    }

四、其中用到XMLHelper类代码为：（主要为读取XML数据）

public class XMLHelper
    {
        private string _XMLpath;
        public XMLHelper(string XMLpath)
        {
            //初始化XML
            InitXMLpath(XMLpath);
        }
        /// <summary>
        /// 设定XML文件的读写权限
        /// </summary>
        /// <param name="XMLpath"></param>
        public void InitXMLpath(string XMLpath)
        {
            //获取物理路径
            _XMLpath = HostingEnvironment.MapPath(XMLpath);
            //设定XML文件的权限
            FileIOPermission permission = new FileIOPermission(FileIOPermissionAccess.Write, _XMLpath);
            permission.Demand();

        }
        /// <summary>
        /// 读取XML数据返回DataTable
        /// </summary>
        /// <returns></returns>
        public DataTable GetAllNodes()
        {
            DataSet ds = new DataSet();
            ds.ReadXml(_XMLpath);
            return ds.Tables[0];
        }
        /// <summary>
        /// 读取子节点内容返回DataTable
        /// </summary>
        /// <param name="parentid">父类ID</param>
        /// <returns></returns>
        public DataTable GetAllNodes(string parentid)
        {
            //读取XML所有数据到DataTable
            DataTable dt = GetAllNodes();
            //克隆对象
            DataTable _dt = dt.Clone();
            foreach (DataRow dr in dt.Rows)
            {
                //如果parentid两个相等，则添加克隆对象中
                if (dr["parentid"].ToString() == parentid.ToString())
                    _dt.Rows.Add(dr.ItemArray);
            }
            return _dt;
        }
        /// <summary>
        /// text:要显示的节点文件
        /// id:属性
        /// href:链接地址
        /// hrefTarget:链接目标框架名称
        /// children:子节点格式：[{节点1},{节点2}……]
        /// leaf:当前节点是否为叶子节点，如果为false,则此节点有子点
        /// 否则为true,此节点再无子节点
        /// </summary>
        /// <param name="sb">JSON字串</param>
        public void CreateExtTreeNode(StringBuilder sb)
        {
            //节取根节点数据
            DataTable dt = GetAllNodes("0");
            if (dt.Rows.Count > 0)
            {
                sb.Append("[");
                foreach (DataRow dr in dt.Rows)
                {
                    sb.Append("{");
                    sb.Append("text:'" + dr["title"].ToString() + "',");
                    sb.Append("id:'node" + dr["id"].ToString() + "'");
                    //读取字节点数据
                    AddChildrenNode(GetAllNodes(dr["id"].ToString()), sb);
                    sb.Append("}");
                }
            }
            sb.Append("]");
        }

        /// <summary>
        /// 增加子节点,读取子节点并填加到数据中
        /// </summary>
        /// <param name="dt">DataTable读取的XML数据</param>
        /// <param name="sb">JSON字串</param>
        public void AddChildrenNode(DataTable dt, StringBuilder sb)
        {
            //读取DataTable数据
            if (dt.Rows.Count > 0)
            {
                sb.Append(",leaf:false,children:[");
                foreach (DataRow dr in dt.Rows)
                {
                    sb.Append("{");
                    sb.Append("text:'" + dr["title"].ToString() + "',");
                    sb.Append("id:'node" + dr["id"].ToString() + "',");
                    sb.Append("href:'" + dr["url"].ToString() + "',");
                    sb.Append("hrefTarget:'main'");
                    //递归读取节点中所有数据
                    AddChildrenNode(GetAllNodes(dr["id"].ToString()), sb);
                    sb.Append("}");
                }

                sb.Append("]");
            }
            else
                sb.Append(",leaf:true");
        }

        /// <summary>
        /// 得到Html数据
        /// </summary>
        /// <returns></returns>
        public string CreateHTML()
        {
            StringBuilder sb = new StringBuilder();
            DataTable dt = GetAllNodes("0");
            DataTable dt2 = null;
            string _tempHtml;
            foreach (DataRow dr in dt.Rows)
            {
                sb.Append("{title:'" + dr["title"].ToString() + "',autoScroll:true,border:false,iconCls:'nav',");

                dt2 = GetAllNodes(dr["id"].ToString());
                if (dt2.Rows.Count > 0)
                {
                    _tempHtml = "<ul class=/"LeftNav/">";
                    foreach (DataRow dr2 in dt2.Rows)
                    {
                        _tempHtml += "<li><a target=/"main/" href=/"" + dr2["url"].ToString() + "/"> " + dr2["title"].ToString() + "</a></li>";
                    }

                    if (_tempHtml != "<ul>")
                    {
                        _tempHtml += "</ul>";
                        sb.Append("html:'" + _tempHtml + "'}");
                    }
                    else
                    {
                        sb.Append("html:''}");
                    }
                }
                else
                {
                    sb.Append("html:''}");
                }

sb.Append(",");
}

return sb.ToString().TrimEnd(',');
}

}