extjs - ExtJS 6 コンポーネントの作成とテーマ設定

Question

ExtJS アプリケーション用のカスタムコンポーネントを作成しようとしています (extjs 6.0 と最新のツールキットを使用)

新しいアプリを生成し、新しいビュー (Ext.Component を拡張) を追加して、そこにいくつかのロジックを配置しました。xtype を使用してこのコンポーネントを作成できますが、テーマに行き詰まります。

問題は、新しいコンポーネントを正しく追加する方法 (フレームワークソース内 / アプリ内のビューとして / 他の場所) と、コンポーネントの sass を配置する場所 (カスタムテーマを生成してそこに挿入する場所 / 他の場所) です。

コンポーネント (app/view/components フォルダーにあります):

Ext.define("WebTest.view.components.IconButton", {
extend: 'Ext.Component',
xtype: 'iconbutton',

cachedConfig: {
    pressedCls: Ext.baseCSSPrefix + 'iconbutton-pressing',
    iconCls: null
},

config: {
    handler: null,
    scope: null,
    baseCls: Ext.baseCSSPrefix + 'iconbutton' + ' ' + Ext.baseCSSPrefix + 'iconalign-center'
},

template: [
    {
        tag: 'span',
        className: Ext.baseCSSPrefix + 'iconbutton-icon',
        reference: 'iconElement'
    }
],
............

追加した：

コンポーネントとテーマを追加するさまざまな方法を試しました (目標は、標準の CSS を変更してカスタムを追加することです)。

（私にとって）受け入れられる方法は、カスタムコンポーネントをux.button folder（@Alexanderが述べたように）に入れ、新しいテーマを生成することです。2 つの (私の場合) 異なる名前空間を使用しているため、テーマpackage.jsonの名前空間パラメーターをクリアする必要があります。これにより、カスタムスタイルを追加したり、標準コンポーネントを追加またはオーバーライドしたりできます (つまり) 。src\MyAppNs\...\MyComponentClassName.scssvar\Ext\Component.scss

ワークスペースも使用しようとしましたが、この方法は、複数のアプリケーション間でコンポーネントとテーマを共有するのに適しています。この場合、コンポーネントをパッケージとして追加できます (最初の方法のテーマのように)。

最後に、カスタムコンポーネントをフレームワークソースに追加しようとしましたが、SenchaCMD はこの方法での動作をサポートしていないことに気付きました。それは受け入れられないと考えてください。

extjs - ExtJS 6 コンポーネントの作成とテーマ設定

1 に答える 1

Related

Reference