本文目录一览：
- 1、谁有extjs4选择记录并修改的demo？
- 2、各位同志们，请问这个页面用EXTJS怎么做出来？有没有demo版本的示例啊，求教啊
- 3、extjs官方在线demo究竟怎么看源码
- 4、extjs 根据fieldset的checkBox情况,来全选checkBoxGroup
- 5、谁有 完整的 extjs3.0 demo 后台的例子 ext配合iframe标签使用
谁有extjs4选择记录并修改的demo？
实际extjs自己带的examples里就有的，下面的js你参考下：
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*'
]);
Ext.onReady(function(){
// Define our data model
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
'name',
'email',
{ name: 'start', type: 'date', dateFormat: 'Ymd' },
{ name: 'salary', type: 'float' },
{ name: 'active', type: 'bool' }
]
});
// Generate mock employee data
var data = (function() {
var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
lastLen = lasts.length,
firstLen = firsts.length,
usedNames = {},
data = [],
s = new Date(2007, 0, 1),
eDate = Ext.Date,
now = new Date(),
getRandomInt = Ext.Number.randomInt,
generateName = function() {
var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
if (usedNames[name]) {
return generateName();
}
usedNames[name] = true;
return name;
};
while (s.getTime() now.getTime()) {
var ecount = getRandomInt(0, 3);
for (var i = 0; i ecount; i++) {
var name = generateName();
data.push({
start : eDate.add(eDate.clearTime(s, true), eDate.DAY, getRandomInt(0, 27)),
name : name,
email: name.toLowerCase().replace(' ', '.') + '@sencha-test.com',
active: getRandomInt(0, 1),
salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
});
}
s = eDate.add(s, eDate.MONTH, 1);
}
return data;
})();
// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Employee',
proxy: {
type: 'memory'
},
data: data,
sorters: [{
property: 'start',
direction: 'ASC'
}]
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
saveBtnText:'保存',
cancelBtnText:'取消',
errorsText:'错误',
dirtyText:'必须先保存或放弃修改',
autoCancel: false,
listeners: {
'edit': function(editor, records) {
alert(records.record.data.name);
}
}
});
// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
viewConfig: {
stripeRows: true
},
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
}, {
header: 'Email',
dataIndex: 'email',
width: 160,
editor: {
allowBlank: false,
vtype: 'email'
}
}, {
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
format: 'Ymd',
width: 105,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'Ymd'
}
}, {
xtype: 'numbercolumn',
header: 'Salary',
dataIndex: 'salary',
format: '0,0.00',
width: 90,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
}, {
xtype: 'checkcolumn',
header: 'Active?',
dataIndex: 'active',
width: 60,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
}],
renderTo: 'editor-grid',
width: 600,
height: 400,
title: 'Employee Salaries',
frame: true,
tbar: [{
text: 'Add Employee',
iconCls: 'employee-add',
handler : function() {
rowEditing.cancelEdit();
// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: 'new@sencha-test.com',
start: Ext.Date.clearTime(new Date()),
salary: 50000,
active: true
});
store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}, {
itemId: 'removeEmployee',
text: 'Remove Employee',
iconCls: 'employee-remove',
handler: function() {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
if (store.getCount() 0) {
sm.select(0);
}
},
disabled: true
}],
plugins: [rowEditing],
listeners: {
'selectionchange': function(view, records) {
grid.down('#removeEmployee').setDisabled(!records.length);
}
}
});
});
各位同志们，请问这个页面用EXTJS怎么做出来？有没有demo版本的示例啊，求教啊
我跟你说下思路吧 在家呢 笔记本没带回来，你选中的记录你能获取到吧，然后再按钮那里写个事件，就是把当前选中的一行数据到右边的那个里面去就是store.load()执行这个，差不多就可以了
extjs官方在线demo究竟怎么看源码
这个很简单，网站引用extjs 库，给元素相应的加上extjs的属性或者写js脚本加上方法就行了。 如果你不知道怎么引用，请多看ext js 的实例，官网有说明。
extjs 根据fieldset的checkBox情况,来全选checkBoxGroup
!doctype html
html lang="en"
head
meta charset="UTF-8"
titleExtjs 4.2 demo/title
link rel="stylesheet" href="../resources/css/ext-all.css"
script src="../bootstrap.js"/script
script
Ext.onReady(function(){
Ext.create('Ext.Panel',{
width:450,
items:[{
xtype: 'checkboxgroup',
listeners:{
change:function(gp,nv,ov,eOpts){
// 全选
if(nv.all !ov.all)
return gp.eachBox(function(box,idx){
box.setRawValue(true);
});
// 反选
if(ov.all !nv.all)
return gp.eachBox(function(box,idx){
box.setRawValue(false);
});
}
},
width:'100%',
fieldLabel: 'Auto Layout',
cls: 'x-check-group-alt',
items: [
{boxLabel: '全选', name: 'all'},
{boxLabel: 'Item 1', name: 'cb-auto-1', checked: true},
{boxLabel: 'Item 2', name: 'cb-auto-2'},
{boxLabel: 'Item 3', name: 'cb-auto-3'},
{boxLabel: 'Item 4', name: 'cb-auto-4'}
]
},{
xtype:'button',
text:'GetChecked',
handler:function(){
Ext.Msg.alert('选中数量',String(this.up('panel').items.items[0].getChecked().length));
}
}],
renderTo:Ext.getBody()
});
});
/script
/head
body
/body
/html
谁有 完整的 extjs3.0 demo 后台的例子 ext配合iframe标签使用
Extjs 的Panel放入iframe的三重方法
//way 1 //it works
var frame1 = document.createElement("IFRAME");
frame1.id = "frame1";
frame1.frameBorder = 0;
frame1.src = "reports/empty-report.html";
frame1.height = "100%";
frame1.width = "100%";
var panel2 = new Ext.Panel( {
id : "panel2",
items: [ frame1 ]
//contentEl: "frame1" //this won't work
});
//way 2 //it works, too
var panel2 = new Ext.Panel( {
id: "panel2",
fitToFrame: true,
html: 'iframe id="frame1" src="../examples/layout/table.html" frameborder="0" width="100%" height="100%"/iframe
