關於extjs動態插入一列的信息

本文目錄一覽：

• 1、extjs 表格編輯，動態顯示列怎麼弄
• 2、extjs中js怎麼向jsp頁面中動態添加一個7列6行的table
• 3、Extjs 4.x 為GridPanel動態添加一行數據
• 4、extjs動態向可編輯表格EditorGridPanel 添加一個列ColumnModel，並讓列能夠被修改
• 5、extjs 表格如何實現動態添加列

extjs 表格編輯，動態顯示列怎麼弄

這裡說的應該是excel動態圖表下拉顯示列，操作方法如下：

1.製作包含了相關數據的Excel表格，以下以一份銷售簡表為例，說明該技巧的詳細思路。

2.選擇單元格A20（也可以是其他空白單元格），單擊菜單欄「數據」→有效性」，打開「數據有效性」對話框，在「設置」選項卡下，「允許」的下拉菜單中，選擇「序列」，在「來源」中，選擇或輸入來源位置（本例為$A$3：$A$16），確定之後，即可以為A20單元格建立下拉列表。

3.選擇A20單元格的相鄰單元格B20，輸入公式=VLOOKUP($A$20,$A$3:$H$16,COLUMN(),)，回車後，選擇B20單元格拖動右下角的填充柄將公式填充至H20。此時通過選擇A20單元格的下拉菜單，選擇不同的產品，會顯示該產品的具體詳細信息。

PS：VLOOKUP函數是一個查找函數，其基本解釋是：在參數2（本例為$A$3:$H$16）首列中，垂直查找（按行查找）參數1（本例為$A$20），並返回參數3指定的第n列中相同行的數據，參數4為查找方式，參數4為0或省略或為FALSE時，表示精確查找，為1或者TRUE時表示模糊查找。

COLUMN為列函數，COLUMN（）表示返回當前單元格的列號。

4.選定A20：H20單元格區域作為圖表的數據源，單擊「插入」→圖表」，打開「圖表嚮導」對話框，按提示進行設置，製作好圖表，需要不同產品的相關數據時，只需在A20單元格的下拉菜單中選擇即可。該圖表實現了隨不同的對象而變化，可讀性和可視效果都大大提高。

extjs中js怎麼向jsp頁面中動態添加一個7列6行的table

不知道你說的是js還是extjs的gridpanel

如果是js動態添加一個table，大致如下：

var createTable=function(row,col){//row:行數，col:列數

var table=document.createElement(“table”);

var tbody=document.createElement(“tbody”);

for(var i=1;i=row;i++){

var tr=document.createElement(“tr”);

for(var j=1;j=col;j++){

var td=document.createElement(“td”);

td.innerHTML=i.toString()+j.toString();

tr.appendChild(td);

}

tbody.appendChild(tr);

}

table.border=”1px”;

table.appendChild(tbody);

document.body.appendChild(table);

};

將createTable函數放到相應的事件中，這裡放在body的onload事件中

Extjs 4.x 為GridPanel動態添加一行數據

//聲明對應grid的Record對象

var ItemRecord = Ext.data.Record.create([

{name:’itemid’},

{name:’itemcode’},

{name:’itemname’},

{name:’price’},

{name:’mark’}

]);

//點新增按鈕時則執行類似如下函數

function addNewLine2Grid(grid){

var rec = new ItemRecord({ //實例化Record對象，並賦予各字段初始值

‘itemid’: 0,

‘itemcode’: ”,

‘itemname’: ”,

‘price’: 0.00,

‘mark’: ”

});

grid.store.insert(grid.store.getCount(), rec); //插入新行作為grid最後一行

grid.getView().refresh(); //刷新

//grid.plugins[1].startEditing(grid.store.getCount()-1,4); //編輯最後一行第4列

}

extjs動態向可編輯表格EditorGridPanel 添加一個列ColumnModel，並讓列能夠被修改

ext3.0的EditorGridPanel 都有自帶的編輯啊

ext4.0的要在gridpanel加編輯插件

extjs 表格如何實現動態添加列

Ext.onReady(function() {

  var sm=new Ext.grid.CheckboxSelectionModel();

  var cm=[new Ext.grid.RowNumberer(),sm,

   {header:”編號”, dataIndex:”id”, width:65,hidden : true},

   {header:”名稱”, dataIndex:”name”, width:65},

   {header:”路徑”, dataIndex:”url”, width:65}

   ]

  var fd = [“id”, “name”, “url”];

  var store=new Ext.data.JsonStore({

   fields:fd

  })

  var data=[{

     id:1,name:”xiao”,url:”sssssssssss”,sex:”male”

     }]

  var grid=new Ext.grid.GridPanel({

   sm:sm,

   columns:cm,

   store:store,

   width:500,

   height:400,

   tbar:[{

    text:”生成”,

    icon:”images/icons/add.png”,

    cls:”x-btn-text-icon”,

    handler:function(){

     var res = {fields:[{name:”sex”}],columns:[{header:’性別’,dataIndex:”sex”,width:65}]};

     var columns = res.columns;

     var fields = res.fields;

     for (var i = 0; i  fields.length; i++) {

      fd.push(fields[i].name);

      cm.push(columns[i]);

     }

     //重新綁定store及column

     ss=new Ext.data.JsonStore({

       fields:fd

      });

     grid.reconfigure(ss,new Ext.grid.ColumnModel(cm));

     ss.loadData(data)

    }

   }]

  })

  var win=new Ext.Window({

   title:”sssssss”,

   width:700,

   height:500,

   layout:”fit”,

   closable:true,

   items:[grid]

  })

  win.show();

});

主要是grid里的reconfigure這個方法：配置grid以使用一個不同的Store和Column Model並觸發’reconfigure’事件。 視圖將會被綁定到新的對象並刷新。

你自己引用ext3的類庫吧~