extjs生成table

Ⅰ 使用extjs ，直接在grid上編輯後，如何將整個修改的數據行 傳到後台並解析成datatable

呃 這個很簡單啊 grid修改編輯後 其實它自己已經記錄了你所修改的數據
你只需要獲取並訪問後台就行了
editor.on({
scope: this,
afteredit: function(roweditor, changes, record, rowIndex) {
Ext.Ajax.request({
url : localhostURL + '/Ad.do',
method: 'POST',
jsonData :Ext.util.JSON.encode(record.data),
// record.phantom 是否為更新數據 ? true : false
params: {action:'saveOrUpdate'},
success: function(response) {
if(response.responseText == 'succ'){
Ext.example.msg('Message','Operation success!');
}else{
Ext.example.msg('Message','Operation failed!');
}
reloadAdStore();
}
});
}
});

你看 很簡單 就這樣就可以了

Ⅱ extjs中的tablePanel中的常用屬性以及代碼示例

屬性：
body : Ext.Element
The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config,...
The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's Updater. Read-only.
If this is used to load visible HTML elements in either way, then the Panel may not be used as a Layout for hosting nested Panels.

If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout.
Panel
buttons : Array
This Panel's Array of buttons as created from the buttons config property. Read only. Panel
disabled : Boolean
True if this component is disabled. Read-only. Component
footer : Ext.Element
The Panel's footer Element. Read-only.
This Element is used to house the Panel's buttons.
Panel
hidden : Boolean
True if this component is hidden. Read-only. Component
initialConfig : Object
This Component's initial configuration specification. Read-only. Component
items : MixedCollection
The collection of components in this container as a Ext.util.MixedCollection Container
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. Component
rendered : Boolean
True if this component has been rendered. Read-only.

Ⅲ extjs table 文字垂直居中 怎樣使單元格的文字縱向居中

瀏覽器打開開發人員專工作屬F12

.x-grid3-row td, .x-grid3-summary-row td {

line-height: 13px;

vertical-align: middle;

padding-left: 1px;

padding-right: 1px;

-moz-user-select: none;

-khtml-user-select: none;

-webkit-user-select: ignore;

}

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

此問題 百分之百是因為你js代碼中 格式 有多餘的逗號
火狐對此不敏感而IE對此敏感。 如果你在myEclipse中安裝了最新的spket插件(專門編輯Ext的)的，編譯都會報錯的。(之前舊版本都沒有的)
如 正確的是{params:'qwe',
id:123
}
而錯誤是
{params:'qwe',
id:123,
}

Ⅳ 在Extjs中加入類似於Excel的表格，要怎麼加

var cm = new Ext.grid.ColumnModel({
columns: [
new Ext.grid.RowNumberer(),
{ header: '單位', dataIndex: 'Cityname', sortable: true, width: 130, align: 'center' },
{ header: '萬元', dataIndex: 'TOTALCOST', width: 130, align: 'center' },
{ header: '公里', width: 100, dataIndex: 'NEWLNE', align: 'center' },
{ header: '公里', width: 100, dataIndex: 'UPDATELINE', align: 'center' },
{ header: '台', dataIndex: 'NEWBYQ', sortable: true, width: 100, align: 'center' },
{ header: 'kva', dataIndex: 'NEWRL', sortable: true, width: 100, align: 'center' },
{ header: '台', dataIndex: 'UPDATEBYQ', sortable: true, width: 100, align: 'center' },
{ header: 'kva', dataIndex: 'UPDATERL', sortable: true, width: 100, align: 'center' },
{ header: '個', dataIndex: 'NEWTQ', sortable: true, width: 100, align: 'center' },
{ header: '個', dataIndex: 'UPDATETQ', sortable: true, width: 100, align: 'center' },
{ header: '台', width: 110, dataIndex: 'JP', align: 'center' },
{ header: '公里', width: 100, dataIndex: 'DLLINE', sortable: true, width: 100, align: 'center' },
{ header: '', width: 100, dataIndex: 'KBS', sortable: true, width: 100, align: 'center' }
],
rows: [
[{}, {}, {}, { header: '10kV及以下', colspan: 11, align: 'center'}],
[{}, {}, { header: '總投資', align: 'center' },
{ header: '新建10KV線路', align: 'center' },
{ header: '改造10KV線路', align: 'center' },
{ header: '新增配電變壓器', align: 'center' },
{ header: '新建容量', align: 'center' },
{ header: '改造配電變壓器', align: 'center' },
{ header: '改造容量', align: 'center' },
{ header: '新建台區', align: 'center' },
{ header: '改造台區', align: 'center' },
{ header: 'JP櫃', align: 'center' },
{ header: '電纜線路', align: 'center' },
{ header: '開閉所', align: 'center' }
]]
});

給你個簡單的可以參考著做

Ⅵ Jsp生成復雜表格問題

方式比較多，現列舉一二，僅供參考：
1、按照樹形表格的數據層級關系，在後台內動態生成相應的<table>元素。容
2、採用比較優秀的JavaScript UI組件庫，比如jQuery UI、ExtJS來完成。
3、採用比較優秀的JavaServer Faces UI庫來完成，如primeface、RichFaces、MyFaces等。
4、在jsp頁面中嵌入Flex樹形組件。

一般來說，後面的三個要求你對所涉及的知識體系有一定的了解，但是一但你了解相應的知識體系，開發效率將會成指數倍數增長。第一種方式就是最直接的演算法翻譯，不要求你了解更多的知識體系，但是你開發出來的組件，復件性不強，只在你的項目或是公司內部項目中使用。

Ⅶ extjs中有一個多欄表頭的GRID，第一欄是學院，第二欄分別是專業。如何可以獲取到第一欄表頭的內容

$(document).ready(function(){

var _data = [
{'name': 'a','id': 'b1','sex': 'b', 'age': '1'},
{'name': 'f','id': 'b2','sex': 'g','age': '2'},
{'name': 'h','id': 'b3','sex': 'g','age': '3'},
{'name': 'k','id': 'b4','sex': 'b','age': '4' },
{'name': 'a','id': 'b1','sex': 'b', 'age': '1'},
{'name': 'f','id': 'b2','sex': 'g','age': '2'},
{'name': 'h','id': 'b3','sex': 'g','age': '3'},
{'name': 'k','id': 'b4','sex': 'b','age': '4' },
{'name': 'a','id': 'b1','sex': 'b', 'age': '1'},
{'name': 'f','id': 'b2','sex': 'g','age': '2'},
{'name': 'h','id': 'b3','sex': 'g','age': '3'},
{'name': 'k','id': 'b4','sex': 'b','age': '4' },
{'name': 'a','id': 'b1','sex': 'b', 'age': '1'},
{'name': 'f','id': 'b2','sex': 'g','age': '2'},
{'name': 'h','id': 'b3','sex': 'g','age': '3'},
{'name': 'k','id': 'b4','sex': 'b','age': '4' }
]

var UI = {};
UI.Grid = {};
//className
function createTable(current,o){
var div = document.createElement('div');
div.style.width = '90%';
div.style.padding = '0';
for(var i = 0; i < o.data.length ; i++){

var div1 = document.createElement('div');
div1.style.width = '250px';
div1.style.height = '300px';
div1.style.cssFloat = 'left';
div1.style.padding = '0';
var ul = document.createElement('ul');
var li1 = document.createElement('li');
var li2 = document.createElement('li');
var li3 = document.createElement('li');
var div2 = document.createElement('div');
div2.style.width = '220px';
div2.style.height = '200px';
div2.style.backgroundColor = '#f6f6f6';
li1.appendChild(div2);
var div3 = document.createElement('div');
div3.style.width = '220px';
div3.style.height = '35px';
div3.style.backgroundColor = '#dddddd';
div3.innerHTML = '<p>'+o.data[i].name+'</p>';
li2.appendChild(div3);

var div4 = document.createElement('div');
div4.style.width = '220px';
div4.style.height = '35px';
div4.style.backgroundColor = '#f6f6f6';
div4.innerHTML = '<p>'+o.data[i].sex+'</p>';
li3.appendChild(div4);
ul.appendChild(li1);
ul.appendChild(li2);
ul.appendChild(li3);
div1.appendChild(ul);
div.appendChild(div1);
}
current.appendChild(div);
}

$.fn.creatSth = function(o){
UI.Grid[o.id] = o ;
var current = this[0];
var table = document.createElement('table');
table.style.cssText = 'width:100%;border-collapse:collapse;border: 1px solid #DDDDDD;';

//line 1
var tr1 = document.createElement('tr');
tr1.style.height = '8px';
var td11 = document.createElement('td');
td11.style.width = '8px';
var td12 = document.createElement('td');
var td13 = document.createElement('td');
td13.style.width = '8px';
tr1.appendChild(td11);
tr1.appendChild(td12);
tr1.appendChild(td13);

// toolbar - line
var trbar = document.createElement('tr');
trbar.style.height = '15px';
var tdbar1 = document.createElement('td');
var tdbar2 = document.createElement('td');
var tdbar3 = document.createElement('td');
tdbar2.innerHTML = '123123';
trbar.appendChild(tdbar1);
trbar.appendChild(tdbar2);
trbar.appendChild(tdbar3);

//line 2
var tr2 = document.createElement('tr');
var td21 = document.createElement('td');
td21.style.width = '8px';
var td22 = document.createElement('td');
createTable(td22,o);
var td23 = document.createElement('td');
td23.style.width = '8px';
tr2.appendChild(td21);
tr2.appendChild(td22);
tr2.appendChild(td23);

//line 3
var tr3 = document.createElement('tr');
tr3.style.height = '8px';
var td31 = document.createElement('td');
td31.style.width = '8px';
var td32 = document.createElement('td');
var td33 = document.createElement('td');
td33.style.width = '8px';
tr3.appendChild(td31);
tr3.appendChild(td32);
tr3.appendChild(td33);

table.appendChild(tr1);
if(o.tbar){
table.appendChild(trbar);
}
table.appendChild(tr2);
table.appendChild(tr3);
current.appendChild(table);
};

$('#test').creatSth({
id:'tb1',
cloum:[
{head:'name',datafield:'name'},
{head:'id',datafield:'id'},
{head:'sex',datafield:'sex'},
{head:'age',datafield:'age'}
],
data:_data
});

});

Ⅷ extjs中 如何兩列布局表單 在線等

你這種情況不應該使用column來布局，column是一種自適應的布局，應該使用table或者hbox布局，拿做例子，會更適合你這情況：

varform=Ext.create('Ext.form.Panel',{
layout:{
type:'table',
columns:2,//每行有幾列
//默認樣式
tableAttrs:{
style:"width:100;height:40;"
}
},
initComponent:function(){
varme=this;

Ext.applyIf(me,{
items:[
{
xtype:'numberfield',
name:'1',
colspan:1//表示佔用幾列
}，
{
xtype:'numberfield',
name:'2',
colspan:1
}
//.........
]
});

me.callParent(arguments);
}
})

Ⅸ extjs怎樣根據後台傳遞的json數據動態生成grid表格

store 在ext里叫數據存儲器，你上面寫的太繁復，ext提供高級store
首先你要弄清楚這個過程：
store 的load函數會觸發數據存儲器根據httpProxy設定的url去請求數據，請求回來的數據，要用數據讀取器Reader對象，比如用你的JsonReader,每一條數據對應一個Ext.data.Record對象，你第三個問題問reader里的數組有什麼用，它是Ext.data.Record的簡寫，你可以把那個數組寫成一下這樣來代替你的那個數組，不過通常為了簡單起見我們都寫簡寫

12345678910111213

var RecordTemplate = new Ext.data.Record.create([ /* name對應的值就是存儲在本條record中的key值，當你需要 * 從某一條數據中取出某個欄位是，你就必須用這個key */ {name: 'firstname'}, /* 上面說name對應的值你讀取後的key索引值，那 * mapping對應的值就是你從後台請求回來的每一條數據元素中的一個key, * 意思就是，我從請求回來的數據中讀取 * key為occupation的值存儲在store 中一條record的job索引key中 */ {name: 'job', mapping: 'occupation'} });

http proxy
1>.SimpleStore = Store + MemoryProxy + ArrayReader 用作讀取靜態本地數據
2>.JsonStore = Store + HttpProxy + JsonReader 用作讀取後台json信息

123456

var ds = new Ext.data.JsonStore({ url:"", //請求地址 paramNames:{arg0:0}, //提交請求，附帶的參數,通常你需要使用分頁，排序，可以在這里 fields:["key"],//對應Reader里返回json對象中的每個key,在grid里也對應ColumnModel列模型中的dataIndex});

2，返回的json數據必須有數量count這個變數嗎？直接是條目的列表不行嗎？
答：不用必須，這個count是完全自定義的，你需要分頁工具條時，需要指定總共多少條數據，需要一個欄位存儲總條數數據，至於是count，還是total,只要和你後台返回的json中去取值時對應就可以了，分頁工具條，會以count作為key在你請求回來的json去取值。這是一個前後和後台的約定欄位，只要保持一致，起什麼名字都無關。
直接是條目的列表是行的。其實 重要的你要理解 前台 和 後台 的約定，這不是說那一邊行不行，你前台定義了什麼樣的格式來讀，你後台就要提供什麼樣的數據，不然讀不到數據，響應，你後台提供了什麼樣的數據格式，前台就要按照這個格式來讀。 這是 一種約定，而數據格式是完全可以自定義的。那麼你安裝xml格式都可以。如果你使用的讀取器前台控制項規定了讀取方式，那麼你 後台返回的數據就要嚴格按照這種格式來組織。不然你後台返回的數據，前台不認識就無法讀取，這是有嚴格邏輯的。
你可以把 root:"",totalRecords:"",id:;"" 這都都不要，後台返回的數據 是json Array,就是你說的條目列表就可以了。