搜索
您的当前位置:首页正文

Extjs几个方法的讨论_extjs

2023-12-02 来源:优库美食网

相信大家在做Extjs开发的时候都使用过类似下面的代码:         代码如下: var form_pz = new Ext.form.FormPanel({ id: "form_pz", region: "center", labelAlign: "right", lazyRender: true, frame: true, items: [{ xtype: "combo", fieldLabel: "产品名称", id: "CPMC", allowBlank: false, store: new Ext.data.SimpleStore({//store的定义}), displayField: "CPMC_BBH", valueField: "ID", anchor: "100%", mode: "local", triggerAction: "all", readOnly: true, typeAhead: true,       }]       });       var data = [];//里面定义任意数据       Ext.getCmp("Store_id").load(data);     此时对这个下拉框以下操作的时候,即让它默认选中Store中第一行数据: 代码如下:      var record= Ext.getCmp("CPMC").getStore().getAt(0);      var value = record.get("ID");      Ext.getCmp("CPMC").setValue(value);     以上是主要程序,这样运行以后,下拉框是不会自动选中的, 然而把Store单独拿出来定义: 代码如下:     var Strore_CPMC = new Ext.data.SimpleStore({//定义});     Strore_CPMC.load(data);     var record= Ext.getCmp("CPMC").getStore().getAt(0);      var value = record.get("ID");     Ext.getCmp("CPMC").setValue(value);     下拉框就会自动选择store中的第一行数据,其实在其他的方法也存在类似的问题,不知道这是什么原因。望各位朋友指教。

小编还为您整理了以下内容,可能对您也有帮助:

高分悬赏EXTJS学习方法和经验

一、理解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节点
  二、熟悉ext组件体系
  Ext2.0对整个框架进行了重构,最为杰出的是推出了一个以Component类为基础的组件体系,在Component类基础上,使用面向对象的方法,设计了一系列的组件及控件。因此,要能游刃有余地使用Ext,熟悉Ext组件体系是最基本的。
  在《ExtJS实用开发指南》中,有如下面一幅组件图:
  通过组件结构图我们可以一目了然的看出整个Ext组件继承及组成体系,当使用一个组件的时间,了解他的继承体系,这样可以便于我们掌握组件的各种特性。
  三、掌握核心控件 
  控件其实也是组件,比如用于显示树信息的TreePanel、用于显示表格的GridPanel及EditorGridPanel,还有代表应用程序窗口的Ext.Window等都属于Ext控件。在使用Ext的时候,一定要掌握一些核心控件,特别是处于基类的控件。比如上面提到的几个控件,他们都是继承于面板Panel,所以我们要重点掌握面板这个核心控件的特性。比如面板由以下几个部分组成:一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。面板类中还内置了面板展开、关闭等功能,并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为,面板可以放入其它任何容器中,面板本身是一个容器,他里面又可以包含各种其它组件。只要掌握了Panel的应用,那么学习TreePanel、Window等就会变得简单得多。
  同样的道理,对于Ext的表单字段来说,不管是ComboBox,NumberField、还是DateField,他们其它都是 Ext.form.Field类的子类,在他上面定义了表单字段的各种基本操作及特性。在学习使用表单字段组件时,一定要重点研究Field这个类,掌握他的主要方法、事件等,就能有助于更好的学习使用其它的字段。
  四、学习及研究示例
  由于javascript语言非常灵活,不像静态强类型语言(比如Java)那样有固定的代码设计模式,而往往是不同的人就有不同的编程风格。在实际应用开发中,只有见多识广,才能在自己的在脑中建立一个开发库。
  学习别人的示例对于我们开发帮助会非常大,示例包括基本组件的应用、综合应用等多个方面。在此,简单推荐几个。
  1、Ext官方示例,在ext项目下载包的examples目录中,包括各个控件的基本应用演示,同时还有一些比较复杂的组合示例,有简有繁,非常适合初学者认真研究。
  2、Vifir推出的示例,Vifir推出的一些示例主要包括两类,一种是开源的示例应用,另外一种是针对VIP用户的实用示例。开源的示例主要是指 wlr单用户blog系统,这个一个集合了前后台技术的ext综合示例,而针对VIP用户的实用示例则是可以作为开发骨架或扩展组件的示例。
  3、其它示例,在ext社区中还有很多比较优秀的ext应用示例,有些只是一个应用演示,虽然没有提供源码下载,但我们可以直接下载引用的js文件来得到这些示例的ext应用代码,同样能取起到非常好的学习效果。
  五、多运用
  Ext看起来是非常简单的东西,稍有点编程知识的人,按照《ExtJS实用开发指南》中的入门指南,半小时就能学会使用Ext。然而,当准备使用Ext开发一个项目时,却不知道从何处入手,或者是在使用Ext的时候,出了一点小问题自己不知道该如何解决。编程是一门实践性的科学,仅仅靠看书、看别人写的代码是远远不够的,因此,必须多做实践才行,只有通过不断的练习,大量的使用,才能对Ext的组件特性、事件、事件处理机制以及与服务器端交互接口等深入的掌握,只有多做运用,深入了解ext的组件的工作原理及机制,才能编写出高级的Ext的应用。
  六、熟读Ext项目的源代码
  如果要想深入应用Ext,那么阅读Ext项目的源代码这是必不可少的环节,Ext的代码质量非常高,通过阅读他的代码我们可以更加深刻的了解 javascript面向对象编程,Ext代码中包含了很多高级的js技巧以及设计模式。在使用Ext的过程中,我们经常根据项目的需要对Ext组件进行扩展,设计自己的组件或控件,而如何实现一个自定义的Ext组件,我们可以从Ext的各个组件源代码中找到答案。
  Ext的源代码在Ext项目的source目录。读Ext源码,并不一定非要从某一个地方开始,而组件核心代码Component.js、容器组件代码 Container.js、面板Panel.js等这些是必看的; core目录中的Element.js、Ext.js等也是必看的。当需要从一个控件进行扩展的时候,最好能简单看一看这个控件的源代码。

高分悬赏EXTJS学习方法和经验

一、理解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节点
  二、熟悉ext组件体系
  Ext2.0对整个框架进行了重构,最为杰出的是推出了一个以Component类为基础的组件体系,在Component类基础上,使用面向对象的方法,设计了一系列的组件及控件。因此,要能游刃有余地使用Ext,熟悉Ext组件体系是最基本的。
  在《ExtJS实用开发指南》中,有如下面一幅组件图:
  通过组件结构图我们可以一目了然的看出整个Ext组件继承及组成体系,当使用一个组件的时间,了解他的继承体系,这样可以便于我们掌握组件的各种特性。
  三、掌握核心控件 
  控件其实也是组件,比如用于显示树信息的TreePanel、用于显示表格的GridPanel及EditorGridPanel,还有代表应用程序窗口的Ext.Window等都属于Ext控件。在使用Ext的时候,一定要掌握一些核心控件,特别是处于基类的控件。比如上面提到的几个控件,他们都是继承于面板Panel,所以我们要重点掌握面板这个核心控件的特性。比如面板由以下几个部分组成:一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。面板类中还内置了面板展开、关闭等功能,并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为,面板可以放入其它任何容器中,面板本身是一个容器,他里面又可以包含各种其它组件。只要掌握了Panel的应用,那么学习TreePanel、Window等就会变得简单得多。
  同样的道理,对于Ext的表单字段来说,不管是ComboBox,NumberField、还是DateField,他们其它都是 Ext.form.Field类的子类,在他上面定义了表单字段的各种基本操作及特性。在学习使用表单字段组件时,一定要重点研究Field这个类,掌握他的主要方法、事件等,就能有助于更好的学习使用其它的字段。
  四、学习及研究示例
  由于javascript语言非常灵活,不像静态强类型语言(比如Java)那样有固定的代码设计模式,而往往是不同的人就有不同的编程风格。在实际应用开发中,只有见多识广,才能在自己的在脑中建立一个开发库。
  学习别人的示例对于我们开发帮助会非常大,示例包括基本组件的应用、综合应用等多个方面。在此,简单推荐几个。
  1、Ext官方示例,在ext项目下载包的examples目录中,包括各个控件的基本应用演示,同时还有一些比较复杂的组合示例,有简有繁,非常适合初学者认真研究。
  2、Vifir推出的示例,Vifir推出的一些示例主要包括两类,一种是开源的示例应用,另外一种是针对VIP用户的实用示例。开源的示例主要是指 wlr单用户blog系统,这个一个集合了前后台技术的ext综合示例,而针对VIP用户的实用示例则是可以作为开发骨架或扩展组件的示例。
  3、其它示例,在ext社区中还有很多比较优秀的ext应用示例,有些只是一个应用演示,虽然没有提供源码下载,但我们可以直接下载引用的js文件来得到这些示例的ext应用代码,同样能取起到非常好的学习效果。
  五、多运用
  Ext看起来是非常简单的东西,稍有点编程知识的人,按照《ExtJS实用开发指南》中的入门指南,半小时就能学会使用Ext。然而,当准备使用Ext开发一个项目时,却不知道从何处入手,或者是在使用Ext的时候,出了一点小问题自己不知道该如何解决。编程是一门实践性的科学,仅仅靠看书、看别人写的代码是远远不够的,因此,必须多做实践才行,只有通过不断的练习,大量的使用,才能对Ext的组件特性、事件、事件处理机制以及与服务器端交互接口等深入的掌握,只有多做运用,深入了解ext的组件的工作原理及机制,才能编写出高级的Ext的应用。
  六、熟读Ext项目的源代码
  如果要想深入应用Ext,那么阅读Ext项目的源代码这是必不可少的环节,Ext的代码质量非常高,通过阅读他的代码我们可以更加深刻的了解 javascript面向对象编程,Ext代码中包含了很多高级的js技巧以及设计模式。在使用Ext的过程中,我们经常根据项目的需要对Ext组件进行扩展,设计自己的组件或控件,而如何实现一个自定义的Ext组件,我们可以从Ext的各个组件源代码中找到答案。
  Ext的源代码在Ext项目的source目录。读Ext源码,并不一定非要从某一个地方开始,而组件核心代码Component.js、容器组件代码 Container.js、面板Panel.js等这些是必看的; core目录中的Element.js、Ext.js等也是必看的。当需要从一个控件进行扩展的时候,最好能简单看一看这个控件的源代码。

关于extjs方法调用的问题

第一个的含义是是否全选中所在的文本内容(默认为false),第二个是设置一个延迟的时间,单位是毫秒(默认为0,不延迟)。下面是两种调用的方法:

var textField = new Ext.form.TextField({
// 属性就省略了 ....
});
// 默认的调用
textField.focus();
// 设置延迟的调用
textField.focus(false, 100);
// 等同于上面的方式
textField.focus.defer(100, textField);
如果做一个测试的话可以发现使用后面两种方式之后就会达到预期的效果了,这是因为所有的可视控件需要一个渲染的时间的,如果不设置focus的延迟时间,则再调用focus方法的时候该控件还没有渲染完成,当时是不会成功了。

参考资料:关于window的中field的focus问题

关于extjs方法调用的问题

第一个的含义是是否全选中所在的文本内容(默认为false),第二个是设置一个延迟的时间,单位是毫秒(默认为0,不延迟)。下面是两种调用的方法:

var textField = new Ext.form.TextField({
// 属性就省略了 ....
});
// 默认的调用
textField.focus();
// 设置延迟的调用
textField.focus(false, 100);
// 等同于上面的方式
textField.focus.defer(100, textField);
如果做一个测试的话可以发现使用后面两种方式之后就会达到预期的效果了,这是因为所有的可视控件需要一个渲染的时间的,如果不设置focus的延迟时间,则再调用focus方法的时候该控件还没有渲染完成,当时是不会成功了。

参考资料:关于window的中field的focus问题

ExtJs默认的字体大小改变的几种方法(自己整理)_extjs


以下列出网上收集的几种方法,希望对大家有用。
1、
只需把ext-all.css样式文件中的所有11px换成12px,这样就为统一的12px的字体了。
但是如果再想增大,那么这时候不光是把源文件的11px换成15px,而且需要把里面和font有关的12px换成15px。

改完之后按钮出现毛边,在样式文件中加
代码如下:
.ext-ie .x-btn-text-icon .x-btn-center .x-btn-text {
padding:3px 0px 0px 0px;
}

毛边就不见了!
2、
由于在不同浏览器中,或者不同版本的同款浏览器中显示的Extjs字体大小不一样。而且看起来比较小。不顺眼。

在网上查之,获得一条有用信息:Extjs 在很多情况下使用 11px 字体,11px 大小是一种边缘字体,不同的浏览器对 11px
的渲染各不相同,IE 的渲染和12px 相似,而在 Firefox 中,则和 10px相似,导致字体在FF
中过小的问题。
为了能够彻底的解决字体大小问题,直接打开ext-all.css,查找所有的11px并替换为12px。问题解决了
3、
Extjs版本3.2.1,字体大小修改
上网找了好多资料,都说是加上
代码如下:
.x-btn-text{
font-size:15px;
}

这样就好了,但是在IE9和FF下还是不好用。
后来到ext-all.css里慢慢试,才找到设置的地方。
把如下代码放到别的css里引用就行了:
代码如下:
.x-btn-text-icon .x-btn-icon-small-left .x-btn-text{
background-position: 0 center;/*默认*/
background-repeat: no-repeat;/*默认*/
padding-left:18px;/*默认*/
height:16px;/*默认*/
font-size:15px;/*字体大小设置*/
}

ExtJs默认的字体大小改变的几种方法(自己整理)_extjs


以下列出网上收集的几种方法,希望对大家有用。
1、
只需把ext-all.css样式文件中的所有11px换成12px,这样就为统一的12px的字体了。
但是如果再想增大,那么这时候不光是把源文件的11px换成15px,而且需要把里面和font有关的12px换成15px。

改完之后按钮出现毛边,在样式文件中加
代码如下:
.ext-ie .x-btn-text-icon .x-btn-center .x-btn-text {
padding:3px 0px 0px 0px;
}

毛边就不见了!
2、
由于在不同浏览器中,或者不同版本的同款浏览器中显示的Extjs字体大小不一样。而且看起来比较小。不顺眼。

在网上查之,获得一条有用信息:Extjs 在很多情况下使用 11px 字体,11px 大小是一种边缘字体,不同的浏览器对 11px
的渲染各不相同,IE 的渲染和12px 相似,而在 Firefox 中,则和 10px相似,导致字体在FF
中过小的问题。
为了能够彻底的解决字体大小问题,直接打开ext-all.css,查找所有的11px并替换为12px。问题解决了
3、
Extjs版本3.2.1,字体大小修改
上网找了好多资料,都说是加上
代码如下:
.x-btn-text{
font-size:15px;
}

这样就好了,但是在IE9和FF下还是不好用。
后来到ext-all.css里慢慢试,才找到设置的地方。
把如下代码放到别的css里引用就行了:
代码如下:
.x-btn-text-icon .x-btn-icon-small-left .x-btn-text{
background-position: 0 center;/*默认*/
background-repeat: no-repeat;/*默认*/
padding-left:18px;/*默认*/
height:16px;/*默认*/
font-size:15px;/*字体大小设置*/
}

关于extjs的问题。

1. 如果你要做一套整体的样式,ext 不适合你,因为EXT的优势就在这里。
2. EXT本身可以更换皮肤, 也可以自定义皮肤,只要修改resource 里ext-all.css 和对应的图片就可以了。
3. 你所谓的div 在html 里仅是一个div, 而EXT messageBox 至少套个四五层的div 才构造出来,所以你取到也没办法改

关于extjs的问题。

1. 如果你要做一套整体的样式,ext 不适合你,因为EXT的优势就在这里。
2. EXT本身可以更换皮肤, 也可以自定义皮肤,只要修改resource 里ext-all.css 和对应的图片就可以了。
3. 你所谓的div 在html 里仅是一个div, 而EXT messageBox 至少套个四五层的div 才构造出来,所以你取到也没办法改

如何学习Extjs

一个偶然的机会,我发现了ExtJS框架,第一次看到其创建出来的效果时,简直兴奋死我啦,呵呵,没想到还有这么漂亮的UI控制,但使用起来却感觉不太爽,其一大缺点就是所带的类库太庞大啦,会比较影响速度,而且帮助文档全部是英文,英文的也还好啦,更重要的是其文档并没有相关的例子,只是列出来使用参数,让人很难掌握,只好去他们的官方论坛到处问人,郁闷!

不过还好,外国人一般都比较热情,基本上问的问题都有人会给我答复,呵呵

在帮朋友做的一个网站里,我就开始了大量使用了EXTJS框架,虽然其类库文件是很大,不过感觉能做出这种效果的话,这点牺牲还是值得的

为了不让自己很快又忘记,所以还是决定在这里写下一点东西,以后也比较方便查找,如果其中有写错的地方,请大家及时指正哦,谢啦!

先说说EXTJS的自定义函数吧,以下语句可创建一个函数:

Ext.Login=function(){
function IsLogin(){

}
return{
init:function(){
IsLogin();
},
Login:function(){
 
}
}

刚开始时让我比较郁闷的是这种JS里的函数调用机制,以上代码里,将创建一个名为Ext.Login()的对象,应该相当于一个类的意思吧,然后可在其里面写其他相关的方法

在return里的为公有方法,这里面的方法可给外部程序调用(如在HTML文件里用),而在return以外的代码是其私有方法,只能在Ext.Login()这个对象里调用

如需要在其他页面调用里面的Login()方法,可直接写

<input id="login" onclick="Ext.Login().Login()" />

如果需要在页面加载时就调用,一般只需直接用EXTJS里的方法即可实现:

Ext.onReady(Ext.Login.init, Ext.Login);

这里的函数名并不需要加括号,第一个参数是要调用的方法,第二个是作用域,一般写此对象名即可

OK,关于基本的函数使用调用要注意的差不多就这些吧,之后再写写对AJAX的运用。

如何学习Extjs

一个偶然的机会,我发现了ExtJS框架,第一次看到其创建出来的效果时,简直兴奋死我啦,呵呵,没想到还有这么漂亮的UI控制,但使用起来却感觉不太爽,其一大缺点就是所带的类库太庞大啦,会比较影响速度,而且帮助文档全部是英文,英文的也还好啦,更重要的是其文档并没有相关的例子,只是列出来使用参数,让人很难掌握,只好去他们的官方论坛到处问人,郁闷!

不过还好,外国人一般都比较热情,基本上问的问题都有人会给我答复,呵呵

在帮朋友做的一个网站里,我就开始了大量使用了EXTJS框架,虽然其类库文件是很大,不过感觉能做出这种效果的话,这点牺牲还是值得的

为了不让自己很快又忘记,所以还是决定在这里写下一点东西,以后也比较方便查找,如果其中有写错的地方,请大家及时指正哦,谢啦!

先说说EXTJS的自定义函数吧,以下语句可创建一个函数:

Ext.Login=function(){
function IsLogin(){

}
return{
init:function(){
IsLogin();
},
Login:function(){
 
}
}

刚开始时让我比较郁闷的是这种JS里的函数调用机制,以上代码里,将创建一个名为Ext.Login()的对象,应该相当于一个类的意思吧,然后可在其里面写其他相关的方法

在return里的为公有方法,这里面的方法可给外部程序调用(如在HTML文件里用),而在return以外的代码是其私有方法,只能在Ext.Login()这个对象里调用

如需要在其他页面调用里面的Login()方法,可直接写

<input id="login" onclick="Ext.Login().Login()" />

如果需要在页面加载时就调用,一般只需直接用EXTJS里的方法即可实现:

Ext.onReady(Ext.Login.init, Ext.Login);

这里的函数名并不需要加括号,第一个参数是要调用的方法,第二个是作用域,一般写此对象名即可

OK,关于基本的函数使用调用要注意的差不多就这些吧,之后再写写对AJAX的运用。

extjs函数调用方法

当前this所引用的作用域已经改变了,可简单修改为
init: function() {
var me = this;//保存作用域
this.control({
'userlist textfield[id=searchId]':{
keyup:function(textfield, e){

if (e.getKey() == 13) {
me .searchUserByEnter(textfield); //调用原作用域方法
}
}
}
}
规范点可参照extjs写成scope参数控制this追问不是this作用域的问题,我用“探梦今生 ”的方法在fire bug里调试了一下,this指向的是整个类,我认为应该是这里需要一个东西来调用this.searchUserByEnter。

extjs函数调用方法

当前this所引用的作用域已经改变了,可简单修改为
init: function() {
var me = this;//保存作用域
this.control({
'userlist textfield[id=searchId]':{
keyup:function(textfield, e){

if (e.getKey() == 13) {
me .searchUserByEnter(textfield); //调用原作用域方法
}
}
}
}
规范点可参照extjs写成scope参数控制this追问不是this作用域的问题,我用“探梦今生 ”的方法在fire bug里调试了一下,this指向的是整个类,我认为应该是这里需要一个东西来调用this.searchUserByEnter。

关于extjs的

可以绑定grid的data store到form上,然后监听grid的选择事件,当选择一行,将数据赋到form中。

从绑定数据到监听选择事件,都可以在Form定义时实现,主要的代码如下:
var alertForm = new Ext.FormPanel({
id: 'company-form',
frame: true,
labelAlign: 'left',
title: 'Company data',
bodyStyle:'padding:5px',
width: 750,
layout: 'column',
renderTo: alertWin, // 指定Form的显示的位置
items: [{
columnWidth: 0.60,
layout: 'fit',
items: {
xtype: 'grid',
ds: ds, // 绑定Data Store
cm: colModel, // grid的ColumnModel
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: { // 监听选择事件
rowselect: function(sm, row, rec) {
Ext.getCmp("company-form").getForm().loadRecord(rec);
}
}
}),
autoExpandColumn: 'company',
height: 350,
title:'Company Data',
border: true,
listeners: {
render: function(g) {
g.getSelectionModel().selectRow(0);
},
delay: 10 // Allow rows to be rendered.
}
}
},{
columnWidth: 0.4,
xtype: 'fieldset',
...
...
具体的可以参考ext-3.0.0\examples\form\form-grid.js

关于extjs的

可以绑定grid的data store到form上,然后监听grid的选择事件,当选择一行,将数据赋到form中。

从绑定数据到监听选择事件,都可以在Form定义时实现,主要的代码如下:
var alertForm = new Ext.FormPanel({
id: 'company-form',
frame: true,
labelAlign: 'left',
title: 'Company data',
bodyStyle:'padding:5px',
width: 750,
layout: 'column',
renderTo: alertWin, // 指定Form的显示的位置
items: [{
columnWidth: 0.60,
layout: 'fit',
items: {
xtype: 'grid',
ds: ds, // 绑定Data Store
cm: colModel, // grid的ColumnModel
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: { // 监听选择事件
rowselect: function(sm, row, rec) {
Ext.getCmp("company-form").getForm().loadRecord(rec);
}
}
}),
autoExpandColumn: 'company',
height: 350,
title:'Company Data',
border: true,
listeners: {
render: function(g) {
g.getSelectionModel().selectRow(0);
},
delay: 10 // Allow rows to be rendered.
}
}
},{
columnWidth: 0.4,
xtype: 'fieldset',
...
...
具体的可以参考ext-3.0.0\examples\form\form-grid.js

ExtJS 2.0实用简明教程之应用ExtJS

样式文件为resources/css/ext-all.css,extjs的js库文件主要包含两个,adapter/ext/ext-base.js及ext-all.js,其中ext-base.js表示框架基础库,ext-all.js是extjs的核心库。adapter表示适配器,也就是说可以有多种适配器,因此,可以把adapter/ext/ext-base.js换成adapter/jquery/ext-jquery-adapter.js,或adapter/prototype/ext-prototype-adapter.js等。
因此,要使用ExtJS框架的页面中一般包括下面几句:
复制代码
代码如下:
<link
rel="stylesheet"
type="text/css"
href="extjs/resources/css/ext-all.css"
/>
<script
type="text/javascript"
src="extjs/adapter/ext/ext-base.js"></script>
<script
type="text/javascript"
src="extjs/ext-all.js"></script>
在ExtJS库文件及页面内容加载完后,ExtJS会执行Ext.onReady中指定的函数,因此可以用,一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的,使用ExtJS应用程序的代码大致如下:
复制代码
代码如下:
<script>
function
fn()
{
alert(‘ExtJS库已加');
}
Ext.onReady(fn);
</script>
fn也可以写成一个匿名函数的形式,因此上面的代码可以改成下面的形式:
复制代码
代码如下:
<script>
function
fn()
{
alert(‘ExtJS库已加载!');
}
Ext.onReady(function
()
{
alert(‘ExtJS库已加载!');
}
);</script>

ExtJS 2.0实用简明教程之应用ExtJS

样式文件为resources/css/ext-all.css,extjs的js库文件主要包含两个,adapter/ext/ext-base.js及ext-all.js,其中ext-base.js表示框架基础库,ext-all.js是extjs的核心库。adapter表示适配器,也就是说可以有多种适配器,因此,可以把adapter/ext/ext-base.js换成adapter/jquery/ext-jquery-adapter.js,或adapter/prototype/ext-prototype-adapter.js等。
因此,要使用ExtJS框架的页面中一般包括下面几句:
复制代码
代码如下:
<link
rel="stylesheet"
type="text/css"
href="extjs/resources/css/ext-all.css"
/>
<script
type="text/javascript"
src="extjs/adapter/ext/ext-base.js"></script>
<script
type="text/javascript"
src="extjs/ext-all.js"></script>
在ExtJS库文件及页面内容加载完后,ExtJS会执行Ext.onReady中指定的函数,因此可以用,一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的,使用ExtJS应用程序的代码大致如下:
复制代码
代码如下:
<script>
function
fn()
{
alert(‘ExtJS库已加');
}
Ext.onReady(fn);
</script>
fn也可以写成一个匿名函数的形式,因此上面的代码可以改成下面的形式:
复制代码
代码如下:
<script>
function
fn()
{
alert(‘ExtJS库已加载!');
}
Ext.onReady(function
()
{
alert(‘ExtJS库已加载!');
}
);</script>

extjs的作用

ExtJS时一套AJAX控件,本人认为它是目前我见过最好最美的JS控件库,所以非常有学习和使用价值,如果你还没有接触过ExtJS或者压根对其不感兴趣,那么没有必要看下去了

ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本。如果您的项目对网页响应时间有严格的限制,或者客户端操作系统过于陈旧,一定不要选择ExtJS。
本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法。目前最新版本为3.0,但是本文主要介绍2.2版本。
一、ExtJS下载以及配置
1、下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下载)
2、配置过程,假设下载后的目录为Ext,我们在该目录下建立我们自己的目录MyExample(该目录用于存放你自己写的代码),配置过程如下:
(1) 新建一个页面文件Helloworld.html
(2) 在<head>和</head>之间添加如下代码:


<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.alert('HelloWorld','Hello World');
})
</script>


(3) 这里注意<script></script>不能用</script>取代
(4) js的导入顺序不要更改
(3) 如果弹出一个HelloWorld的对话框,则代表配置成功。
二、表格控件Grid的使用
EXT中的表格功能非常强大,包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等使用功能。我们首先介绍如何制作一个简单的Grid。
1、创建表格的列信息:

代码如下:


var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'desn'}
]);


2、添加数据信息:

代码如下:


var data=[
['1','name1','desn1'],
['2','name1','desn1'],
['3','name1','desn1'],
['4','name1','desn1'],
['5','name1','desn1']
];


3、创建数据存储对象:

代码如下:


var ds=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'}
])
});
ds.load();//这个相当的重要

.
4、表格的列模型定义好了,原始数据和数据的转换也已经完成,剩下的只需要把它们装配在一起,我们的Grid就创建成功了。

代码如下:


var grid=new Ext.grid.GridPanel({
renderTo:"grid",
store: ds,
height:600,
cm:cm
});


5、注意:Ext.grid.Grid的renderTo属性指示EXT将表格渲染到什么地方,所以,在HTML里应该有一个<p id='grid'></p>与之对应。
6、所有代码清单如下(已通过测试):

代码如下:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Grid.aspx.cs" Inherits="Ext_example_Grid" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Grid </title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'desn'}
]);
var data=[
['1','name1','desn1'],
['2','name1','desn1'],
['3','name1','desn1'],
['4','name1','desn1'],
['5','name1','desn1']
];
var ds=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'}
])
});
ds.load();
var grid=new Ext.grid.GridPanel({
renderTo:"grid",
store: ds,
height:600,
cm:cm
});
});
// --></script>
</head>
<body>
<form id="form1" runat="server">
<p id="grid">
</p>
</form>
</body>
</html>


实验效果图如图1所示
1
图1 一个简单的Grid
三、表格控件Grid的功能详解
第二部分简单介绍了如何创建简单的Grid,本章将对Grid的功能进行详细的分析。
3.1 部分属性功能
1、默认情况下,Grid是可以拖放列,也可以改变列的宽度,如果要禁用这两个功能,在定义Grid对象时分别设置enableColumnMove和enableColumnResize为false即可。
2、如果希望显示斑马线效果,可以加上stripeRows:true
3、Grid还支持一种读取数据时的遮罩和提示功能,设置属性loadMask:true,在store.load()完成之前一直会显示"Loading…"
3.2 自主决定每列的宽度
1、如果要定义宽度,只要设置该列的width属性即可,如下面的代码所示。效果图如图2所示。

代码如下:


var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:60},
{header:'名称',dataIndex:'name',width:180},
{header:'描述',dataIndex:'desn',width:200}
]);


2
图2 自定义每列的宽度
2、这样需要自己去计算每列的宽度,如果想让每列自动填满Grid,只需要viewConfig中的forceFit即可。使用forceFit后,Grid会根据你在cm里设置的width按比例分配,非常智能。实现代码如下:

代码如下:


var grid=new Ext.grid.GridPanel({
renderTo:"grid",
stripeRows:true,//斑马线效果
loadMask:true,
store: ds,
height:600,
cm:cm,
viewConfig:{
forceFit:true
}
});


3、我们也可以考虑autoExpandColumn,它可以让指定列的宽度自动伸展,从而填充整个表格。代码如下

代码如下:


var grid=new Ext.grid.GridPanel({
renderTo:"grid",
stripeRows:true,//斑马线效果
loadMask:true,
store: ds,
height:600,
cm:cm,
autoExpandColumn:'desn'
// viewConfig:{
// forceFit:true
// }
});


注意:autoExpandColum只能指定一列的id,注意,必须是id,原来我们设置的cm里面都没有id,现在为了使用autoExpandColumn,要给cm的desn设置id.于是在渲染时desn就可以自动延伸,否则会出错。

代码如下:


var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:60},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200}
]);


3.3 让Grid支持按列排序
在EXT中可以很方便地实现排序功能,只需要在定义列模型时增加sortable属性,如下面代码所示:

代码如下:


var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:60,sortable:true},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200}
]);


效果图如图3所示
3
图3 按列排序效果
3.4 显示时间类型数据
尽管返回的JSON里都是数字和字符串,但是在EXT中我们同样可以从后台取得日期类型的数据,然后交给Grid进行格式化。
1、首先定义一组数据,其中最后一列是日期格式的数据。

代码如下:


var data=[
['1','name1','desn1','2009-09-17T02:58:04'],
['2','name2','desn1','2009-09-17T02:58:04'],
['3','name3','desn1','2009-09-17T02:58:04'],
['4','name4','desn1','2009-09-17T02:58:04'],
['5','name5','desn1','2009-09-17T02:58:04']
];


2、接着我们在reader里面增加一行配置,除了设置name以外,还设置了type和dateFormat两个属性。代码如下:

代码如下:


var store1= new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'},
{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}
])
});


3、同样的,我们还需要在cm里面增加一行配置:

代码如下:


var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:60,sortable:true},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);


4、代码详细信息如下所示,效果图如图4所示。

代码如下:


<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Grid </title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:60,sortable:true},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);
var data=[
['1','name1','desn1','2009-09-17T02:58:04'],
['2','name2','desn1','2009-09-17T02:58:04'],
['3','name3','desn1','2009-09-17T02:58:04'],
['4','name4','desn1','2009-09-17T02:58:04'],
['5','name5','desn1','2009-09-17T02:58:04']
];
var store1= new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'},
{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}
])
});
store1.load();
var grid1=new Ext.grid.GridPanel({
renderTo:"grid1",
stripeRows:true,//斑马线效果
loadMask:true,
store: store1,
height:200,
cm:cm,
viewConfig:{
forceFit:true
}
});
});
// --></script>
</head>
<body>
<form id="form1" runat="server">
<p id="grid1">
</p>
</form>
</body>
</html>


4
图4 具有时间数据的Grid
3.5 自动显示行号和复选框
实际上,行号和复选框都是renderer的延伸。当然,复选框的功能要复杂得多。
1、自动显示行号:修改列模型cm,加入RowNumberer对象;
2、复选框:我们创建一个CheckboxSelectionModel()
3、详细代码如下,效果图如图5所示

代码如下:


var sm=new Ext.grid.CheckboxSelectionModel();
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',width:40,sortable:true},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);


5
图5 自动行号以及复选框效果图

3.6 表格分页
Grid控件对性能要求较高,如果在一个Grid里面显示上千条记录,效率会有明显下降,所以必须考虑分页问题。
1、为Grid添加分页工具条:在前面代码的基础上修改grid代码:

代码如下:


var grid1=new Ext.grid.GridPanel({
renderTo:"grid1",
stripeRows:true,//斑马线效果
loadMask:true,
store: store1,
height:200,
cm:cm,
viewConfig:{
forceFit:true
},
bbar:new Ext.PagingToolbar({
pageSize:10,
store: store1,
displayInfo:true,
displayMsg:'显示第{0}条到{1}条记录,一共{2}条',
emptyMsg:"没有记录"
})
});


2、效果图如图6所示:
6
图6 添加分页工具条
3、如果要真正实现分页,还需要通过后台脚本获得分页数据,这部分在此不再给出
四、可编辑表格控件——EditorGrid
EditorGrid可以直接在表格里面执行添加、删除、修改、查找等功能,然后一次性保持。还有可以动态修改某个单元格,这些单元格我们先暂时不能为空,保存时会进行检测,为空就无法保存,验证信息会给予提示。
4.1 制作一个简单的EditorGrid
1、定义列,代码如下:

代码如下:


var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:40,editor:new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank:false
})
)},
{header:'名称',dataIndex:'name',width:180,editor:new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank:false
})
)},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);


2、定义grid,注意此时是EditorGridPanel.

代码如下:


var grid1=new Ext.grid.EditorGridPanel({
renderTo:"grid1",
store: store1,
height:200,
clicksToEdit:1,
cm:cm
});


3、默认情况下,需要双击单元格才能激活编辑器,从而进行修改,不过,也可以给Grid配置clickToEdit:1,这样就可以单击单元格激活编辑器,从而进行修改,如图7所示:
7
图7 通过单击修改单元格
五、属性表格——PropertyGrid
属性表格扩展自EditorGridPanel,所以可以直接编辑右边的内容,注意:只有右边的,即使你单击左边的单元格,编辑器也会出现在右边。
定义的方法如下:

代码如下:


<script type="text/javascript"><!--
Ext.onReady(function(){
var grid=new Ext.grid.PropertyGrid({
title:"属性表格",
autoHeight:true,
width:400,
renderTo:'grid1',
source:{
"名字":"薛敬明",
"创建时间":new Date(Date.parse('12/15/2009')),
"是否有效":false,
"版本号":.01,
"描述":"估计没有啥说的"
}
});
});
// --></script>


效果图如图8所示:
8
六、分组表格——Group
分组表格就是在普通表格的基础上,根据某一列的数据将表格中的数据分组显示的表格控件。
1、首先定义一组数据

代码如下:


var data=[
['1','male','name1','desn1'],
['2','male','name2','desn1'],
['3','female','name3','desn1'],
['4','male','name4','desn1'],
['5','female','name5','desn1'],
['6','male','name6','desn1'],
['7','male','name7','desn1']
];


2、创建表格的列信息

代码如下:


var sm=new Ext.grid.CheckboxSelectionModel();
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',width:40,sortable:true},
{header:'性别',dataIndex:'sex',width:180},
{header:'名称',dataIndex:'name',width:200},
{header:'描述',dataIndex:'desn',width:200}
]);


3、创建数据存储对象

代码如下:


var store1= new Ext.data.GroupingStore({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'sex'},
{name:'name'},
{name:'desn'}
]),
groupField:'sex',
sortInfo:{field:'id',direction:"ASC"}
});
store1.load();


4、设计分组设计表格

代码如下:


var grid1=new Ext.grid.GridPanel({
store: store1,
height:300,
cm:cm,
view:new Ext.grid.GroupingView(),
renderTo:"grid1"
});


5、代码清单如下,效果图如图9所示。

代码如下:


<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>分组表格控件</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var sm=new Ext.grid.CheckboxSelectionModel();
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',width:40,sortable:true},
{header:'性别',dataIndex:'sex',width:180},
{header:'名称',dataIndex:'name',width:200},
{header:'描述',dataIndex:'desn',width:200}
]);

var data=[
['1','male','name1','desn1'],
['2','male','name2','desn1'],
['3','female','name3','desn1'],
['4','male','name4','desn1'],
['5','female','name5','desn1'],
['6','male','name6','desn1'],
['7','male','name7','desn1']
];

var store1= new Ext.data.GroupingStore({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'sex'},
{name:'name'},
{name:'desn'}
]),
groupField:'sex',
sortInfo:{field:'id',direction:"ASC"}
});
store1.load();
var grid1=new Ext.grid.GridPanel({
store: store1,
height:300,
cm:cm,
view:new Ext.grid.GroupingView(),
renderTo:"grid1"
});
});

// --></script>
</head>
<body>
<form id="form1" runat="server">
<p id="grid1">

</p>
</form>
</body>
</html>

9

图9 分组表格

六、可拖放的表格

首先我们看图10的效果图:

10

图10 可拖放的表格

注意图10四周的蓝色细条,把鼠标放到上面,就可以用拖放改变表格的高度和宽度,实现这一效果并不难,也不需要对写好的Grid做大的修改,只要在原先的基础上添加如下代码:

代码如下:


var rz=new Ext.Resizable('grid1',{
wrap:true,
minHeight:100,
pinned:true,
handles:'all'
});
rz.on('resize',grid1.syncSize,grid1);


注意:
(1) Resizable必须放在render之后,否则就会出现问题;
(2) handles:'all'代表可以向所有放心拖动表格
七、Grid与右键菜单
Grid提供了四个与右键菜单相关的事件:
(1) contextmenu:全局性的右键事件;
(2)cellcontextmenu:单元格上的右键事件
(3)rowcontextmenu:行上的右键事件
(4)headercontextmenu:表头的右键事件
以下代码我们实现一个行上的右键事件,代码清单如下,效果图如11所示

代码如下:


var contextmenu=new Ext.menu.Menu({
id:'theContextMenu',
items:[{
text:'查看详情',
handler:function(){
}
}]
});
grid1.on("rowcontextmenu",function(grid,rowIndex,e){
e.preventDefault();
grid1.getSelectionModel().selectRow(rowIndex);
contextmenu.showAt(e.getXY());
});

11

图11 右键菜单

extjs的作用

ExtJS时一套AJAX控件,本人认为它是目前我见过最好最美的JS控件库,所以非常有学习和使用价值,如果你还没有接触过ExtJS或者压根对其不感兴趣,那么没有必要看下去了

ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本。如果您的项目对网页响应时间有严格的限制,或者客户端操作系统过于陈旧,一定不要选择ExtJS。
本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法。目前最新版本为3.0,但是本文主要介绍2.2版本。
一、ExtJS下载以及配置
1、下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下载)
2、配置过程,假设下载后的目录为Ext,我们在该目录下建立我们自己的目录MyExample(该目录用于存放你自己写的代码),配置过程如下:
(1) 新建一个页面文件Helloworld.html
(2) 在<head>和</head>之间添加如下代码:


<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.alert('HelloWorld','Hello World');
})
</script>


(3) 这里注意<script></script>不能用</script>取代
(4) js的导入顺序不要更改
(3) 如果弹出一个HelloWorld的对话框,则代表配置成功。
二、表格控件Grid的使用
EXT中的表格功能非常强大,包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等使用功能。我们首先介绍如何制作一个简单的Grid。
1、创建表格的列信息:

代码如下:


var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'desn'}
]);


2、添加数据信息:

代码如下:


var data=[
['1','name1','desn1'],
['2','name1','desn1'],
['3','name1','desn1'],
['4','name1','desn1'],
['5','name1','desn1']
];


3、创建数据存储对象:

代码如下:


var ds=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'}
])
});
ds.load();//这个相当的重要

.
4、表格的列模型定义好了,原始数据和数据的转换也已经完成,剩下的只需要把它们装配在一起,我们的Grid就创建成功了。

代码如下:


var grid=new Ext.grid.GridPanel({
renderTo:"grid",
store: ds,
height:600,
cm:cm
});


5、注意:Ext.grid.Grid的renderTo属性指示EXT将表格渲染到什么地方,所以,在HTML里应该有一个<p id='grid'></p>与之对应。
6、所有代码清单如下(已通过测试):

代码如下:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Grid.aspx.cs" Inherits="Ext_example_Grid" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Grid </title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'desn'}
]);
var data=[
['1','name1','desn1'],
['2','name1','desn1'],
['3','name1','desn1'],
['4','name1','desn1'],
['5','name1','desn1']
];
var ds=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'}
])
});
ds.load();
var grid=new Ext.grid.GridPanel({
renderTo:"grid",
store: ds,
height:600,
cm:cm
});
});
// --></script>
</head>
<body>
<form id="form1" runat="server">
<p id="grid">
</p>
</form>
</body>
</html>


实验效果图如图1所示
1
图1 一个简单的Grid
三、表格控件Grid的功能详解
第二部分简单介绍了如何创建简单的Grid,本章将对Grid的功能进行详细的分析。
3.1 部分属性功能
1、默认情况下,Grid是可以拖放列,也可以改变列的宽度,如果要禁用这两个功能,在定义Grid对象时分别设置enableColumnMove和enableColumnResize为false即可。
2、如果希望显示斑马线效果,可以加上stripeRows:true
3、Grid还支持一种读取数据时的遮罩和提示功能,设置属性loadMask:true,在store.load()完成之前一直会显示"Loading…"
3.2 自主决定每列的宽度
1、如果要定义宽度,只要设置该列的width属性即可,如下面的代码所示。效果图如图2所示。

代码如下:


var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:60},
{header:'名称',dataIndex:'name',width:180},
{header:'描述',dataIndex:'desn',width:200}
]);


2
图2 自定义每列的宽度
2、这样需要自己去计算每列的宽度,如果想让每列自动填满Grid,只需要viewConfig中的forceFit即可。使用forceFit后,Grid会根据你在cm里设置的width按比例分配,非常智能。实现代码如下:

代码如下:


var grid=new Ext.grid.GridPanel({
renderTo:"grid",
stripeRows:true,//斑马线效果
loadMask:true,
store: ds,
height:600,
cm:cm,
viewConfig:{
forceFit:true
}
});


3、我们也可以考虑autoExpandColumn,它可以让指定列的宽度自动伸展,从而填充整个表格。代码如下

代码如下:


var grid=new Ext.grid.GridPanel({
renderTo:"grid",
stripeRows:true,//斑马线效果
loadMask:true,
store: ds,
height:600,
cm:cm,
autoExpandColumn:'desn'
// viewConfig:{
// forceFit:true
// }
});


注意:autoExpandColum只能指定一列的id,注意,必须是id,原来我们设置的cm里面都没有id,现在为了使用autoExpandColumn,要给cm的desn设置id.于是在渲染时desn就可以自动延伸,否则会出错。

代码如下:


var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:60},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200}
]);


3.3 让Grid支持按列排序
在EXT中可以很方便地实现排序功能,只需要在定义列模型时增加sortable属性,如下面代码所示:

代码如下:


var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:60,sortable:true},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200}
]);


效果图如图3所示
3
图3 按列排序效果
3.4 显示时间类型数据
尽管返回的JSON里都是数字和字符串,但是在EXT中我们同样可以从后台取得日期类型的数据,然后交给Grid进行格式化。
1、首先定义一组数据,其中最后一列是日期格式的数据。

代码如下:


var data=[
['1','name1','desn1','2009-09-17T02:58:04'],
['2','name2','desn1','2009-09-17T02:58:04'],
['3','name3','desn1','2009-09-17T02:58:04'],
['4','name4','desn1','2009-09-17T02:58:04'],
['5','name5','desn1','2009-09-17T02:58:04']
];


2、接着我们在reader里面增加一行配置,除了设置name以外,还设置了type和dateFormat两个属性。代码如下:

代码如下:


var store1= new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'},
{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}
])
});


3、同样的,我们还需要在cm里面增加一行配置:

代码如下:


var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:60,sortable:true},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);


4、代码详细信息如下所示,效果图如图4所示。

代码如下:


<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Grid </title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:60,sortable:true},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);
var data=[
['1','name1','desn1','2009-09-17T02:58:04'],
['2','name2','desn1','2009-09-17T02:58:04'],
['3','name3','desn1','2009-09-17T02:58:04'],
['4','name4','desn1','2009-09-17T02:58:04'],
['5','name5','desn1','2009-09-17T02:58:04']
];
var store1= new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'},
{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}
])
});
store1.load();
var grid1=new Ext.grid.GridPanel({
renderTo:"grid1",
stripeRows:true,//斑马线效果
loadMask:true,
store: store1,
height:200,
cm:cm,
viewConfig:{
forceFit:true
}
});
});
// --></script>
</head>
<body>
<form id="form1" runat="server">
<p id="grid1">
</p>
</form>
</body>
</html>


4
图4 具有时间数据的Grid
3.5 自动显示行号和复选框
实际上,行号和复选框都是renderer的延伸。当然,复选框的功能要复杂得多。
1、自动显示行号:修改列模型cm,加入RowNumberer对象;
2、复选框:我们创建一个CheckboxSelectionModel()
3、详细代码如下,效果图如图5所示

代码如下:


var sm=new Ext.grid.CheckboxSelectionModel();
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',width:40,sortable:true},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);


5
图5 自动行号以及复选框效果图

3.6 表格分页
Grid控件对性能要求较高,如果在一个Grid里面显示上千条记录,效率会有明显下降,所以必须考虑分页问题。
1、为Grid添加分页工具条:在前面代码的基础上修改grid代码:

代码如下:


var grid1=new Ext.grid.GridPanel({
renderTo:"grid1",
stripeRows:true,//斑马线效果
loadMask:true,
store: store1,
height:200,
cm:cm,
viewConfig:{
forceFit:true
},
bbar:new Ext.PagingToolbar({
pageSize:10,
store: store1,
displayInfo:true,
displayMsg:'显示第{0}条到{1}条记录,一共{2}条',
emptyMsg:"没有记录"
})
});


2、效果图如图6所示:
6
图6 添加分页工具条
3、如果要真正实现分页,还需要通过后台脚本获得分页数据,这部分在此不再给出
四、可编辑表格控件——EditorGrid
EditorGrid可以直接在表格里面执行添加、删除、修改、查找等功能,然后一次性保持。还有可以动态修改某个单元格,这些单元格我们先暂时不能为空,保存时会进行检测,为空就无法保存,验证信息会给予提示。
4.1 制作一个简单的EditorGrid
1、定义列,代码如下:

代码如下:


var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:40,editor:new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank:false
})
)},
{header:'名称',dataIndex:'name',width:180,editor:new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank:false
})
)},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);


2、定义grid,注意此时是EditorGridPanel.

代码如下:


var grid1=new Ext.grid.EditorGridPanel({
renderTo:"grid1",
store: store1,
height:200,
clicksToEdit:1,
cm:cm
});


3、默认情况下,需要双击单元格才能激活编辑器,从而进行修改,不过,也可以给Grid配置clickToEdit:1,这样就可以单击单元格激活编辑器,从而进行修改,如图7所示:
7
图7 通过单击修改单元格
五、属性表格——PropertyGrid
属性表格扩展自EditorGridPanel,所以可以直接编辑右边的内容,注意:只有右边的,即使你单击左边的单元格,编辑器也会出现在右边。
定义的方法如下:

代码如下:


<script type="text/javascript"><!--
Ext.onReady(function(){
var grid=new Ext.grid.PropertyGrid({
title:"属性表格",
autoHeight:true,
width:400,
renderTo:'grid1',
source:{
"名字":"薛敬明",
"创建时间":new Date(Date.parse('12/15/2009')),
"是否有效":false,
"版本号":.01,
"描述":"估计没有啥说的"
}
});
});
// --></script>


效果图如图8所示:
8
六、分组表格——Group
分组表格就是在普通表格的基础上,根据某一列的数据将表格中的数据分组显示的表格控件。
1、首先定义一组数据

代码如下:


var data=[
['1','male','name1','desn1'],
['2','male','name2','desn1'],
['3','female','name3','desn1'],
['4','male','name4','desn1'],
['5','female','name5','desn1'],
['6','male','name6','desn1'],
['7','male','name7','desn1']
];


2、创建表格的列信息

代码如下:


var sm=new Ext.grid.CheckboxSelectionModel();
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',width:40,sortable:true},
{header:'性别',dataIndex:'sex',width:180},
{header:'名称',dataIndex:'name',width:200},
{header:'描述',dataIndex:'desn',width:200}
]);


3、创建数据存储对象

代码如下:


var store1= new Ext.data.GroupingStore({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'sex'},
{name:'name'},
{name:'desn'}
]),
groupField:'sex',
sortInfo:{field:'id',direction:"ASC"}
});
store1.load();


4、设计分组设计表格

代码如下:


var grid1=new Ext.grid.GridPanel({
store: store1,
height:300,
cm:cm,
view:new Ext.grid.GroupingView(),
renderTo:"grid1"
});


5、代码清单如下,效果图如图9所示。

代码如下:


<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>分组表格控件</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var sm=new Ext.grid.CheckboxSelectionModel();
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',width:40,sortable:true},
{header:'性别',dataIndex:'sex',width:180},
{header:'名称',dataIndex:'name',width:200},
{header:'描述',dataIndex:'desn',width:200}
]);

var data=[
['1','male','name1','desn1'],
['2','male','name2','desn1'],
['3','female','name3','desn1'],
['4','male','name4','desn1'],
['5','female','name5','desn1'],
['6','male','name6','desn1'],
['7','male','name7','desn1']
];

var store1= new Ext.data.GroupingStore({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'sex'},
{name:'name'},
{name:'desn'}
]),
groupField:'sex',
sortInfo:{field:'id',direction:"ASC"}
});
store1.load();
var grid1=new Ext.grid.GridPanel({
store: store1,
height:300,
cm:cm,
view:new Ext.grid.GroupingView(),
renderTo:"grid1"
});
});

// --></script>
</head>
<body>
<form id="form1" runat="server">
<p id="grid1">

</p>
</form>
</body>
</html>

9

图9 分组表格

六、可拖放的表格

首先我们看图10的效果图:

10

图10 可拖放的表格

注意图10四周的蓝色细条,把鼠标放到上面,就可以用拖放改变表格的高度和宽度,实现这一效果并不难,也不需要对写好的Grid做大的修改,只要在原先的基础上添加如下代码:

代码如下:


var rz=new Ext.Resizable('grid1',{
wrap:true,
minHeight:100,
pinned:true,
handles:'all'
});
rz.on('resize',grid1.syncSize,grid1);


注意:
(1) Resizable必须放在render之后,否则就会出现问题;
(2) handles:'all'代表可以向所有放心拖动表格
七、Grid与右键菜单
Grid提供了四个与右键菜单相关的事件:
(1) contextmenu:全局性的右键事件;
(2)cellcontextmenu:单元格上的右键事件
(3)rowcontextmenu:行上的右键事件
(4)headercontextmenu:表头的右键事件
以下代码我们实现一个行上的右键事件,代码清单如下,效果图如11所示

代码如下:


var contextmenu=new Ext.menu.Menu({
id:'theContextMenu',
items:[{
text:'查看详情',
handler:function(){
}
}]
});
grid1.on("rowcontextmenu",function(grid,rowIndex,e){
e.preventDefault();
grid1.getSelectionModel().selectRow(rowIndex);
contextmenu.showAt(e.getXY());
});

11

图11 右键菜单

extjs函数调用方法

当前this所引用的作用域已经改变了,可简单修改为

init: function() {

var me = this;//保存作用域

this.control({

'userlist textfield[id=searchId]':{

keyup:function(textfield, e){

if (e.getKey() == 13) {

me .searchUserByEnter(textfield); //调用原作用域方法

}

}

}

}

规范点可参照extjs写成scope参数控制this追问不是this作用域的问题,我用“探梦今生 ”的方法在fire bug里调试了一下,this指向的是整个类,我认为应该是这里需要一个东西来调用this.searchUserByEnter。

优库美食网还为您提供以下相关内容希望对您有帮助:

高分悬赏EXTJS学习方法和经验

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

关于extjs方法调用的问题

第一个的含义是是否全选中所在的文本内容(默认为false),第二个是设置一个延迟的时间,单位是毫秒(默认为0,不延迟)。下面是两种调用的方法:var textField = new Ext.form.TextField({ // 属性就省略了 ...});...

ExtJs默认的字体大小改变的几种方法(自己整理)_extjs

1、 只需把ext-all.css样式文件中的所有11px换成12px,这样就为统一的12px的字体了。 但是如果再想增大,那么这时候不光是把源文件的11px换成15px,而且需要把里面和font有关的12px换成15px。 改完之后按钮出现毛边,...

extjs函数调用方法

5.radioClass Ext.fly('elId').radioClass('myCls');//添加一个或多个className到这个元素,并移除其所有侧边(siblings)节点上的同名样式。6.removeClass Ext.fly('elId').removeClass('myCls');// 移除元素的样式...

Extjs 之 initComponent 和 constructor的区别

initComponent 和 constructor 就是Extjs 提供用来实现继承和扩展的方式。1. initComponent这个方法是在Ext.Component的构造函数(constructor)中调用的,只有直接或间接继承自 Ext.Component的类才会在constructor里调用initComponent方法...

关于extjs的

可以绑定grid的data store到form上,然后监听grid的选择事件,当选择一行,将数据赋到form中。从绑定数据到监听选择事件,都可以在Form定义时实现,主要的代码如下:var alertForm = new Ext.FormPanel({ id:'company-form',...

extjs函数调用方法

userlist textfield[id=searchId]':{ keyup:function(textfield, e){ if (e.getKey() == 13) { me .searchUserByEnter(textfield); //调用原作用域方法 } } } } 规范点可参照extjs写成scope参数控制this ...

extjs 值得学习吗

如果需要在页面加载时就调用,一般只需直接用EXTJS里的方法即可实现:Ext.onReady(Ext.Login.init, Ext.Login);这里的函数名并不需要加括号,第一个参数是要调用的方法,第二个是作用域,一般写此对象名即可 OK,关于基本...

Extjs框架是什么?

ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于...

关于ExtJs的问题,急急急

Ext.grid.EditorGridPanel它有高度和宽度的属性,你可以把这两个当做参数来传递,就可以在调用的时候适应窗口大小。

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

  • 浊水半和泥的下一句是什么

    浊水半和泥的下一句:最是萧条处。诗词名称:《茅城驿》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

  • 早苗多间草的下一句是什么

    早苗多间草的下一句:浊水半和泥。诗词名称:《茅城驿》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

  • 村贫屋舍低的下一句是什么

    村贫屋舍低的下一句:早苗多间草。诗词名称:《茅城驿》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

  • 地薄桑麻瘦的下一句是什么

    地薄桑麻瘦的下一句:村贫屋舍低。诗词名称:《茅城驿》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

  • 秋日又凄凄的下一句是什么

    秋日又凄凄的下一句:地薄桑麻瘦。诗词名称:《茅城驿》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

Top