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,就是你说的条目列表就可以了。