2011-01-25 2 views
1

現在ExtJS 2.3.0を使用していますが、変更できないExt.Grid.EditorGridPanelに問題があります。問題に続き:-(ExtJS EditorGridPanelの表示エラー

私は2 FormPanelとそれらの間のEditorGridPanelで構成され、ウィンドウを作成し、グリッドのviewConfigについては 、唯一の「真forceFit =」設定なしスタイルがあります。またはColumnModelに設定されているビューオプション 各列のalignオプションが "center"に設定されています ColumnModelは13列以上のテキストのみを扱います ブラウザで作業しているWebサイトを開きますウィンドウを開いてGUIをテストします 1行のセルを切り替えると、データ行全体が左側に移動して となり、最初のセルもう表示されません。 (追加ボタンを使用して)グリッドに新しい行を追加した後、ビューがリセットされ、各列のすべてのセルが正しく正しく表示されます。 列ヘッダーとtbarは固定され、常に正しくレンダリングされます。

問題は、古いFirefoxバージョン(2.0x)のIExplorer 8.0xで発生しますが、Firefox 3.6xおよびSafari 5.0xではグリッドが正常に動作します。 誰かが似たような問題を抱えていて、その問題を引き起こす可能性のあるアイデアがあれば、自由に答えてください。 ;-) 事前に感謝します!

[編集]ここにコメントを Thxを、完全なソースからのいくつかのmodifyed出典:あなたには、いくつかのJavaScriptの構文エラーを持っているように、すべての

getTypeSelectionGrid: function() { 
    this.gridRecord: Ext.data.Record.create([ 
     {name:'id', type:'int'}, 
     {name:'start', type:'string'}, 
     {name:'end', type:'string'}, 
     {name:'mo', type:'boolean'}, 
     {name:'tu', type:'boolean'}, 
     {name:'we', type:'boolean'}, 
     {name:'th', type:'boolean'}, 
     {name:'fr', type:'boolean'}, 
     {name:'sa', type:'boolean'}, 
     {name:'su', type:'boolean'}, 
     {name:'type', type:'string'} 
    ]); 

    this.gridStore = new Ext.data.Store({ 
     baseParams: { 
     }, 
     sortInfo: {field: 'id', direction: 'ASC'}, 
     proxy: new Ext.data.HttpProxy({ 
      url: '', 
      method: 'post' 
     }), 
     reader: new Ext.data.JsonReader({ 
      root: 'data', 
      totalProperty: 'totalCount', 
      id: 'id' 
     }, this.gridRecord) 
    }); 

    var sm = new Ext.grid.RowSelectionModel({ singleSelect: true }); 

    var columnConfig = []; 
    //auto incremented id column 
    columnConfig.push({ 
     header: 'id', 
     dataIndex: 'id', 
     width: 50, 
     editor: new Ext.form.TextField({ 
      anchor: '100%', 
      allowBlank: false, 
      disabled: true 
     }) 
    }); 
    //start value for time range, values from '00:00' to '24:00' steps by second, here shorted to 2 options 
    columnConfig.push({ 
     header: 'start', 
     dataIndex: 'start', 
     width: 70, 
     align: 'center', 
     editor: new Ext.form.ComboBox({ 
      store: new Ext.data.SimpleStore({ 
       fields: ['val', 'txt'], 
       data : [['00:00', '00:00'],['24:00', '24:00']] 
      }), 
      displayField: 'txt', 
      valueField: 'val', 
      typeAhead: true, 
      mode: 'local', 
      triggerAction: 'all', 
      selectOnFocus: true, 
      saveRouting: true, 
      forceSelection: true, 
      anchor: '100%', 
      allowBlank: false 
     }) 
    }); 
    //same as above for end of time range, dataIndex 'end' 

    //now 7 checkbox columns foreach weekday 
    columnConfig.push({ 
     xtype: 'checkcolumn', 
     header: 'mo', 
     dataIndex: 'mo', 
     align: 'center', 
     width: 30 
    })); 
    //same as above for dataIndex 'tu', 'we', 'th', 'fr', 'sa' and 'su' 

    //here simplified to SimpleStore, originally a remote store which gets the data 
    //by a HttpProxy 
    columnConfig.push({ 
     header: 'type', 
     dataIndex: 'type', 
     editor: new Ext.form.ComboBox({ 
      store: new Ext.data.SimpleStore({ 
       fields: ['val', 'txt'], 
       data : [[1, 'type 1'],[2, 'type 2']] 
      }), 
      displayField: 'txt', 
      valueField: 'txt', 
      typeAhead: true, 
      mode: 'local', 
      triggerAction: 'all', 
      selectOnFocus: true, 
      saveRouting: true, 
      forceSelection: true, 
      anchor: '100%', 
      allowBlank: false 
     }) 
    }); 
    //then 2 plugins which have some functionality for the selected row 
    //grid tested with and without both plugins, they are not the cause 

    var cm = new Ext.grid.ColumnModel(columnConfig); 
    cm.defaultSortable = false; 

    //now the grid 
    this.typeSelectionGrid = new Ext.grid.EditorGridPanel({ 
     store: this.gridStore, 
     clicksToEdit: 1, 
     autoHeight: true, 
     cm: cm, 
     sm: sm, 
     viewConfig: { 
      forceFit: true 
     }, 
     tbar: [{ 
      text: 'add new row', 
      cls: 'x-btn-text', 
      scope: this, 
      handler: function(){ 
       //adds a row with incremented id 
      } 
     }], 
     listeners: { 
      scope: this, 
      show: function() { 
       sm.selectFirstRow.defer(1000, selectionModel); 
      } 
     } 
    }); 

    return this.typeSelectionGrid; 
}, 

//the grid is then inserted between the Panels into the window component 
//looks something like that 
render: function() { 

    var layoutFn = function(pnl) { 
     pnl.ownerCt.ownerCt.doLayout.defer(Ext.isIE ? 300 : 0, pnl.ownerCt.ownerCt); 
     pnl.doLayout.defer(Ext.isIE ? 500 : 200, pnl); 
    }; 
    this.cardLayout.add({ 
     layout: 'border', 
     border: false, 
     bodyStyle: 'background-color: #fff', 
     items: [ 
      { 
       region: 'center', 
       border: false, 
       layout: 'column', 
       autoScroll: true, 
       defaults: { 
        columnWidth: 1, 
        bodyStyle: 'padding: 5px;', 
        border: false, 
        autoHeight: true, 
        layout: 'column', 
        defaults: { 
         columnWidth: 1 
        } 
       }, 
       items: [ 
        //first Ext.form.FormPanel with some TextFields 
        { 
         items: { 
          listeners: { 
           expand: layoutFn, 
           collapse: layoutFn 
          }, 
          frame: true, 
          title: 'panel with a grid', 
          collapsible: true, 
          titleCollapse: true, 
          layout: 'fit', 
          autoHeight: true, 
          items: this.getTypeSelectionGrid() 
         } 
        } 
        //second Ext.form.FormPanel with some TextFields 
       ] 
      } 
     ] 
    }); 
} 
+0

サンプルコードを投稿することができれば、デバッグするのにもってこいでしょう:) Cheers –

+0

thx Lionel、私は記事にいくつかのソースを追加します。 – kockiren

答えて

2

まず、それが見えます。あなたのコードのスニペットを投稿しただけですが、JS Lintを通してすべてを実行してみてください。

this.gridRecord: Ext.data.Record.create([ 
    {name:'id', type:'int'}, 
    {name:'start', type:'string'}, 
    {name:'end', type:'string'}, 
    {name:'mo', type:'boolean'}, 
    {name:'tu', type:'boolean'}, 
    {name:'we', type:'boolean'}, 
    {name:'th', type:'boolean'}, 
    {name:'fr', type:'boolean'}, 
    {name:'sa', type:'boolean'}, 
    {name:'su', type:'boolean'}, 
    {name:'type', type:'string'} 
]); 

は次のようになります。:手始めに

this.gridRecord = Ext.data.Record.create([ 

私はこれが問題を引き起こす完全にはよく分からないが、私はあなたのコラムのconfigsがそれらに割り当てられた幅を有していることがわかります。 viewConfigプロパティ "forceFit:true"を設定しているにもかかわらず、エディタが各カラムに設定した幅を使用しようとしている可能性があります。

何も消去されていないか確認してください。

0

ありがとうございますが、コードスニペットにはコピー&ペーストエラーがあり、gridRecordは元のコードのグローバルプロパティです。 私はコードを修正したので、混乱して申し訳ありません。

は、今私はあなたの提案を試してみましたが、犯人が見つかりました:IEがすべてで「forceFit」オプションを扱うことができないように思える を、私は、そのオプションをコメントアウトし、 は、列ごとに幅を設定し、...それは働きました罰金、列の動きはありません! いいえ私は、 "forceFit"オプションが "true"以外の "false"に設定されていない場合、ブラウザがIEかどうかを確認するために、まず作業を挿入しました。

ご協力いただきありがとうございます。

関連する問題