包含extjsdemoonline的詞條

本文目錄一覽：

• 1、轉：新手如何學習ExtJS 4
• 2、ext 點擊左邊的樹，在右邊center區域彈出相應的內容
• 3、動態設置extjs文本框的事件
• 4、誰有extjs4選擇記錄並修改的demo？
• 5、誰有 完整的 extjs3.0 demo 後台的例子 ext配合iframe標籤使用
• 6、本人想要學習extjs…完全不知道如何下手…看一些教程都沒有講原理的…覺的都沒有學到東西。

轉：新手如何學習ExtJS 4

最近運營ExtJS交流群的時候，感觸頗深，我感覺作為一個老手，我有必要介紹一下如何學習這種基礎性問題。新手如何學習ExtJS4？如何入門ExtJS4？如何快速學習ExtJS4？1.仔細閱讀新手教程新手教程是指ExtJS官方文檔中Guides那一系列文章，因為是英文的，新手閱讀起來可能有障礙，為此我特意翻譯了這一系列教程，根據使用頻度我已經差不多把最常用到的教程翻譯完了，後續還將繼續翻譯。

通讀這一系列教程後，你會對ExtJS的基本使用方法有個框架性的了解，你會大體上知道如何實現常用功能。現在我把所有已翻譯的教程列舉在此，記住，認真的讀一定對你有幫助。ExtJS 4 入門ExtJS 4 類系統(Class System)介紹ExtJS MVC架構講解ExtJS 4 布局和容器ExtJS 4 組件詳解ExtJS 4 數據(包)詳解ExtJS 4 Grids 詳解ExtJS 4 表單ExtJS 4 樹2.把官方文檔中的所有Demo都瀏覽一遍做這個事情是為了了解官方Demo中實現了哪些功能，當自己要做一個功能時，有例子照着做是最快的，瀏覽一遍就會對現有的Demo有個大概印象，當你沒有頭緒的時候你的大腦會在後台查找之前的印象的，仔細瀏覽一遍，沒有錯。3.熟讀API Docs(API文檔)最近遇到很多人問問題，把一段自己想當然寫出來的代碼貼上來問為什麼不對，事實上你仔細查一下API文檔就知道，你這種用法ExtJS根本就不支持，當然不對。

使用搜索的好處是：通常可以較快速的解決一些無頭緒的問題

ext 點擊左邊的樹，在右邊center區域彈出相應的內容

不能用href

要on點擊事件

類似

v1.on(“click”, function()

{

obj = Ext.getCmp(“centerTabPanel”);

obj1 = Ext.getCmp(“info1”);

}

動態設置extjs文本框的事件

!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.form.FormPanel’,{

width:250,

bodyPadding: ‘5 5 0’,

fieldDefaults: {

labelWidth: 75

},

items:[{

xtype:’fieldset’,

title: ‘information’,

defaultType: ‘textfield’,

layout: ‘anchor’,

defaults: {

anchor: ‘100%’

},

items :[{

fieldLabel: ‘First’,

name: ‘first’,

listeners:{

change:function(field,nv,ov,opts){

var lastfield = this.getBubbleParent().items.last();

lastfield.$ml  lastfield.un(‘focus’,lastfield.$ml);

lastfield.$ml = function(){

Ext.Msg.alert(‘結果’,Ext.String.format(‘第一個字段的值為:”{0}”,最後一個字段的值為:”{1}”‘,nv,this.value));

};

//設置最後一個textfield的listeners

lastfield.on(‘change’,lastfield.$ml,lastfield);

}

}

},{

fieldLabel: ‘Second’,

name: ‘second’

},{

fieldLabel: ‘Last’,

name: ‘last’

}]

}],

renderTo:Ext.getBody()

});

});

/script

/head

body

/body

/html

誰有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);

}

}

});

});

誰有 完整的 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

本人想要學習extjs…完全不知道如何下手…看一些教程都沒有講原理的…覺的都沒有學到東西。

4.0.x的話最好的資料就是官方幫助文檔了，雖然是英文的，看多了就習慣了，如果你了解javaScript不需要什麼教程，用到什麼就查什麼，時間久了就熟悉了，我也是這樣，非要視頻的話，在技術牛人論壇裏面有前面基礎的10集視頻免費看，新開發的群javaEE_Extjs歡迎新手加入，共同進步