ExtJS 快速入门—— 面板 详细版

1、TabPanel

前面我们学习了 Viewport、Window 及对话框的使用。下面我们再来看另外一种比较常 用的界面控件，也就是选项板。选项面板是一个包括一个或多个选项卡(Tab)，同一时刻只 显示一个选项卡的这种用户界面。比如下图的 IE 选项设置界面中，就是一个选项板的应用， 选项板上有"常规"、"安全"、"隐私"等选项卡。

Ext中提供了选项板控件TabPanel，由类 Ext.TabPanel来定义，该类直接继承自Ext.Panel， 因此他实际上也是一个包含特定特性的面板。看下面的代码：

Ext.onReady(function(){
var tab=new Ext.TabPanel({
renderTo:"test",
width:500,
height:200,
enableTabScroll:true,
activeTab:0,
items:[{title:"面板 1",
html:"<h1>this is the first panel!</h1>"},
{closable : true,
title:"面板 2",
html:"<h1>this is the second panel!</h1>"},
{closable : true,
title:"面板 3",
html:"<h1>this is the third panel!</h1>"}
]
});

上面的代码定义了一个简单的选项面板，该面板中包含三个 tab，初始化时显示第一个 tab 内容，如图 3-5 所示：

与 Panel 一样，选项板同样是由一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头 部(header)、面板尾部(bottom)、面板主区域(body)等五个部分组成。

除了面板主区域(body) 部分以外，其它部份的特性与 Panel 完全一样。选项板 body 区域中的内容只能是选项卡 Tab 元素，不能是其它类型的控件。

当前可以用来作为选项卡元素只能是 Panel 类型控件的对象 ， 包括 Panel 的子类，比如 Ext.Panel、Ext.form.FormPanel、Ext,TabPanel、Ext.grid.GridPanel、 Ext.tree.TreePanel 等控件都可以用来作为选项板中的选项卡 Tab。

换一句话说，Ext 并没有针 对选项面板中的 Tab 专门定义一个新的类，每一个 tab 其实也就是普通的 Panel 而已。

同一 时刻，选项板中只能有一个选项卡 Tab 处于激活状态，可以在配置选项中使用 activeTab 项 来指定默认激活的 Tab，也可以在程序中使用 setActiveTab ()方法来把指定的 Tab 变成当前 活动 Tab。

当然，也可以直接把 html 页面中符合特殊条件的 DIV 标签转换成选项板中的选项，此 时需要在 TabPanel的配置选项中把 autoTabs 项设置为 true，把 deferredRender 项设置为 false， 然后通过 applyTo 项指定把页面中包含 class="x-tab"这种样式的子节点的 DOM 节点应用于 选项板。看下面的例子：

Ext.onReady(function(){
var tabs = new Ext.TabPanel({
applyTo: 'test', activeTab: 0, deferredRender: false, autoTabs: true
});
});
<div id="test">
<div class="x-tab" title="选项 1">A simple tab</div>
<div class="x-tab" title="选项 2">Another one</div>
<div title="选项 3">dsfdsfd<div class="x-tab" title="选项 4">Another one</div></div>
</div>

得到的效果如下图示：

由于"选项 3"这个 DIV 标签的 class 不是 x-tab 所以不会转换成选项卡 Tab，而"选项 4"这个 DIV 虽然与"选项 1"这些节点不在同一个层次，但仍然会把他作为 Tab 项来同等 处理。

选项板 TabPanel 中的选项 Tab 项可以在初始化的时候通过 items 时候指定，也可以在 TabPanel对象创建以后，使用add()、insert()或 remove 等来动态添加或删除其中的选项卡Tab。 为了演示对面板中 tab 的操作，我们可以给上面的程序简单的添加一个工具栏按钮，当点击 按钮的时候在选项面板中动态添加 tab。代码如下：

Ext.onReady(function(){
var i=0;
var tab=new Ext.TabPanel({
renderTo:"test",
width:500,
height:200,
enableTabScroll:true,
activeTab:0,
bbar:[{text:"添加",handler:function(){
tab.add({title:"新面板"+i++,closable : true});
}
}],
items:[{title:"面板 1",
html:"<h1>this is the first panel!</h1>"},
{closable : true,
title:"面板 2",
html:"<h1>this is the second panel!</h1>"},
{closable : true,
title:"面板 3",
html:"<h1>this is the third panel!</h1>"}
]
});
});

重新运行该程序，点击选项面板下面的"添加"按钮，每点一次我们会看到在面板中 添加了一个新的 Tab。当 tab 的个数很多时，还会出现左右滚动条，如图 3-6 所示。

添加按钮的事件响应函数内容如下：

tab.add({title:"新面板"+i++,closable : true});

我们直接调用选项面板的 add 方法，就可以把一个面板添加到选项板中，成为一个新的 tab。closeable 表示该面板可以关闭，因此在 tab 上会出现一个关闭 tab 的 图标，点击该图 标可以关闭该面板。

可以使用迭代功能，实现批量关闭选项板 TabPanel 中的所有 Tab，比如，可以在上面的 bbar 中，添加一个按钮来实现关闭所有打开的 Tab，该按钮的定义代码如下：

{text:"关闭所有面板",handler:function(){
tab.items.each(function(p){
if(p.closable)tab.remove(p);
});
}}

2、布局

首先来看看布局的基本概念及使用，所谓布局就是指容器组件中子元素的分布、排列组 合方式。Ext 的所有容器组件都支持布局操作，每一个容器都会有一个对应的布局，布局负 责管理容器组件中子元素的排列、组合及渲染方式等。

Ext2.0 的一个重大改动，就是提供了一套功能强大的布局系统，通过这些布局的应用， 可以满足应用程序中各种复杂的用户界面布局处理，下面我们将对 ExtJS 中的布局作介绍。 Ext中的每一个布局类都有一个简短的布局名称，在使用布局的时候直接使用布局名称即可 。

布局主要应用于容器组件，在 Container 类中，提供了一个 layout 配置选项，该项可以 是一个预定义布局名称（字符串），也可以是一个布局对象。比如下面是两种使用布局的方 式：

new Ext.Panel({
renderTo:"test", width:400, height:100,
layout:new Ext.layout.ColumnLayout(),
items:[{columnWidth:.5, title:"面板 1"},
{columnWidth:.5, title:"面板 2"}]
});
new Ext.Panel({
renderTo:"test", width:400, height:100,
layout:"column",
items:[{columnWidth:.5, title:"面板 1"}, {columnWidth:.5, title:"面板 2"}]
});

ExtJS 的布局基类为 Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS 的容器 组件包含一个 layout 及 layoutConfig 配置属性，这两个属性用来指定容器使用的布局及布局 的详细配置信息。如果没有指定容器组件的 layout 则默认会使用 ContainerLayout 作为布局， 该布局只是简单的把元素放到容器中，有的布局需要 layoutConfig 配置，有的则不需要 layoutConfig 配置。

上面的代码我们创建了一个面板 Panel，Panle 是一个容器组件，我们使用 layout 指定该 面板使用 Column 布局。该面板的子元素是两个面板，这两个面板都包含了一个与列布局相 关的配置参数属性 columnWidth，他们的值都是 0.5，也就是每一个面板占一半的宽度。

如果不使用布局，代码如下：

new Ext.Panel({
renderTo:"test", width:400, height:100,
items:[{columnWidth:.5,
title:"面板 1"}, {columnWidth:.5,
title:"面板 2"}]
});

程序运行的效果如下：

在使用布局的时候，可以通过 layutConfig 属性来指定布局的相关配置信息，比如默认 的布局有一个 renderHidden 属性，如果该属性值为 true，则在执行布局相关操作时，会把其 子元素都渲染成隐藏状态。比如下面的代码：

new Ext.Panel({
renderTo:"test", width:400, height:100,
layout:"column",
layoutConfig:{renderHidden:true},
items:[{columnWidth:.5, title:"面板 1"}, {columnWidth:.5, title:"面板 2"}]
});

这样在执行布局操作的时候，就不会显示容器中的子元素，如下图所示：

Ext 中的一些容器组件都已经指定所使用的布局，比如 TabPanel 使用 card 布局、 FormPanel 使用 form 布局，GridPanel 中的表格使用 column 布局等，我们在使用这些组件的 时候，不能给这些容器组件再指定另外的布局。

ExtJS2.0 一共包含十种布局，常用的布局有 border、column、fit、form、card、tabel 等 布局，十种布局的类结构如图 5-2 所示，下面我们分别对这几种布局作简单的介绍。

3、表格 Grid

ExtJS 中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号 、 列汇总、单元格编辑等实用功能。表格由类 Ext.grid.GridPanel 定义，继承自 Panel，其 xtype 为 grid。ExtJS 中，表格 Grid 必须包含列定义信息，并指定表格的数据存储器 Store。

表格 的列信息由类 Ext.grid.ColumnModel 定义、而表格的数据存储器由 Ext.data.Store 定义，数据 存储器根据解析的数据不同分为 JsonStore、SimpleStroe、GroupingStore 等。

我们首先来看最简单的使用表格的代码：

Ext.onReady(function(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],
[2, 'jfox', 'huihoo','www.huihoo.org'],
[3, 'jdon', 'jdon','www.jdon.com'],
[4, 'springside',
'springside','www.springside.org.cn'] ];
var store=new
Ext.data.SimpleStore({data:data,fields:["id","name","organization
","homepage"]});
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国 Java 开源产品及团队",
height:150,
width:600,
columns:[{header:"项目名称",dataIndex:"name"},
{header:"开发团队",dataIndex:"organization"},
{header:"网址",dataIndex:"homepage"}],
store:store,
autoExpandColumn:2
});
});

执行上面的代码，可以得到一个简单的表格，如图 6-1 所示。

4、TreePanel

树控件由 Ext.tree.TreePanel 类定义，控件的名称为 treepanel，TreePanel 类继承自 Panel 面板。在 ExtJS 中使用树控件其实非常简单，我们先来看下面的代码：

Ext.onReady(function(){
var root=new Ext.tree.TreeNode({
id:"root",
text:"树的根"});
root.appendChild(new Ext.tree.TreeNode({
id:"c1",
text:"子节点"
}));
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
root:root,
width:100
});
});

代码的第一句使用 new Ext.tree.TreeNode 类来创建一个树节点，第二句使用树节点 root 的 appendChild 方法来往该节点中加入一个子节点，最后直接使用 new Ext.tree.TreePanel 来 创建一个树面板，在树面板的初始化参数中指定树的 root 属性值为前面创建的 root 节 点 ， 也就是树根节点。上面的程序执行效果如图 8-1 所示。

当然，在很多时候，树的节点是动态产生的，也就是需要从服务器端的一个 url 中获得 树的节点信息。ExtJS 的树控件提供了对这种功能的支持，你只需要在创建树控件的时候， 通过给树指定一个节点加载器，就可以从服务器端动态加载树的节点信息。我们来看下面的 代码：

var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"树的根"});
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
root:root,
loader: new Ext.tree.TreeLoader({url:"treedata.js"}),
width:100
});

treedata.js这个url返回的内容如下：
[{
id: 1,
text: '子节点1',
leaf: true
},{
id: 2,
text: '儿子节点2',
children: [{
id: 3,
text: '孙子节点',
leaf: true
}]
}]

执行上面的程序，可以得到一棵异步加载子节点的树，点击"根节点"会到服务器端加 载子节点，如图 8-2 所示。

当然上面的程序是一次性加载完了树的所有节点信息，我们也可以实现让每一个节点都 支持动态加载的树，只需要在通过服务器请求数据的时候，每次服务器端返回的数据只包含 子节点，而不用把孙子节点也返回即可。比如把上面 treedata.js 中的内容改为下面的内容：

{
id: 1,
text: '子节点',
leaf: false
}]

也就是节点树中只包含一个子节点，而该子节点通过指定 leaf 值为 false (默认情况该值 为 false)，表示该节点不是一个叶子节点，其下面还有子节点。再执行前面的程序，不断点 击"子节点"可以得到如图 8-3 所示的效果。

当然这是一个无限循环的树，在实际应用中我们服务器端返回的数据是程序动态产生 的，因此不可能每一次都产生 leaf 为 false 的节点，如果是叶子节点的时候，则需要把返回的 JOSN 对象中的 leaf 设置为 true。如下所示：

[{
id: 1,
text: '子节点',
leaf:true
}]

5、表单 Form

对于传统的 b/s 应用来说，数据录入元素是放在表单

标签里面的。而对于 ExtJS 应用来说，则可以直接使用 FormPanel 控件来存放表单中的元素。FormPanel 继承自 Panel， 在 Panel 的基础上提供与表单相关的各种特性，比如可以指定表单提交的 url、指定表单提 交方式、是否是二进制提交等；

另外 FormPanel 固定使用 form 布局，前面关于布局一节中 的内容我们说过，form 布局也就是专门用于组织包含输入元素的布局。看下面的代码：

Ext.onReady(function(){
var form=new Ext.form.FormPanel({
renderTo:"hello",
title:"用户信息录入框",
height:200,
width:300,
labelWidth:60,
labelAlign:"right",
frame:true,
defaults:{xtype:"textfield",width:180},
items:[
{name:"username",fieldLabel:"姓名"},
{name:"password",fieldLabel:"密码",inputType:"password"},
{name:"email",fieldLabel:"电子邮件"},
{xtype:"textarea",name:"intro",fieldLabel:"简介"}
],
buttons:[{text:"提交"},{text:"取消"}]
})
});

在上面的代码中，使用 new Ext.form.FormPanel 来创建表单面板，通过 labelWidth 来指 定表单中字段标签的宽度，labelAlign 来指定字段标签的对齐方式，在 defaults 中指定该容 器中所有子元素默认类型都是 textfield，也就是录入文本框。

在 items 定义的子元素中，一 共包含三个 textfield 元素以及一个 textarea 元素，这些元素都包含一个 name 属性，相当于 传统标签中的 name 属性，fieldLabel 属性用来指定字段标签。通过执行上面的代码， 可以得到一个表单信息录入框，如图 9-1 所示。

表单面板 FormPanel 包含一个 form 属性，该属性是一个 Ext.form.BasicForm 类型的对 象，可以直接访问，也可以通过 getForm()方法得到。BasicForm 表示基本的表单，包含了 submit、load、reset 等方法，用来取代传统表单中的 submit、reset 等方法，通过调用 这些方法可以实现提交表单、表单信息重置等操作。下面的代码实现了表单的提交操作：

Ext.onReady(function(){
var f=new Ext.form.FormPanel({
renderTo:"hello",
title:"用户信息录入框",
url:"person.ejf",
height:200,
width:300,
labelWidth:60,
labelAlign:"right",
frame:true,
defaults:{xtype:"textfield",width:180},
items:[
{name:"username",fieldLabel:"姓名"},
{name:"password",fieldLabel:"密码",inputType:"password"},
{name:"email",fieldLabel:"电子邮件"},
{xtype:"textarea",name:"intro",fieldLabel:"简介"}
],
buttons:[{text:"提交",
handler:function(){
f.form.submit({
waitTitle:"请稍候",
waitMsg:"正 在提 交表 单数 据， 请稍 候。。。。。。"
});
}},{text:"重置",
handler:function(){
f.form.reset();
}
}]
})
});

在上面的代码中，当用户点击"提交"按钮的时候，f.form.submit({..})这一句代码用来 提交表单，由于默认情况下 ExtJS 的表单都是使用 Ajax 的方式提交，因此在提交的过程中 可以通过 waitMsg 来指定提交的时候在页面上显示一个等待对话框；当点击"重置"按钮的 时候，可以重置表单中的各项数据，如图 9-2 所示。

6、理解 Html DOM、Ext Element 及 Component

要学习及应用好 Ext 框架，需要理解 Html DOM、Ext Element 及 Component 三者的区 别。

Ext 是基于 Web 的富客户端框架，其完全是基于标准 W3C 技术构建设的，使用到的都 是 HTML、CSS、DIV 等相关技术。Ext 最杰出之处，是开发了一系列非常简单易用的控件 及组件，我们只需要使用这些组件就能实现各种丰富多彩的 UI 的开发。

无论组件有多少配置属性、还是事件、方法等等，其最终都会转化为 HTML 在浏览器 上显示出来，而每一个 HTML 页面都有一个层次分明的 DOM 树模型，浏览器中的所有内 容都有相应的 DOM 对象，动态改变页面的内容，正是通过使用脚本语言来操作 DOM 对象 实现。

仅仅有 DOM 是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点 添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句 javascript 才能完成。因 此 ，Ext 在 DOM 的基础上，创建了 Ext Element，可以使用 Element 来包装任何 DOM，Element 对象中添加了一系列快捷、简便的实用方法。

对于终端用户来说，仅仅有 Element 是不够的，比如用户要显示一个表格、要显示一棵 树、要显示一个弹出窗口等。

因此，除了 Element 以外，Ext 还建立了一系列的客户端界面 组件 Component，我们在编程时，只要使用这些组件 Componet 即可实现相关数据展示及交 互等，而 Component 是较高层次的抽象，每一个组件在渲染 render 的时候，都会依次通过Element、DOM 来生成最终的页面效果。

在使用 Ext 开发的应用程序中，组件 Component 是最高层次的抽象，是直接给用户使 用的，Ext Element 是 Ext 的底层 API，主要是由 Ext 或自定义组件调用的，而 DOM 是 W3C 标准定义的原始 API，Ext 的 Element 通过操作 DOM 来实现页面的效果显示。

在 Ext 中，组件渲染以后可以通过访问组件的 el 属性来得到组件对应的 Element，通过 访问 Element 的 dom 属性可以得到其下面的 DOM 对象。另外，我们可以通过通过 Ext 类的 快捷方法 getCmp、get、getDom 等方法来得组件 Component、Ext 元素 Element 及 DOM 节 点。比如：

var view=new Ext.Viewport();//创建了一个组件Component
view.el.setOpacity(.5);//调用 Element 的 setOpacity 方法
view.el.dom.innerHTML="Hello Ext";//通过 Element 的 dom 属性操作 DOM 对象

再看下面的代码：

var win=new Ext.Window({id:"win1",title:"我的窗口
",width:200,height:200});
win.show();
var c=Ext.getCmp("win1");//得到组件win
var e=Ext.get("win1");//根据id得到组件win相应的Element
var dom=Ext.getDom("win1");//得到 id 为 win1 的 DOM 节点

7、Ext 类中的 get 方法简介

Ext 中包含了几个以 get 开头的方法，这些方法可以用来得到文档中 DOM、得到当前文 档中的组件、得到 Ext 元素等，在使用中要注意区别使用。

1、get 方法

get 方法用来得到一个 Ext 元素，也就是类型为 Ext.Element 的对象，Ext.Element 类是 Ext 对 DOM 的封装，代表 DOM 的元素，可以为每一个 DOM 创建一个对应的 Element 对 象 ， 可以通过 Element 对象上的方法来实现对 DOM 指定的操作，比如用 hide 方法可以隐藏元素 、 initDD 方法可以让指定的 DOM 具有拖放特性等。

get 方法其实是 Ext.Element.get 的简写形 式。 get 方法中只有一个参数，这个参数是混合参数，可以是 DOM 节点的 id、也可以是一 个 Element、或者是一个 DOM 节点对象等。看下面的示例代码：

Ext.onReady(function(){
var e=new Ext.Element("hello");
alert(Ext.get("hello"));
alert(Ext.get(document.getElementById("hello")));
alert(Ext.get(e));
});
Html 页面中包含一个 id 为 hello 的 div，代码如下：
<div id="hello">tttt</div>

Ext.get("hello")、Ext.get(document.getElementById("hello"))、Ext.get(e)等三个方法都可以得到一个与 DOM 节点 hello 对应的 Ext 元素。

2、getCmp 方法－获得 Ext 组件。

getCmp 方法用来获得一个 Ext 组件，也就是一个已经在页面中初始化了的 Component 或其子类的对象，getCmp 方法其实是 Ext.ComponentMgr.get 方法的简写形式。getCmp 方法 中只有一个参数，也就是组件的 id。比如下面的代码：

Ext.onReady(function(){
var h=new Ext.Panel({
id:"h2",
title:" ",
renderTo:"hello",
width:300,
height:200});
Ext.getCmp("h2").setTitle("新的标题");
});

在代码中，我们使用 Ext.getCmp("h2").来得到 id 为 h2 的组件，并调用其 setTitle 方法来 设置该面板的标题。

3、getDom 方法－获得 DOM 节点

getDom方法能够得到文档中的DOM节点，该方法中包含一个参数，该参数可以是DOM 节点的 id、DOM 节点对象或 DOM 节点对应的 Ext 元素(Element)等。比如下面的代码：

Ext.onReady(function(){
var e=new Ext.Element("hello");
Ext.getDom("hello");
Ext.getDom(e);
Ext.getDom(e.dom);
});
Html：
<div id="hello">tttt</div>

在上面的代码中，Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句 返回都是同一个 DOM 节点对象。

4、getBody 方法－得到文档的 body 节点元素(Element)。

该方法直接得到文档中与 document.body 这个 DOM 节点对应的 ExtJS 元素（Element）， 实质就是把 document.body 对象封装成 ExtJS 元素对象返回，该方法不带任何参数。比如下 面的代码把面板 h 直接渲染到文档的 body 元素中。

Ext.onReady(function(){
var h=new Ext.Panel({title:"测试",width:300,height:200});
h.render(Ext.getBody());
});

5、getDoc 方法－获得与 document 对应的 Ext 元素(Element)

getDoc 方法实质上就是把当前 html 文档对象，也就是把 document 对象封装成 ExtJS 的 Element 对象返回，该方法不带任何参数。

8、如何学习及掌握 Ext

对于学习一门新技术来说，学习方法是非常关键的，在这里我来给大家分享一下"如何 学习及掌握 Ext"，其实也是我的一些学习及应用心得，希望对大家有所帮助。 首先，来谈一谈基本内功心法。我们知道学武功，内功非常重要，天龙八部里面神仙姐 姐精通各门各派的武功与招式，但自己却使不出来，最主要的原因就是缺少内功，对吧？

Ext 是一个应用层的 Ajax 框架，要用好他，内功的修练非常重要。如果内功修不好，你就能只 变成一个神仙姐姐，在工作中只能扮演一个辅助性的角色，程序员不写程序这是非常遗憾的 。 Ext 的内功心法有哪些呢？

其实也就是与 Ajax 相关的 W3C 技术，按重要程度排列，依次是 javascript 及面向对象、超文本协议 html、文档对象模型 DOM、样式 CSS、XML、JSON、 Ajax 等等。 接着，我来谈谈捷径，学习任何东西都得有捷劲，你看看小杨过的武功为什么提升得那 么快主？

这是有窍门的，其中一项就是借助小龙女提供的寒冰床。寒冰床的效果就是让你睡 觉也在练武，而且据说一天抵别人数月。在我看来，Ext 的入门捷径就是要看一些国内 Ext 先驱们推出的系统教学资料。

另外他里面对 API 的讲解比较细，这个 API 就是在 应用开发过程中在需要随时翻出来研究。当然，如果你内功深厚，那么我说的入门捷径对你 可能就没那么立杆见影了，英语好一点，直接看官方的示例及文档也能会。 很多人入门过后，还是觉得自己不会写 Ext 应用，特别是实际的应用。

不知道如何跟后 台以及传统的技术结合起来，这时就表示你需要进一步提高了。关于提高我推荐大家通过 "Wlr 单用户 Blog 系统及技术开发文档"来，这个应用是一个综合的 Ext 应用，包含了前 后台，包括了很多 Ext 常用控件的应用，组件的扩展等，最主要的还是有相应的后台。

这个 程序的源代码大家可以直接通过 vifir.com 或者其它下载站点下载，分别有 Java 的 、.Net、PHP 等几个版本。另外还有详细的开发文档，当然这个文档是要收费的，这个应该理解，毕竟别 人写这个文档也不容易。

最后是深入，也就是能达到对 Ext 掌握得游刃有余，能解决各种 Ext 疑难杂症，能在 Ext 的基础上扩展出更加适合自己的控件。这就需要深入分析 Ext 项目的源码，并编大量的使用 Ext，在运用中多编写各种自定义的控件来达到了。深入之路是需要一个过程的，需要时间 的，我当前也走在这个路上，欢迎大家一起来研究。