admin 管理员组文章数量: 1086019
2024年3月13日发(作者：企业网站建设计划表)
ext,表格横向滚动条
篇一：Ext js 表格面板
ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、
隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功
能。但很多人在应用的时候都会因为遇到一些细节问题而苦
恼，为什么提示信息出不来呀？为什么图片在断网的情
况下不能显示啊？为什么从后台得不到JSON数据啊？为什
么日期的格式无法转换啊？为什么翻页就是报错啊？为什
么拖曳功能就是实现不了啊？等等等等。最后归结到一句
话，为什么ExtJS这么乱七八糟啊？！呵呵，为了帮助大家
解决ExtJS的这些小麻烦，许老师做了下面的一个小DEMO
来演示GridPanel的用法，后面有时间会陆陆续续演示其它
组件的主要用法。我的愿望就是大家看了这个小专题之后，
能够在最短的时间内掌握ExtJS的各种组件的应用。至于基
本功的修炼，还得烦劳大伙自己用心。好啦，不多说，下面
我们来看ExtJS中最实用的组件：表格面板。
表格由类nel定义，继承自Panel，其xtype
为grid。ExtJS中，表格Grid必须包含列定义信息，并指
定表格的数据存储器Store。表格的列信息由类
1
Model定义、而表格的数据存储器由
定义。这些都是基础知识，大家应该清楚了。
我们主要要牢记，ExtJS里最主要的是JSON数据格式，
ColumnModel是要显示表格的列的定义信息，而Store则是
数据记录的来源。那么，数据呢，又可以分为本地数据和远
程数据，它们分别使用不一样的代理；数据格式有Array，
JSON，XML，针对每种数据格式ExtJS都有相应的解析方
式，就是Store的读取器。我们最核心的当然是先掌握远程
JSON数据的Store的用法。我们来看一个例子，这个例子
包含了一般表格的常用功能，譬如按要求改变列的数据，右
键菜单，面板折叠，强大的拖曳（drag/drop）以及分页处理。
这里涉及到三个文件,包括前台的,和后台
的，我们来分别瞧瞧：
（1） ,这里要说明的是DOCTYPE不能设置
错误，否则IE6.0会显示不出表头的列名。还有就是要汉化
提示信息，注意导入ext-lang-zh_
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML
4.01 Transitional//EN <html
<head
<meta http-equiv=Content-Type content=text/html;
charset=UTF-8 <titleInsert title here</title
<link rel=stylesheet
2
type=text/css
href=resources/css/ <script type=text/javascript
src=resources/js/</script
<script type=text/javascript
src=resources/js/</script
<script type=text/javascript
<script src=resources/js/ext-lang-zh_</script
type=text/javascript src=resources/js/</script
<style type=text/css
</style
</head
<body
<div id=myGrid</div
</body
</html
（2） ,我们的主要功能就在这个JS里面,里面我
都做了详细的注释，大家可以对照着学习。
y(function() {
();// 浮动信息提示
_IMAGE_URL =
'resources/images/default/';// 替换图片文件
地址为本地
// 定义数据源为远程代理和JSON数据格式
3
var ds = new ({
// proxy: new Proxy(jsondata), proxy :
new oxy({
url : ''
}),
reader : new ader({
totalProperty : 'totalProperty',
root : 'root'
}, [{
name : 'id'
}, {
name : 'name' }, {
name : 'sex' }, {
name : birthday,type : date,
dateFormat : Y-n-j }, {
name : 'email' }])
});
// 加载首页数据，每页显示10条记录
({
params : {
start : 0,
limit : 6
4
}
});
// 定义复选框
var sm = new oxSelectionModel(); // 定义
列模型
var cm = new Model([
// new berer(),// 添加自动行号sm,// 添
加复选框
{
header : '学号',
width : 40,
dataIndex : 'id'
}, {
header : '姓名',
dataIndex : 'name'
}, {
header : '性别',
width : 40,
dataIndex : 'sex',
renderer : changeSex
// 红男绿女
} , {
5
header : '出生日期',
篇二：extjs_动态表格完整版
extjs 动态表格完整版
前台页的源码
Java代码
1. <!--所需要的js___start --
2.
3. y(function() {
4.
5. ();// 浮动信息提示
6.
7. _IMAGE_URL =
'resources/images/default/';// 替换图片文件
地址为本地
8.
9. /*刚打开页面等待中，需要屏蔽*/
10. var myMask;
11. y(function(){
12. myMask= new sk(y(),
{});
13. ();
6
14. });
15.
16. // 定义数据源为远程代理和JSON数据格式?
17. var ds = new ({
18. proxy : new oxy({
19.// 这个url,是后台返回的数据,这个url可以是Struts的
Action,也可以是servlet,这里为了方便就是一个jsp文件
: '../?method=date',
e : function() {
(数据加载失败！请检查);
23.},
24. success:function(){
25. ();
26. }
27.
28. }),
29.
30.
31.
32. reader : new ader({
33.// 这个totalProperty和root属性,要和后台的文件
中的保持一致!!
7
roperty : 'totalProperty',
: 'root'
36.
37. }, [{
38.
: 'id'
40.
41. }, {
42.
: 'name'
44.
45. }, {
46.
: 'sex'
48.
49. }, {
50.
: birthday,
52.
: date,
54.
rmat : Y-n-j
8
56.
57. }, {
58.
: 'email'
60.
61. },
62. {
63.
: 'edit'
65.
66. }]
67. )
68.
69. });
70.
71.
72. // 加载首页数据，每页显示10条记录?
73.
74. ({
75.
76. params : {
77.
9
: 0,
79.
: 10
81.
82. }
83.
84. });
85.
86. // 定义复选框
87.
88. var sm = new oxSelectionModel();
89.
90. // 定义列模型
91.
92. var cm = new Model([
93.
94.// new berer(),// 添加自动行号? 95.
,// 添加复选框?
97.
98.{
99.
100. header : '学号',
10
101.
102. width : 40,
103.
104. dataIndex : 'id'
105.
106. }, {
107.
108. header : '姓名',
109.
110. width : 40,
111.
112. dataIndex : 'name',
113.
114. sortable:true,
115.
116. editor:new eld()
117. }, {
118.
119. header : '性别',
120.
121. width : 40,
122.
11
123. dataIndex : 'sex',
124.
125. renderer : changeSex,
126.
127. sortable:true,
128.
129. editor:new
ox({transform:sexList,triggerAction:all,la
zyRender:true})
130.
131. // 红男绿女
132.
133. }, {
134.
135. header : '出生日期',
136.
137. dataIndex : 'birthday',
138.
139. renderer : nderer('Y
年m月d日'),
140.
141. sortable:true,
12
142.
143. editor:new eld({format:'Y年
m月d日'})
144.
145. // 格式化日期
146.
147. }, {
148.
149. header : '电子邮件',
150.
151. width : 120,
152.
153. dataIndex : 'email',
154.
155. renderer : sendEmail,
156.
157.
158.
159.
160.
161.
162.
13
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182. sortable:true, editor:new eld() // 单
击启动邮件客户端发送邮件 }, { header : '操作
', width :25, dataIndex : 'edit',
14
renderer : sendEdit } ]); // 设置所有列字段默认排序
tSortable = true; // 按要求渲染性别的函数?
183.
184. function changeSex(value) {
185.
(value == '男') {
187.
188. return <span
style='color:red;font-weight:bold;'男</span;
189.
190.} else {
191.
192. return <span
style='color:green;font-weight:bold;'女</span;
193.
194.}
195.
196. }
篇三：解决放大关闭后滚动条消失和滚动页
面时最大化Window位置的方法
解决 放大关闭后滚动条消失和滚动页面时
最 大化 Window 位置的方法Posted 周六, 09/20/2008 -
15
12:08 by admin应用场景： 应用场景： 一个表格列表，点
击表格上的某一行，弹出一个 显示其他资料。
（修改、显示详情等等）,如 下图：很多情况下我们只是使
用 Ext 的某一些功能，如 .在你的页面长度没
有越过一页，即没有滚动 条的时候，使用 是
不会有任何问题的。但当你的页面长度超过一页，有滚动条
时，使用 会出现以下两个问题： 你可以试用
一下：
/extjs/mydemo/0007_window_position_err
1、 放大后，再点击关闭按钮，页面右
边的滚动条会消失，出现一条白边，页面不能滚动了。 如
下图：
16
2、向下拖动页面至某一个地方，弹出一个 ，这
个时候如果点击放大，窗体会放大，但位置在
17
最顶上，这时候你什么也不能操作，只能重新刷新页面。如
下图解决办法其实很简单，只要在 Window 中添加两个
listeners 就可以了。 view sourceprint?ers: { 02. 03.
04. 05. }, close:function(w){ //关键部分：关闭窗口前先还原,
滚动条才不会消失 e();
18
06. ze:function(w){ //关键部分：最大化后需要将窗
口重新定位，否则窗口会从最顶端开始最大化 08. lTop); 09.
10.}演示(demo)地址在文章最后. 效果图如下： 源代码包
括：0007_window_ 0007_window_
view
ition(Left,
}print?001.<html 002.<head 003.<meta
http-equiv=Content-Type content=text/html; charset=utf-8
004.<title解决 放大关闭后滚动条消失和滚
动页面时最大化 Window 位置的方法</title 005.<link
rel=stylesheet type=text/css href=../resources/css/ /
006.<link rel=stylesheet
/
type=text/css
007.<script href=../examples/
type=text/javascript src=../adapter/ext/</script
008.<script type=text/javascript src=../</script
009.<script type=text/javascript
19
010./* 011. * Copyright(c) | jamblues 012. *
Power by Jamblues & Micheal 013. * 014. * <A
href=://<;/A
_IMAGE_URL
= ../../resources/images/default/; tr_1 = ;
class_1 = ; on OpenWin(tr) 020.{ 021. 022. 023. 024.
025. 026. 027. 028. 029. 030. 031. 032. 033. 034. 035. 036. 037.
y(function(){ var win = new
015. */
({ layout:'fit', width:480, height:360,
resizable:true, closeAction:'close', //设置选中颜
色开始 if(tr_1 != ) { tr_oundColor = ; } tr_1 =
tr; class_1 = ame; oundColor =
#AECEF6; //设置选中颜色结束
20
038. 039. 040. 041. 042. 不会消失 043. 044. 045. :
true, maximizable: true, listeners: { close:function(w){ //关
键部分：关闭窗口前先还原,滚动条才e(); },
maximize:function(w){ //关键部分：最大化后需要将窗口重
新定位，否则窗口会从最顶端开始最大化 047.
t,Top); 048. 049. 050. 051. 052. 053.}
054. 055.</script 056. 057.</head 058.<body
059.<h1解决 放大关闭后滚动条消失和滚
动页面时最大化 Window 位置的方法</h1 060.<p应
用场景：一个表格列表，点击表格上的某一行，弹出一个
显示其他资料。（修改、显示详情等等） }); });
(); } } ition(Lef
21
061.<br /很多情况下我们只是使用 Ext 的某一些功能，
如 .在你的 页面长度没有越过一页，即没有滚
动条的时候，使用 是不会有任何 问题的。但
当你的页面长度超过一页，有滚动条时，使用
会出现以 下两个问题： 062.<br / 063.1、 放
大后，再点击关闭按钮，页面右边的滚动条会消失，出现 一
条白边，页面不能滚动了。如下图： 064.<br / 065.2、向
下拖动页面至某一个地方，弹出一个 ，这个时
候如果点击 放大，窗体会放大，但位置在最顶上，这时候
你什么也不能操作，只能重新刷新 页面。 066.<br 067.
068.<div id=data-gird 069. 070. 071. 072. *双击行弹出新
窗口 <table width=100% border=1 cellpadding=0
cellspacing=5 <tr <th scope=col
style=text-align:center;font-weight:bold;Company</th
073. <th scope=col
074. style=text-align:center;font-weight:bold;Price</th
<th scope=col
style=text-align:center;font-weight:bold;Change</th 075.
<th scope=col style=text-align:center;font-weight:bold;%
Change</th 076. <th scope=col
style=text-align:center;font-weight:bold;Last
Updated</th 077. </tr
22
078. 079. 080. 081. 082. 083. 084. 085. 086. 087. 088. 089. 090.
091. 092. 093. 094. 095. 096. 097. 098. 099. 100. 101. 102. 103.
104. 105.<tr style='cursor:pointer;'
ondblclick='OpenWin(this);' <td3m Co</td
<td71.72</td
<td9/1
<td0.02</td <td0.03</td
</tr <tr 12:00am</td
style='cursor:pointer;'
ondblclick='OpenWin(this);'
Inc</td <td29.01</td
<tdAlcoa
<td0.42</td
<td1.47</td <td9/1 12:00am</td </tr <tr
style='cursor:pointer;'
ondblclick='OpenWin(this);' <tdAltria Group
Inc</td <td83.81</td <td0.28</td
<td0.34</td <td9/1 12:00am</td </tr <tr
style='cursor:pointer;'
ondblclick='OpenWin(this);'
Express Company</td
<tdAmerican
<td52.55</td
<td9/1 <td0.01</td
12:00am</td </tr
<td0.02</td
23
106. 107. 108. 109. 110. 111. 112. 113. 114. 115. 116. 117. 118.
119. 120. 121. 122. 123. 124. 125. 126. 127. 128. 129. 130. 131.
132. 133.<tr style='cursor:pointer;'
<tdAmerican
<td64.13</td
ondblclick='OpenWin(this);'
International Group, Inc.</td
<td0.31</td <td0.49</td <td9/1 12:
00am</td </tr <tr
style='cursor:pointer;'
ondblclick='OpenWin(this);' <tdAT&T
Inc.</td <td31.61</td <td-0.48</td
<td-1.54</td <td9/1 12:00am</td </tr <tr
style='cursor:pointer;'
ondblclick='OpenWin(this);'
Co.</td <td75.43</td
<tdBoeing
<td0.53</td
<td0.71</td <td9/1 12:00am</td </tr <tr
style='cursor:pointer;'
ondblclick='OpenWin(this);'
Inc.</td <td67.27</td
<tdCaterpillar
<td0.92</td
<td1.39</td <td9/1 12:00am</td </tr
24
134. 135. 136. 137. 138. 139. 140. 141. 142. 143. 144. 145. 146.
147. 148. 149. 150. 151. 152. 153. 154. 155. 156. 157. 158. 159.
160. 161.<tr style='cursor:pointer;'
<tdCitigroup,
<td0.02</td
ondblclick='OpenWin(this);'
Inc.</td <td49.37</td
<td0.04</td <td9/1 12:00am</td </tr <tr
style='cursor:pointer;'
ondblclick='OpenWin(this);' <tdE.I. du Pont
de Nemours and Company</td <td40.48</td
<td0.51</td
12:00am</td
<td1.28</td
</tr
<td9/1
<tr
style='cursor:pointer;'
ondblclick='OpenWin(this);' <tdExxon Mobil
Corp</td
<td68.1</td <td-0.43</td <td-0.64</td
<td9/1 12:00am</td </tr <tr
style='cursor:pointer;'
ondblclick='OpenWin(this);'
Electric Company</td
<tdGeneral
<td34.14</td
<td9/1 <td-0.08</td
12:00am</td </tr
<td-0.23</td
25
162. 163. 164. 165. 166. 167. 168. 169. 170. 171. 172. 173. 174.
175. 176. 177. 178. 179. 180. 181. 182. 183. 184. 185. 186. 187.
188. 189.<tr style='cursor:pointer;'
<tdGeneral
<td30.27</td
<td9/1
<tr
ondblclick='OpenWin(this);'
Motors Corporation</td
<td1.09</td
12:00am</td
<td3.74</td
</tr
style='cursor:pointer;'
ondblclick='OpenWin(this);'
<tdHewlett-Packard
<td-0.03</td
12:00am</td
Co.</td <td36.53</td
<td9/1
<tr
<td-0.08</td
</tr
style='cursor:pointer;'
ondblclick='OpenWin(this);'
Intl Inc</td <td38.77</td
<tdHoneywell
<td0.05</td
<td0.13</td <td9/1 12:00am</td </tr <tr
style='cursor:pointer;'
ondblclick='OpenWin(this);' <tdIntel
Corporation</td <td19.88</td <td0.31</td
<td1.58</td <td9/1 12:00am</td </tr
26
190. 191. 192. 193. 194. 195. 196. 197. 198. 199. 200. 201. 202.
203. 204. 205. 206. 207. 208. 209. 210. 211. 212. 213. 214. 215.
216. 217.<tr style='cursor:pointer;'
ondblclick='OpenWin(this);' <tdInternational
Business Machines</td <td81.41</td
<td9/1
<tr
<td0.44</td
12:00am</td
<td0.54</td
</tr
style='cursor:pointer;'
ondblclick='OpenWin(this);' <tdJohnson
& Johnson</td <td64.72</td <td0.06</td
<td0.09</td <td9/1 12:00am</td </tr <tr
style='cursor:pointer;'
ondblclick='OpenWin(this);' <tdJP Morgan
& Chase & Co</td <td45.73</td
<td9/1
<tr
<td0.07</td
12:00am</td
<td0.15</td
</tr
style='cursor:pointer;'
ondblclick='OpenWin(this);'
<tdMcDonald's
<td36.76</td <td0.86</td
Corporation</td
<td2.4</td
<td9/1 12:00am</td </tr
27
218. 219. 220. 221. 222. 223. 224. 225. 226. 227. 228. 229. 230.
231. 232. 233. 234. 235. 236. 237. 238. 239. 240. 241. 242. 243.
244. 245.<tr style='cursor:pointer;'
ondblclick='OpenWin(this);
' <tdMerck & Co., Inc.</td
<td40.96</td
<td9/1
<td0.41</td <td1.01</td
</tr <tr 12:00am</td
style='cursor:pointer;'
ondblclick='OpenWin(this);' <tdMicrosoft
Corporation</td <td25.84</td <td0.14</td
<td0.54</td <td9/1 12:00am</td </tr <tr
style='cursor:pointer;'
ondblclick='OpenWin(this);'
Inc</td <td27.96</td
<tdPfizer
<td0.4</td
<td1.45</td <td9/1 12:00am</td </tr <tr
style='cursor:pointer;'
ondblclick='OpenWin(this);'
Coca-Cola
<td0.26</td
12:00am</td </tr
Company</td
<tdThe
<td45.07</td
<td9/1 <td0.58</td
28
246. 247. 248. 249. 250. 251. 252. 253. 254. 255. 256. 257. 258.
259. 260. 261. 262. 263. 264. 265. 266. 267. 268. 269. 270. 271.
272. 273.<tr style='cursor:pointer;'
ondblclick='OpenWin(this);' <tdThe Home
Depot, Inc.</td <td34.64</td <td0.35</td
<td1.02</td <td9/1 12:00am</td </tr <tr
style='cursor:pointer;'
ondblclick='OpenWin(this);' <tdThe Procter
& Gamble Company</td <td61.91</td
<td9/1
<tr
<td0.01</td
12:00am</td
<td0.02</td
</tr
style='cursor:pointer;'
ondblclick='OpenWin(this);'
Technologies
<td0.55</td
12:00am</td
Corporation</td
<tdUnited
<td63.26</td
<td9/1
<tr
<td0.88</td
</tr
style='cursor:pointer;'
ondblclick='OpenWin(this);' <tdVerizon
Communications</td <td35.57</td <td0.39</td
<td1.11</td <td9/1 12:00am</td </tr
29
274. 275. 276. 277. 278. 279. 280. 281.<tr
style='cursor:pointer;'
ondblclick='OpenWin(this);' <tdWal-Mart
Stores, Inc.</td <td45.45</td <td0.73</td
<td1.63</td <td9/1 12:00am</td </tr
</table282.</div 283. 284.<br / 285. 286.</body
287.</html演示(demo)地址 地址: 演示 地址 有错误的
地址：
/extjs/mydemo/0007_window_position_err
正确的地址：
/extjs/mydemo/0007_window_
l
30
相关热词搜索：横向 滚动条 表格 ext extjs关闭横向滚动
条 wps表格横向滚动条
31
版权声明：本文标题：ext,表格横向滚动条 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1710288048a566244.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论