想创建一个非常简单的Grid,数据是hard-code进去的..
相关的js代码如下:
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var data2 = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data2),
reader: new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'descn'}
])
});
store.load();
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
store: store,
cm: cm
});
});
页面上这个Grid中的数据死活显示不完全,只能显示第一行的....
用Firebug去审查一下元素,发现数据是已经加载上来的,但是由于Grid高度的限制,没有显式完全:
原来是由于GridPanel的autoHeight属性搞的鬼,我在创建GridPanel时把它显式置成true,就可以了.
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm
});
顺便贴上使用它的一些注意事项(摘自官网):
true
to use height:'auto', false
to use fixed height (defaults to false
). Note: Setting autoHeight: true
means that the browser will manage the panel's height based on its contents, and that Ext will not manage it at all. If the panel is within a layout that manages dimensions (fit
, border
, etc.) then setting autoHeight: true
can cause issues with scrolling and will not generally work as expected since the panel will take on the height of its contents rather than the height required by the Ext layout.
分享到:
相关推荐
如果GridPanel是自适应高度的(`g.autoHeight`),则调整内部头部(`innerHd`)的宽度与视口宽度相同。 3. **固定列宽和自动扩展**: 对于非自适应高度的情况,调整GridPanel本身以及滚动条的大小。然后,如果启用...
在本篇内容中,我们将深入了解EXTJS中`GridPanel`分页技术的具体实现方法,并通过实例代码详细解析其工作原理和技术要点。 #### 一、EXTJS GridPanel分页概述 在EXTJS框架中,`GridPanel`组件是一种常用的数据展示...
在代码中,首先需要引入ExtJS框架的核心文件和样式文件,然后创建Grid组件并定义其相关属性,如数据模型、布局方式等。接下来,在`Ext.onReady`函数中编写事件监听和响应逻辑。 具体代码如下: ```javascript Ext....
`defaults`可以设置默认属性,如`autoHeight`和`autoScroll`。`renderTo`指定了渲染的容器ID,`enableTabScroll`开启滚动条,`autoTabs`自动创建Tab,`deferredRender`控制渲染时机,`activeTab`设定初始选中项,`...
- `cmProduct` 定义了GridPanel中列的属性,如列名、数据索引和是否可排序。 这个实例展示了EXTJS如何创建交互式的用户界面,包括数据绑定、事件处理和动态加载数据。通过定义各种组件,用户可以进行商品种类选择...
**表格面板** (`GridPanel`) 是 ExtJS 中用于展示表格的主要组件。 ```javascript var grid = new Ext.grid.GridPanel({ autoHeight: true, store: store, sm: sm, cm: cm, id: 'grid', viewConfig: { ...
这段代码中需要注意的是`basePath`的设置,这是为了方便后续JavaScript代码中的资源加载路径定义。 ##### 2. Java后台逻辑 Java代码主要负责查询数据库并返回结果集。这部分代码通常位于Struts2的Action类中,负责...
在EXTJS框架中,实现一个带查询和分页功能的列表是常见的需求,主要涉及到数据存储(Store)、数据读取(Reader)、网格面板(GridPanel)和分页工具栏(PagingToolbar)。下面将详细解释如何使用EXTJS来实现这一...