0

ExtJS 4.2.1 を使用して、グリッド パネルにページング ツールバーを追加しました。ツールバーが不正な形式でレンダリングされることを除いて、すべて正常に機能します。ページの入力フィールドは非常に小さく、周囲に奇妙なフレームがいくつかあります。少し運が良ければ、フィールドに何かを入力できますが、何も読み取ることができません。これは、デフォルトのテーマ、ネプチューン、グレーのテーマの両方で表示され、Chrome と Firefox でも同じです。

ここに画像の説明を入力

デフォルトのテーマを使用しました。これについて何か考えはありますか？

これがテーマまたはCSS関連の問題である場合(そうですか?)、現在私が含めているものは次のとおりです(ネプチューンテーマを試しています):

<link rel='stylesheet' id='extjsstyle-css'  href='http://127.0.0.1/wordpress/wp-includes/js/extjs/resources/css/ext-all-neptune-debug.css?ver=3.8.1' type='text/css' media='all' />

<script type='text/javascript' src='http://127.0.0.1/wordpress/wp-includes/js/extjs/ext-dev.js'></script>

別のスレッドで提案されているように次のインクルードを追加すると、少し良くなります (フレームが少し中央に配置されます) が、まだ番号が表示されず、ツールバーがまだ高すぎます:

<script type='text/javascript' src='http://127.0.0.1/wordpress/wp-includes/js/extjs/ext-theme-neptune.js'></script>

これは私にとって失敗するコードです:

var dummyStore = Ext.create('Ext.data.Store', {
    storeId: 'DummyStore',
    pageSize: 1,
    fields: [ 'Data' ],
    data: [ { Data: 0 } ]
});

var pagingToolbar = Ext.create('Ext.toolbar.Paging', {
    store: dummyStore,
    dock: 'bottom',
    displayInfo: true
});

var panel = Ext.create('Ext.grid.Panel', {
    title: 'Test',
    store: dummyStore,
    columns: [ { text: 'Data', dataIndex: 'Data', flex: 1 } ],
    height: 550,
    width: 620,
    renderTo: 'myHtmlDiv',
    dockedItems: [ pagingToolbar ]
});

ただし、この問題はデータストアに関連しているとは思いません。

自分でスタイリングはしていません。

更新: 必須コードとインクルードを空白の HTML ファイルにコピーすると、すべてが正しく表示されます。明らかにこれは、Wordpress がページに追加する何かが原因で発生する問題です。現時点では、このような問題に対処する方法がわかりません。

4

2 に答える 2

0

満足のいく解決策が見つかりませんでした。また、ExtJS (Sencha) のメーカーからも解決策が得られませんでした。現在のところ、CSS の衝突なしに ExtJS コンテンツを安全に埋め込む唯一の方法は、iframe を使用することです。他のJSフレームワークを使用した同様の問題についても読んだので、これは一般的に問題だと思います。

于 2014-03-31T07:08:19.637 に答える
0

Chrome 開発者ツールを使用して、破損したツールバーの入力フィールド テーブルの HTML 表現と Sencha の例を比較しました。違いがあります。壊れた入力フィールドのサブツリーには次のものがあります。

"numberfield-1014" -> "top: 13px" instead of 1px
"numberfield-1014-bodyEl" -> additional class "x-form-trigger-wrap-focus"
"numberfield-1014-inputEl" -> additional classes "x-form-focus x-field-form-focus x-field-default-form-focus"

これについてもっと考えてみると.... CSS は、入力フィールドの書式設定を誤って変更する可能性があります (要素クラスや他の多くの要素機能に基づいて)。しかし、整形式の要素と不正な形式の要素のクラスが異なるのはなぜでしょうか? CSS はクラス属性を変更しませんね。この違いはどこから来るのでしょうか?

CSSのルールも確認しました。外部フレームを表示するワードプレスの 24 のテーマで 1 つのルールを特定できました。

table,
th,
td {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

これは、テーマのリセット セクションの一部です。無効にすると、フレームが消えます。

別のルールは次のとおりです。

.entry-content td,
.comment-content td {
    padding: 8px;
}

入力フィールドが正しく表示されません。これを無効にした後、バーを正しく表示するには、バー内のすべての項目の垂直位置のみを固定する必要があります。

これらの影響の根本的な原因は何か分かりますか?

于 2014-03-28T09:37:23.623 に答える