Как создать React 16 веб-приложений с помощью Sencha Grid

Эта статья была первоначально опубликована на Сенче . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.

React 16 — это первая версия React, построенная на основе новой базовой архитектуры React, под кодовым названием «Fiber». React 16 спроектирован с нуля для поддержки асинхронного рендеринга, который позволяет обрабатывать большие деревья компонентов, не блокируя основной поток выполнения. Он поддерживает ряд ключевых функций, таких как перехват исключений с использованием границ ошибок, возврат нескольких компонентов при рендеринге, уменьшение размера файла и поддержка лицензии MIT.

Если вы разрабатываете управляемое данными веб-приложение с React 16, скорее всего, в какой-то момент вы будете использовать интерфейс в виде таблицы или таблицы для отображения данных для ваших пользователей. В зависимости от контекста ваши пользователи могут ожидать, что сетка в вашем приложении будет способна:

• Прокрутка с фиксированным заголовком
• Сортировка нажатием на заголовок столбца
• Отображение и скрытие определенных столбцов
• Пейджинг, группировка и суммирование
• Редактирование данных в ячейках
• Экспорт в Excel
• Развертывание / расширение ряда

Сетка может быть одним из самых сложных и сложных компонентов пользовательского интерфейса для построения в React, потому что многие из необходимых функций требуют как значительного опыта React, так и готовности и способности копаться в DOM. К счастью, ExtReact Grid предоставляет все эти возможности и многое другое.

В этой статье мы собираемся создать пример с использованием Sencha ExtReact Grid, который отображает информацию об акциях и акциях компаний. Если вы хотите закодировать сетку с использованием таблицы HTML или другого стороннего компонента, вам, возможно, придется сделать что-то вроде ручного нажатия на заголовок столбца для сортировки, или щелчка на разделителе между заголовком столбца для изменения размера, или, возможно, скольжения пейджер и делает выборку для следующей страницы данных. С ExtReact Grid эти функции встроены. Хотите попробовать сами? Начните с 30-дневной бесплатной пробной версии ExtReact сегодня — зарегистрируйтесь здесь .

Давайте начнем с создания приложения с использованием ExtReact Grid.

Начало работы с созданием приложения ExtReact

Чтобы начать разработку приложения React с компонентами ExtReact, выполните следующие действия:

Убедитесь, что у вас настроена среда Node

Во-первых, убедитесь, что в вашей системе настроены Node 8.11+ и NPM 6+. Вы можете скачать последнюю версию Node с веб-сайта Node . Если вы уже установили Node, вы можете легко проверить версию узла и npm, используя следующие команды:

node -v
npm -v

Получите ваши учетные данные для входа в репозиторий ExtReact npm

Пакеты ExtReact npm размещаются в частном репозитории npm от Sencha. Вы входите в этот репозиторий один раз, чтобы получить доступ ко всем пакетам ExtReact. Чтобы получить учетные данные, перейдите на страницу 30-дневной бесплатной пробной версии ExtReact и заполните форму. Мы отправим вам электронное письмо с данными для входа в систему, а также некоторые ссылки на такие ресурсы, как документы и примеры проектов.

Войдите в ExtReact npm repo и получите генератор приложений ExtReact

Следующим шагом будет вход в частное репозиторий npm от Sencha, на котором размещены пакеты ExtReact. Используйте свою учетную запись npm (указанную в электронном письме), чтобы связать репо с областью действия @sencha и введите учетные данные при появлении запроса:

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

Следующим шагом является установка пакета генератора ExtReact.

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

 ext-react-gen app your-app-name-here -i

 npm start

 <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>   
       )
   }
}

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

 <Grid store={this.store}>
      ...
</Grid>

 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')}`)
}

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

 <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

 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>

 platformConfig={{
                   desktop: {
                       plugins: {
                           gridexporter: true,
                           gridcellediting: true
                       }
                   },
                   '!desktop': {
                       plugins: {
                           gridexporter: true,
                           grideditable: true
                       }
                   }
               }}