ExtJs学习笔记-白红宇

ExtJs学习笔记

阅读量：433 次

发布时间：2019-03-06

本文共 4189 字，大约阅读时间需要 13 分钟。

最近由于项目需要用到ExtJs，初次接触这个框架，特搜集相关资料，以便查阅

面板中可以有工具栏，工具栏可以位于面板顶部或底部，Ext中工具栏是由Ext.Toolbar类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏，可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。

比如下面的代码：

Ext.onReady(

function(){

new Ext.Panel({

renderTo:

"hello",

title:

"hello",

//面板标题

width:300,

height:300,

html:'<h1>Hello,HelloWorld!</h1>',

tools:[{

//生成面板右上角的工具栏

id:

"save",

handler:

function(){Ext.Msg.alert('最大化','呵呵');}

//点击工具栏调用些方法

{id:

"help", {id:

"close"}],

tbar:[

new Ext.Toolbar.TextItem('工具栏：'),

//添加一文本

{pressed:

true,text:'刷新'},

{xtype:

"tbfill"},

//加上这句，后面的就显示到右边去了

{pressed:

true,text:

"添加"},

handler:

function

(){Ext.Msg.alert('帮助','please help me!');}

{pressed:

true,text:

"保存"}

]

});

View Code

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage
     
      " %>    
      Index    
          
          
          
          
              
                   ExtJs的Ajax
        Name:

NewGrid

View Code

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage
     
      " %>    
      Index

Grid

View Code

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage
     
      " %>    
      Index

Tree

效果：

code:

View Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="DynamicExtTree_Default" %>

tree右键menu

效果：

code：

View Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tree.aspx.cs" Inherits="DynamicExtTree_tree" %>

code:

View Code

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage
     
      " %>    
      Index

code

View Code

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage
     
      " %>    
      Index

code:

View Code

#region GetJson数据        public string GetJson()        {            //JsonResult js = null;            var id = 1;            var name = "huxing";            var en_name = "lucky";            var homepage = "www.lucky.com";            //String json = "{'id':1282,'text':'安全监察'},{'id':2,'text':'调度管理'},{'id':4,'text':'营销管理'},{'id':6,'text':'生产管理'}";               //string data = "[{\"name\":\"" + name + "\",\"age\":\"" + age + "\"},{\"name\":\"lete\",\"age\":23}]";            string data = "[{\"id\":\"" + id + "\",\"name\":\"" + name + "\",\"en_name\":\"" + en_name + "\",\"homepage\":\"" + homepage + "\"},{\"id\":\"2\",\"name\":\"hu2\",\"en_name\":\"hu22\",\"homepage\":\"www.126.com\"}]";            //string data = "[[\"id\":\"" + id + "\",\"name\":\"" + name + "\",\"en_name\":\"" + en_name + "\",\"homepage\":\"" + homepage + "\"],[\"id\":\"2\",\"name\":\"hu2\",\"en_name\":\"hu22\",\"homepage\":\"www.126.com\"]]";            //string data = "{\"id\":\"" + id + "\",\"name\":\"" + name + "\",\"en_name\":\"" + en_name + "\",\"homepage\":\"" + homepage + "\"}";            //string data = "[{1, 'hu1', 'lucky1', 'http://blog.sina.com.cn/s/blog_6482ea940100gzps.html'},{2, 'hu2', 'lucky2', 'http://blog.sina.com.cn/s/blog_6482ea940100gzps.html'},{3, 'hu3', 'lucky3', 'http://blog.sina.com.cn/s/blog_6482ea940100gzps.html'}]";            //string data = "1,'hu1','lucky1',http://blog.sina.com.cn/s/blog_6482ea940100gzps.html,2,hu2,lucky2,http://blog.sina.com.cn/s/blog_6482ea940100gzps.html,3,hu3,lucky3,http://blog.sina.com.cn/s/blog_6482ea940100gzps.html";            return data;            //return js.Deserialize(data);        }        #endregion

Ext.Ajax.request({

url: url,

method: "POST",

success: function (response, option) {

window.location.href = "金网通通用扫描系统.rar"; //这样就可以弹出下载对话框了

//window.location.href = "E://2012-05-23%20金网通通用扫描系统.rar"; //这样就可以弹出下载对话框了

//window.location.href = "E:/2012070422535400工资表.xls";

failure: function (response, option) {

response = Ext.util.JSON.decode(response.responseText);

core.alert.error(response.msg);

}

});