写一个extjs6表格上下布局的例子
时间: 2024-06-10 07:09:29 浏览: 21
可以的,以下是一个extjs6表格上下布局的例子:
```
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'grid',
title: 'Grid',
flex: 1,
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 1
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}]
}, {
xtype: 'panel',
title: 'Details',
height: 100,
html: 'Details'
}]
});
```
这个例子使用了vbox布局,将一个grid和一个panel放在一个容器中,grid占据了容器的所有剩余空间,panel的高度为100。这样就实现了一个表格上下布局。
相关问题
extjs6写一个表格内点击事件
嗨,很高兴为您解答问题。关于您的问题,可以使用以下代码来处理表格内的点击事件:
```
Ext.define('MyApp.view.MyGrid', {
extend: 'Ext.grid.Panel',
xtype: 'mygrid',
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone', flex: 1 }
],
listeners: {
itemclick: function(grid, record, item, index, e, eOpts) {
// 处理点击事件的代码
}
}
});
```
在此代码中,`listeners`对象为表格添加了一个`itemclick`事件监听器。当用户点击表格项时,这个事件将被触发并且回调函数将被执行。在回调函数内,您可以处理点击事件并且执行您需要的操作。
希望这个回答能够帮助您。如果您有任何其他问题,请随时问我。
extjs6 写一个模糊查询的完整例子
以下是一个使用ExtJS 6实现模糊查询的完整例子:
1. 创建一个包含表格和搜索框的页面:
```javascript
Ext.create('Ext.panel.Panel', {
title: 'Search Example',
width: 500,
height: 400,
layout: 'border',
items: [{
region: 'center',
xtype: 'grid',
id: 'dataGrid',
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 1
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone',
flex: 1
}],
store: Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
name: 'John',
email: 'john@example.com',
phone: '555-1234'
}, {
name: 'Jane',
email: 'jane@example.com',
phone: '555-5678'
}, {
name: 'Bob',
email: 'bob@example.com',
phone: '555-9012'
}]
})
}, {
region: 'north',
xtype: 'textfield',
id: 'searchField',
fieldLabel: 'Search',
labelWidth: 50,
margin: 5,
listeners: {
change: function(field, newValue) {
var grid = Ext.getCmp('dataGrid');
var store = grid.getStore();
store.clearFilter();
if (newValue) {
var matcher = new RegExp(Ext.String.escapeRegex(newValue), 'i');
store.filter({
filterFn: function(record) {
return matcher.test(record.get('name')) || matcher.test(record.get('email')) || matcher.test(record.get('phone'));
}
});
}
}
}
}],
renderTo: Ext.getBody()
});
```
2. 在搜索框的change事件监听器中添加代码,以便根据输入的文本过滤表格中的数据。使用正则表达式进行模糊匹配。如果搜索框为空,则清除所有过滤器。
3. 运行代码并输入搜索条件,可以看到表格中只显示与搜索条件匹配的记录。
完整的代码如下:
```javascript
Ext.create('Ext.panel.Panel', {
title: 'Search Example',
width: 500,
height: 400,
layout: 'border',
items: [{
region: 'center',
xtype: 'grid',
id: 'dataGrid',
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 1
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone',
flex: 1
}],
store: Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
name: 'John',
email: 'john@example.com',
phone: '555-1234'
}, {
name: 'Jane',
email: 'jane@example.com',
phone: '555-5678'
}, {
name: 'Bob',
email: 'bob@example.com',
phone: '555-9012'
}]
})
}, {
region: 'north',
xtype: 'textfield',
id: 'searchField',
fieldLabel: 'Search',
labelWidth: 50,
margin: 5,
listeners: {
change: function(field, newValue) {
var grid = Ext.getCmp('dataGrid');
var store = grid.getStore();
store.clearFilter();
if (newValue) {
var matcher = new RegExp(Ext.String.escapeRegex(newValue), 'i');
store.filter({
filterFn: function(record) {
return matcher.test(record.get('name')) || matcher.test(record.get('email')) || matcher.test(record.get('phone'));
}
});
}
}
}
}],
renderTo: Ext.getBody()
});
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)