您的位置:首页 > Web前端 > React

erui _ eruie 003如何使用Sencha Grid构建React 16 Web应用程序

2020-05-06 04:37 1071 查看

本文最初发表于煎茶。 感谢您支持使SitePoint成为可能的合作伙伴。

  • 使用固定的标题滚动通过单击列标题进行排序显示和隐藏特定列分页,分组和汇总编辑单元格中的数据导出到Excel向下钻取/行扩展

在本文中,我们将使用Sencha ExtReact网格创建一个示例,该示例显示有关股票和股票公司的信息。 如果您想使用HTML表或其他第三方组件对网格进行编码,则可能需要执行以下操作:单击列标题以进行排序,或者单击列标题之间的分隔线以调整大小,或者滑动 分页器,然后为下一页数据进行提取。 借助ExtReact Grid,这些功能是内置的。想要自己尝试一下吗? 立即开始使用ExtReact的30天免费试用-在此注册。

首先,请确保在系统上设置了Node 8.11+和NPM 6+。 您可以从节点网站。 如果已经安装了Node,则可以使用以下命令轻松检查node和npm版本:

node -v
npm -v

ExtRact npm软件包托管在Sencha私有npm存储库中。 您只需登录该存储库一次即可访问所有ExtReact软件包。 要获取登录凭据,请转到ExtReact 30天免费试用页并填写表格。 我们将向您发送一封电子邮件,其中包含登录详细信息以及一些指向文档和示例项目等资源的链接。

npm login — registry=http://npm.sencha.com — scope=@sencha

npm install -g @sencha/ext-react-gen

ext-react-gen app your-app-name-here -i
生成器将要求您命名应用程序,命名npm软件包并选择主题。 默认的Material主题(基于Google的材料设计指南)是一个不错的选择。 选择“生成一个空的应用程序”。 生成器还将提示您为项目创建一个新目录。 然后,生成器将下载并创建您的示例应用程序,包括相关的依赖项。

npm start

查看此步骤的代码在GitHub上。

<Grid >
<Column dataIndex="name" text="Name" width={300} />
<Column dataIndex="symbol" text="Symbol" />
<Column dataIndex="ticks" text="Trend" />
<Column dataIndex="sector" text="Sector" width={200} />
<Column dataIndex="industry" text="Industry" width={350} />
</Grid>

export default class App extends Component {
render() {
return (
<ExtReact>
<StocksGrid />
</ExtReact>
)
}
}

查看此步骤的代码在GitHub上。您将能够在npm start上看到带有空网格的Web应用程序。

this.store = new Ext.data.Store({
data: stocks,
autoLoad: true,
sorters: [{
property: 'name'
}],
listeners: {
update: this.onRecordUpdated
}
})
<Grid store={this.store}>
...
</Grid>

查看此步骤的代码在GitHub上。

cell={ { style: {fontWeight:'bold'}}}

<Column >
<WidgetCell>
<Button ui ="round action"
handler = {this.buyHandler}
text = "Buy"/>
</WidgetCell>
</Column>
buyHandler = (button) => {
let gridrow = button.up('gridrow'),
record = gridrow.getRecord();
Ext.toast(`Buy ${record.get('name')}`)
}

查看此步骤的代码在GitHub上。

<Column dataIndex="ticks"
text="Trend"
sortable={false}
cell = { {
xtype: 'widgetcell',
forceWidth: true,
widget: {
xtype: 'sparklineline',
tipTpl:
'Price: {y:number("0.00")}'
}
} }
/>

查看此步骤的代码在GitHub上。

<Grid
..
plugins={{
gridexporter: true,
}}

>
<TitleBar docked="top" title="Stocks">
<Button align="right" text="Export">
<Menu indented={false}>
<MenuItem text="Excel"
handler=
{this.export.bind(this, 'excel07')}/>
<MenuItem text="CSV"
handler=
{this.export.bind(this, 'csv')}/>
</Menu>
</Button>
</TitleBar>
export = (type) => { this.grid.cmp.saveDocumentAs(
{ type, title: 'Stocks' });
}
"@sencha/ext-exporter": "~6.6.0"
npm install
npm start

查看此步骤的代码在GitHub上。

gridcellediting: true

<Column dataIndex="name" text="Name" width={300} cell={ { style: {fontWeight:'bold'}}} editable/>

...
listeners: {
update: this.onRecordUpdated
}
...
onRecordUpdated = (store, record, operation, modifiedFieldNames) => {
const field = modifiedFieldNames[0];
Ext.toast(`${record.get('name')}
${field} updated to  ${record.get(field)}`)
}

<Column dataIndex="sector" text="Sector" width={200} editable>
<SelectField options={sectors}/>
</Column>

查看此步骤的代码在GitHub上。

platformConfig={{
desktop: {
plugins: {
gridexporter: true,
gridcellediting: true}
},
'!desktop': {
plugins: {
gridexporter: true,
grideditable: true
}
}
}}
查看此步骤的代码在GitHub上。

您可以使用ExtReact 6.6网格并使用React 16在数据驱动的Web应用程序中轻松添加类似电子表格的界面。使用ExtReact,您可以使用任何Ext JS现代组件,包括网格,树形网格,枢轴网格,图表,D3可视化对象和 更多—无需自定义。 您将构建一个优化和最小化的程序包,其中仅包含您在应用程序中使用的组件。 通过使用在台式机和移动设备上都很好看的布局和自适应设计功能,您可以建立沉浸式的用户参与度。 提醒一下,您可以免费试用ExtReact,现在可以进行30天的试用-在此注册。

from: https://www.sitepoint.com//how-to-build-react-16-web-apps-with-the-sencha-grid/

dangzhuang7815 原创文章 0获赞 0访问量 313 关注 私信
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: