extjs在線demo的簡單介紹

本文目錄一覽：

• 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