extjs GridPanel怎么添加ComboBox，TextField等form控件？

就是用extjs键表格。。。   用grid吧。。给你个例子

Ext.onReady(function(){

/**

* Handler specified for the 'Available' column renderer

* @param {Object} value

*/

function formatDate(value){

return value ? value.dateFormat('M d, Y') : ''

}

// shorthand alias

var fm = Ext.form

// the column model has information about grid columns

// dataIndex maps the column to the specific data field in

// the data store (created below)

var cm = new Ext.grid.ColumnModel({

// specify any defaults for each column

defaults: {

sortable: true // columns are not sortable by default

},

columns: [{

id: 'common',

header: 'Common Name',

dataIndex: 'common',

width: 220,

// use shorthand alias defined above

editor: new fm.TextField({

allowBlank: false

})

}, {

header: 'Light',

dataIndex: 'light',

width: 130,

editor: new fm.ComboBox({

typeAhead: true,

triggerAction: 'all',

// transform the data already specified in html

transform: 'light',

lazyRender: true,

listClass: 'x-combo-list-small'

})

}, {

header: 'Price',

dataIndex: 'price',

width: 70,

align: 'right',

renderer: 'usMoney',

editor: new fm.NumberField({

allowBlank: false,

allowNegative: false,

maxValue: 100000

})

}, {

header: 'Available',

dataIndex: 'availDate',

width: 95,

renderer: formatDate,

editor: new fm.DateField({

format: 'm/d/y',

minValue: '01/01/06',

disabledDays: [0, 6],

disabledDaysText: 'Plants are not available on the weekends'

})

}, {

xtype: 'checkcolumn',

header: 'Indoor?',

dataIndex: 'indoor',

width: 55

}]

})

// create the Data Store

var store = new Ext.data.Store({

// destroy the store if the grid is destroyed

autoDestroy: true,

// load remote data using HTTP

url: 'plants.xml',

// specify a XmlReader (coincides with the XML format of the returned data)

reader: new Ext.data.XmlReader({

// records will have a 'plant' tag

record: 'plant',

// use an Array of field definition objects to implicitly create a Record constructor

fields: [

// the 'name' below matches the tag name to read, except 'availDate'

// which is mapped to the tag 'availability'

{name: 'common', type: 'string'},

{name: 'botanical', type: 'string'},

{name: 'light'},

{name: 'price', type: 'float'},

// dates can be automatically converted by specifying dateFormat

{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},

{name: 'indoor', type: 'bool'}

]

}),

sortInfo: {field:'common', direction:'ASC'}

})

// create the editor grid

var grid = new Ext.grid.EditorGridPanel({

store: store,

cm: cm,

renderTo: 'editor-grid',

width: 600,

height: 300,

autoExpandColumn: 'common', // column with this id will be expanded

title: 'Edit Plants?',

frame: true,

clicksToEdit: 1,

tbar: [{

text: 'Add Plant',

handler : function(){

// access the Record constructor through the grid's store

var Plant = grid.getStore().recordType

var p = new Plant({

common: 'New Plant 1',

light: 'Mostly Shade',

price: 0,

availDate: (new Date()).clearTime(),

indoor: false

})

grid.stopEditing()

store.insert(0, p)

grid.startEditing(0, 0)

}

}]

})

// manually trigger the data store load

store.load({

// store loading is asynchronous, use a load listener or callback to handle results

callback: function(){

Ext.Msg.show({

title: 'Store Load Callback',

msg: 'store was loaded, data available for processing',

modal: false,

icon: Ext.Msg.INFO,

buttons: Ext.Msg.OK

})

}

})

})

你是要在Ext.grid.GridPanel里面嵌入Form吧

1 var grid = new Ext.grid.GridPanel([{

2 cm: new Ext.grid.ColumnModel({

3 header: '',

4 dataIndex: '',

5 //设置列显示值

6 //v:当前列的值

7 //params:当前列的参数

8 //record:当前记录集

9 renderer: function(v, params, record){}

10 }])，

11 form: new Ext.form.FormPanel({

12 }

13 })

14 })

Ext.create('Ext.form.Panel', {

title: 'Simple Form with FieldSets',

labelWidth: 75, // label settings here cascade unless overridden

url: 'save-form.php',

frame: true,

bodyStyle: 'padding:5px 5px 0',

width: 550,

renderTo: Ext.getBody(),

layout: 'column', // arrange fieldsets side by side

defaults: {

bodyPadding: 4

},

items: [{

// Fieldset in Column 1 - collapsible via toggle button

xtype:'fieldset',

columnWidth: 0.5,

title: 'Fieldset 1',

collapsible: true,

defaultType: 'textfield',

defaults: {anchor: '100%'},

layout: 'anchor',

items :[{

fieldLabel: 'Field 1',

name: 'field1'

}, {

fieldLabel: 'Field 2',

name: 'field2'

}]

}, {

// Fieldset in Column 2 - collapsible via checkbox, collapsed by default, contains a panel

xtype:'fieldset',

title: 'Show Panel', // title or checkboxToggle creates fieldset header

columnWidth: 0.5,

checkboxToggle: true,

collapsed: true, // fieldset initially collapsed

layout:'anchor',

items :[{

xtype: 'panel',

anchor: '100%',

title: 'Panel inside a fieldset',

frame: true,

height: 52

}]

}]

})

---