0 0

EXT 中如何添加滚动条10

程序代码如下:
/**
*
* @class EdiEntJbxxView
* @extends Ext.Panel
*/

EdiEntJbxxView=Ext.extend(Ext.Panel,{
constructor:function(config){
Ext.applyIf(this,config);
this.initUIComponents();
EdiEntJbxxView.superclass.constructor.call(this,{
id : 'EdiEntJbxxView',
title : '项目基本信息',
iconCls:'menu-appuser',
layout:'border',
autoScroll:true,

});
},
initUIComponents:function(){
this.initGridPanel();

this.items=[this.gridPanel];
}});


EdiEntJbxxView.prototype.initGridPanel=function(){

   
var store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : __ctxPath + '/edi/queryAllEdiEntJbxx.do'
}),
reader : new Ext.data.JsonReader({
root : 'result',
totalProperty : 'totalCounts',
fields : [{
name : 'id',
type : 'long'
},{
name:'soaType',
type:'short'
},'soaName',
'interfaceSourceId',
'interfaceFromSourceId',
'hastrasfer',
'requestId',
'responseId',
'bussinessId',
{
name:'submitDate',
type:'date'
},
{
name:'dealDate',
type:'date'
},'entXmbh',
'entCbsjgspfdw',
'entCbsjgsspwh',
'entLxny',
'entJsdd',
'entJsxz',
'entJsgm',
'entLxwh',
'entHyzgzzjgdm',
'entHyzgmc',
'entXmyzzzjgdm',
'entXmyzmc',
'entTzgm',
'entJszq',
'entZjly',
'entXmgk',
'entXmsjdw',
'entXmcjdw',
'entXmjldw',
'entSjzj',
'entXmjl',
'entJlzj',
'entBz',
'entXxtjdwzjjgdm',
'entXxtjdw_name',
'entSjzt',
'entJlcssj',
'attributy1',
'attributy2',
'attributy3',
'attributy4'


]
}),
remoteSort : true
});
store.setDefaultSort('id', 'asc');

store.load({
params : {
start : 0,
limit : 25
}
});
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel({
columns : [sm, new Ext.grid.RowNumberer(), {
header : 'id',
dataIndex : 'id',
hidden : true
},{
header : '',
dataIndex : 'soaType',
width : 120,
},{
header : '',
dataIndex : 'soaName',
width : 120,
},{
header : '',
dataIndex : 'interfaceSourceId',
width : 120,
},{
header : '',
dataIndex : 'interfaceFromSourceId',
width : 120,
},{
header : '',
dataIndex : 'hastrasfer',
width : 120,
},{
header : '',
dataIndex : 'requestId',
width : 120,
},{
header : '',
dataIndex : 'responseId',
width : 120,
},{
header : '',
dataIndex : 'bussinessId',
width : 120,
},{
header : '',
dataIndex : 'submitDate',
width : 120,
},{
header : '',
dataIndex : 'dealDate',
width : 120,
},{
header : '项目编号',
dataIndex : 'entXmbh',
width : 120,
},{
header : '设计概算批复单位',
dataIndex : 'entCbsjgspfdw',
width : 120,
},{
header : '设计概算审批文号',
dataIndex : 'entCbsjgsspwh',
width : 120,
},{
header : '',
dataIndex : 'entLxny',
width : 120,
},{
header : '',
dataIndex : 'entJsdd',
width : 120,
},{
header : '',
dataIndex : 'entJsxz',
width : 120,
},{
header : '',
dataIndex : 'entJsgm',
width : 120,
},{
header : '',
dataIndex : 'entLxwh',
width : 120,
},{
header : '',
dataIndex : 'entHyzgzzjgdm',
width : 120,
},{
header : '',
dataIndex : 'entHyzgmc',
width : 120,
},{
header : '',
dataIndex : 'entXmyzzzjgdm',
width : 120,
},{
header : '',
dataIndex : 'entXmyzmc',
width : 120,
},{
header : '',
dataIndex : 'entTzgm',
width : 120,
},{
header : '',
dataIndex : 'entJszq',
width : 60,
},{
header : '',
dataIndex : 'entZjly',
width : 60,
},{
header : '',
dataIndex : 'entXmgk',
width : 60,
},{
header : '',
dataIndex : 'entXmsjdw',
width : 60,
},{
header : '',
dataIndex : 'entXmcjdw',
width : 60,
},{
header : '',
dataIndex : 'entXmjldw',
width : 120,
},{
header : '',
dataIndex : 'entSjzj',
width : 120,
},{
header : '',
dataIndex : 'entXmjl',
width : 120,
},{
header : '',
dataIndex : 'entJlzj',
width : 120,
},{
header : '',
dataIndex : 'entBz',
width : 120,
},{
header : '',
dataIndex : 'entXxtjdwzjjgdm',
width : 120,
},{
header : '',
dataIndex : 'entXxtjdw_name',
width : 120,
},{
header : '',
dataIndex : 'entSjzt',
width : 120,
},{
header : '',
dataIndex : 'entJlcssj',
width : 120,
}
,{
header : '',
dataIndex : 'attributy1',
width : 120,
}
,{
header : '',
dataIndex : 'attributy2',
width : 120,
}
,{
header : '',
dataIndex : 'attributy3',
width : 120,
}
,{
header : '',
dataIndex : 'attributy4',
width : 120,
}],
defaults : {
sortable : true,
menuDisabled : true,
width : 100
}
});

this.gridPanel = new Ext.grid.GridPanel({
id : 'AppUserGrid',
tbar : this.toolbar,
store : store,
region:'center',
shim : true,
trackMouseOver : true,
disableSelection : false,
loadMask : true,

cm : cm,
sm : sm,
viewConfig : {
forceFit : true,
enableRowBody : false,
showPreview : false
},
bbar : new HT.PagingBar({store : store,exportable: true})
});
上面代码是显示数据库数据,由于数据字段太多,导致很多字段都无法显示,是不是要添加个滚动条才能完全显示,但是自己对EXT不太了解,希望懂的能帮助下! 谢谢







};//end of the init GridPanel


2012年8月03日 11:00
  • 大小: 7.4 KB

1个答案 按时间排序 按投票排序

0 0

采纳的答案

应该是你GridPanel的定义问题:
viewConfig : {
forceFit : true,
enableRowBody : false,
showPreview : false
}

把foreFit:true去掉

2012年8月03日 15:08

相关推荐

    Ext grid panel 滚动条位置不变

    为了确保每次加载数据时滚动条都能正确地回到原来的位置,我们还可以通过覆盖`Ext.grid.GridView`中的方法来进一步增强功能: ```javascript Ext.override(Ext.grid.GridView, { scrollTop: function () { this....

    ext Gird 有滚动条功能

    在Ext Grid中,滚动条通常是自动添加的,当数据超出Grid的可视区域时,就会出现。不过,有时候我们可能需要自定义滚动条的行为或者样式。例如,我们可能希望在数据较少时隐藏滚动条,或者设置特定的滚动速度。这就...

    Ext中的Grid控制纵向滚动条单次滚动量

    总结起来,控制Ext Grid Panel的纵向滚动条单次滚动量涉及到对Grid的滚动事件进行监听和自定义处理。通过计算滚动像素与行高之间的关系,我们可以实现对滚动行数的控制,从而优化用户的浏览体验。在实际开发中,还...

    Ext 添加功能form表单实例

    - `autoScroll`: 设置为`true`,当表单内容超出容器时自动显示滚动条。 #### 字段配置 表单中的字段配置非常关键,它决定了用户如何与表单交互。在本例中,包含了几种不同类型的字段: 1. **隐藏字段**: 如`{xtype...

    Extjs4.0 列隐藏和滚动条动态加载

    在ExtJS 4.0版本中,它提供了一系列功能,包括表格面板(Grid Panel)的列管理以及滚动条的动态加载。让我们深入探讨这些核心概念。 1. **列隐藏与显示** 在ExtJS 4.0中,表格面板允许用户动态隐藏或显示列,以...

    textarea去掉滚动条 textarea横向或纵向滚动条的去掉方法

    然而,当`textarea`内的文本超出了其可视区域时,浏览器会自动添加滚动条以便浏览全部内容。在某些情况下,我们可能希望去除这些滚动条,以保持界面的简洁或者统一设计风格。本文将详细介绍如何在HTML和JavaScript中...

    EXT中文手册5.pdf

    - **autoScroll**: 设置为 `true` 时,当面板内容超出显示范围时,自动添加滚动条。 - **resizeEl**: 指定用于调整大小的元素 ID。 #### 2.3 初始化 ContentPanel 通过传递配置对象初始化 `ContentPanel`,例如: `...

    ext中combo过滤

    1. **延迟加载**:如果`Store`中的数据量非常大,可以考虑使用分页或虚拟滚动技术来实现数据的懒加载,从而减少内存占用和提高响应速度。 2. **异步过滤**:在数据量较大时,可以采用异步方式加载数据并执行过滤操作...

    自定义滚动条:使用自定义滚动条使Firefox具有个性化效果!

    您可以从任何颜色范围中进行选择,并在默认宽度和细滚动条之间切换...或者,如果这是使您的船浮起的话,则将其完全隐藏。 注意:由于技术限制,此加载项无法调整Mozilla拥有的页面,内部Firefox页面或与其他浏览器...

    Extjs gridpanel 出现横向滚动条问题的解决方法

    代码如下:viewConfig : { layout : function() { if (!this.mainBody) { return; // not rendered } var g = this.grid; var c = g.getGridEl(); var csize = c.getSize(true); var vw = csize.width;...

    html滚动条 textarea属性设置

    2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色) scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-base-color滚动条的基本颜色 scrollbar-dark-shadow-color立体滚动条强阴影的...

    ExtJs2.2的grid滚动条以及点Grid发生偏移问题

    解决如下两个Bug: Bug1:出现纵向滚动条后,将横向滚动条拖到最后,然后会发现每选择一条记录...Bug2:出现横向滚动条后,向右稍拉滚动条,然后点击任意一行,会发现行内容向左偏移,滚动条向右越多,偏移越明显。

    Ext-window属性

    7. **autoScroll**: 如果设为`true`,组件的body部分将启用滚动条,允许用户查看超出可视区域的内容。默认值为`false`。 8. **autoShow**: 当设置为`true`,如果组件被隐藏,它会在初始化后自动显示。这是为了确保...

    Ext Panel拼揍表格模板.rar

    如果需要,还可以添加滚动条、边框等。 6. **渲染并附加到DOM**:最后,将Panel渲染到页面上的某个元素,完成表格的展示。 示例代码可能如下: ```javascript Ext.application({ name: 'MyApp', launch: ...

    ext js calendar 日历

    1. **MonthView** - 这个视图展示一整个月的日程,没有滚动条,大小自适应于CalendarPanel。它基于box layout实现,不包含滚动功能。 2. **DayView** - 包含DayHeaderView和DayBodyView。DayHeaderView显示全天事件...

    Ext.form表单中各种属性应用详解

    - **preventScrollbars**: 类型为 `Boolean`,如果为 `true`,则会隐藏滚动条,默认为 `false`。 #### 3. Ext.form.TriggerField **Ext.form.TriggerField** 在文本框旁边提供了一个触发按钮,可以通过点击该按钮...

    c# textbox的滚动条总是指向最底端的简单解决方法

    当我第一次添加滚动条时候,我发现滚动条总是跑向上方,经过研究 解决方案如下: •this.textBox1.Focus(); •获取焦点 •this.textBox1.Select(this.textBox1.textLength,0); •选择到最后一行文本 •this.textBox...

    12套原版漂亮的EXT皮肤

    EXT皮肤不仅仅是CSS样式表,它还包括了相关的图片资源,如按钮、滚动条、图标等组件的图形元素。这些皮肤通常由专业的UI设计师创建,以确保美观和一致性。在"12套原版漂亮的EXT皮肤"中,我们可以期待找到12种不同的...

    ext使用--Panel和iframe联合使用时页面高度的解决方法

    在ExtJS中,我们通常使用`xtype: 'iframe'`来创建一个IFrame组件,然后将其添加到Panel中。然而,由于IFrame内容是异步加载的,Panel可能无法正确预估IFrame的高度,导致滚动条的出现或内容被裁剪。 为了解决这个...

Global site tag (gtag.js) - Google Analytics