how to set Value for extjs textfield? - Stack Overflow
to customize your list.
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
J it only takes a minute:
Join the Stack Overflow community to:
Ask programming questions
Answer and help your peers
Get recognized for your expertise
i have a lot of textfields for userdata. and i wish to set it from DB.
xtype: "form",
bodyPadding: 5,
border: false,
defaults: {
xtype: "textfield",
inputType: "text",
anchor: "100%"
fieldLabel: 'Username:',
readOnly: true,
value: 'Admin',
name: "username"
i have external class named openDB.js with method getUserByUsername()
here is small code how its will be used in other view and it works, but in my actuall view i cant set the Value of textfield. please help how to do that?
openDB.getUserByUsername(user.username).then(function(userDetails) {
me.setTitle("Welcome " + userDetails.mail + "!");
i want to do something like this with
value: 'Admin' and so on...
i found some method on Sencha Forum, but can I use it??
setValue: function(value) {
me.setRawValue(me.valueToRaw(value));
return me.mixins.field.setValue.call(me, value);
2,4591761113
after couple hours of fighting with that -> BEST SOLUTION EVER:
fieldLabel: 'Username:',
id: 'usernameID',
readOnly: true,
value: user.username,
name: "username"
var name = Ext.getCmp('usernameID').setValue('JohnRambo');
2,4591761113
Why not just set up a model and store for your form and use the loadRecord method?
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled李林峰的园子
&&&&&&&&&&&
extjs技术交流，欢迎加群（)
继上一节内容，我们在表单里加了个两个文本框。如下所示代码区的第42行位置，items: [txtusername, txtpassword]。
1.代码如下：
1 &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
2 &html xmlns="http://www.w3.org/1999/xhtml"&
&title&&/title&
&!--ExtJs框架开始--&
&script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"&&/script&
&script type="text/javascript" src="/Ext/ext-all.js"&&/script&
&link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /&
&!--ExtJs框架结束--&
&script type="text/javascript"&
Ext.onReady(function () {
//初始化标签中的Ext:Qtip属性。
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//用户名input
var txtusername = new Ext.form.TextField({
width: 140,
allowBlank: false,
maxLength: 20,
name: 'username',
fieldLabel: '用户名称',
blankText: '请输入用户名',
maxLengthText: '用户名不能超过20个字符'
//密码input
var txtpassword = new Ext.form.TextField({
width: 140,
allowBlank: false,
maxLength: 20,
inputType: 'password',
name: 'password',
fieldLabel: '密码',
blankText: '请输入密码',
maxLengthText: '密码不能超过20个字符'
var form = new Ext.form.FormPanel({
frame: true,
title: '表单标题',
style: 'margin:10px',
html: '&div style="padding:10px"&这里表单内容&/div&',
items: [txtusername, txtpassword]
var win = new Ext.Window({
title: '窗口',
width: 476,
height: 374,
html: '&div&这里是窗体内容&/div&',
resizable: true,
modal: true,
closable: true,
maximizable: true,
minimizable: true,
items: form
win.show();
60 &/head&
64 (1)Ext.QuickTips.init()：QuickTips的作用是初始化标签中的Ext:Qtip属性，并为它赋予显示提示的动作。
65 (2)Ext.form.Field.prototype.msgTarget = 'side'：TextField的提示方式为：在右边缘，如上图所示，参数枚举值为"qtip","title","under","side",id(元素id)，
side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示。
67 (3)var txtusername = new Ext.form.TextField():创建一个新的TextField文本框对象。
68 (4)allowBlank: false：不允许文本框为空。
69 (5)maxLength: 20：文本框的最大长度为20个字符，当超过20个字符时仍然可以继续输入，但是Ext会提示警告信息。
70 (6)name: 'password'：表单名称，这个比较重要，因为我们在与服务器交互的时候，服务端是按name接收post的参数值。
71 (7)fieldLabel: '用户名'：文本框前面显示的文字标题，如&用户名&，&密码&等。
72 (8)blankText: '请输入用户名'：当非空校验没有通过时的提示信息。
73 (9) maxLengthText: '用户不能超过20个字符'：当最大长度校验没有通过时的提示信息。
75 &/body&
76 &/html&
2.效果如下：
3.textfield组件常用的：属性、方法及事件&
allowBlank：是否允许为空，默认为trueblankText：空验证失败后显示的提示信息emptyText：在一个空字段中默认显示的信息grow：字段是否自动伸展和收缩，默认为falsegrowMin：收缩的最小宽度growMax：伸展的最大宽度inputType：字段类型：默认为textmaskRe：用于过滤不匹配字符输入的正则表达式maxLength：字段允许输入的最大长度maxLengthText：最大长度验证失败后显示的提示信息minLength：字段允许输入的最小长度minLengthText：最小长度验证失败后显示的提示信息
阅读(...) 评论()ExtJS中表格控件的使用，属性设置和数据的获取
本文由发表于5年前 |
&被围观 33,335 views+
ExtJS中表格的特性简介
表格由类Ext.grid.GridPanel定义，继承自Ext.Panel，xtype为grid
表格的列信息由Ext.grid.ColumnModel定义
表格的数据存储器由Ext.data.Store定义，根据解析数据的不同，数据存储器可具体分为如下几种：
JsonStore，SimpleStore，GroupingStore…
一个表格的基本编写过程：
1、创建表格列模型
var cm = new Ext.grid.ColumnModel({
{header: '角色', dataIndex: 'role'},
{header: '等级', dataIndex: 'grade'},
{header: '创建日期', dataIndex: 'createDate', type: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日')}
//创建日期类型的数据
2、创建数据数组
var data = [
['士兵','7','2:34:56'],
['将军','10','2:34:56'],
3、创建一个数据存储对象store，包含两部分：proxy，获取数据的方式；reader，解析数据的方式
ArrayReader的mapping用来设置列的排列顺序
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'role', mapping: 1},
{name: 'grade', mapping: 0}
{name: 'createDate', mapping: 2, type:'date', dateFormat:'Y-m-dH:i:s'}
//创建日期列和显示格式
store.load();
4、创建GridPanel，装配ColumnModel和store
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
store: store,
另外获取远程数据可以使用ScriptTagProxy,如下所示
var store = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url:'http://...'}),
reader: new Ext.data.ArrayReader({}, [
{name: 'role', mapping: 1},
{name: 'grade', mapping: 0}
sortInfo: {field: "role", direction: "ASC"}
//设置默认排序列，ASC/DESC
表格的常用属性功能
var grid = new Ext.grid.GridPanel({
enableColumnMove: false, //禁止拖放列
enableColumnResize: false,
//禁止改变列的宽度
stripeRows: true,
//斑马线效果
loadMask: true,
//读取数据时的遮罩和提示功能
renderTo: 'grid',
store: store
var cm = new Ext.grid.ColumnModel({
{header: '角色', dataIndex: 'role', width:90, sortable: true},
//width设置列宽度，默认为100px，sortable设置排序功能
{id:'grade', header: '等级', dataIndex: 'grade', width:40}
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
store: store,
viewConfig:{
//让每列自动填充满表格
forceFit: true
autoExpandColumn: 'grade'
//自动延伸列，列的id在ColumnModel中定义
渲染表格，为表格设置特殊样式
只需要在cm里面增加一个renderer属性，添加一个自定义函数来渲染传进来（由EXT自动传递）的参数的样式即可，即在返回value之前拼装上相应的HTML和CSS或者JS响应事件。
function renderSex(value) {
if (value == 'male') {
return "&span style='color:'&男&/span&&img src='images/icon_male.png' /&";
return "&span style='color:'&女&/span&&img src='images/icon_female.png' /&";
var cm = new Ext.grid.ColumnModel([
{header:'id',dataIndex:'id'},
{header:'name',dataIndex:'name'},
{header:'sex',dataIndex:'sex',renderer:renderSex},
var data = [
['1','Jason','male'],
['2','Kate','female']
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'sex'}
store.load();
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
自动显示行号，只要在创建cm时创建一个RowNumberer就可以了
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
//显示行号
{header:'id',dataIndex:'id'},
{header:'name',dataIndex:'name'},
{header:'sex',dataIndex:'sex',renderer:renderSex},
store.remove(store.getAt(i));
grid.view.refresh();
为表格添加复选框
需要使用CheckboxSelectionModel
SelectionModel sm在使用时要放到cm和表格中
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'}
var data = [
['1','name1'],
['2','name2']
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'}
store.load();
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
通过RowSelectionModel设置只选择一行
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
sm: new Ext.grid.RowSelectionModel({singleSelect:true})
使用选择模型获取数据
grid.on('click', function() {
var selections = grid.getSelectionModel().getSelections();
for (var i = 0; i & selections. i++) {
var record = selections[i];
Ext.Msg.alert(record.get("id"));
从MVC的思想来看表格控件：
* Ext.data.Store可看做模型
* Ext.grid.GridPanel可看做控制器
* Ext.grid.GridView可看做视图
* 一般GridView由GridPanell自动生成，如果想设置GridView的属性时，可以通过Ext.grid.GridPanel的getView()获得视图实例
Ext.get('button1').on('click', function() {
grid.getView().scrollToTop();
grid.getView().focusCell(0, 0);
= grid.getView().getCell(0, 0);
cell.style.backgroundColor = 'red';
使用GridPanel的viewConfig在创建表格时设置GridView的初始化参数
var grid = new Ext.grid.GridPanel({
height: 100,
width: 400,
renderTo: 'grid',
store: new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, meta)
columns: meta,
viewConfig: {
columnsText: '显示的列',
//设置下拉菜单提示文字
scrollOffset: 30,
//设置右侧滚动条的预留宽度
sortAscText: '升序',
//设置下拉菜单提示文字
sortDescText: '降序',
//设置下拉菜单提示文字
forceFit: true
//自动延展每列的长度
为表格添加分页工具条
* 可以使用GridPanel的bbar属性，并创建Ext.PagingToolbar分页工具条对象
* 注意，如果配置了分页工具条，store.load()就必须在构造表格以后执行。
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
autoHeight: true,
store: store,
bbar: new Ext.PagingToolbar({
pageSize: 10,
//每页显示10条数据
store: store,
displayInfo: true,
//显示数据信息
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
//没有数据时显示的信息
store.load();
从后台脚本获取分页数据
使用HttpProxy传递请求，获取服务器的JSON数据，交给JsonReader解析
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'}
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'page.jsp'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
{name: 'id'},
{name: 'name'}
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
autoHeight: true,
//数据传回来之前高度未知，所以要使用自适应高度
store: store,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录 / 共 {2} 条',
emptyMsg: "没有记录"
store.load({params:{start:0,limit:10}});
如果想让分页工具条显示在表格的顶部，可以使用GridPanel的tbar属性设置添加工具条
让ExtJS在对返回的数据进行分页
* 需要在页面中引入examples/locale目录下的PagingMemoryProxy.js文件
* 再使用PagingMemoryProxy设置代理
var store = new Ext.data.Store({
proxy: new Ext.data.PagingMemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
//在创建GridPanel之后调用
store.load({params:{start:0,limit:3}});
可编辑表格控件EditorGrid的使用
制作一个简单的EditorGrid的步骤
1、定义列ColumnModel，在里面添加editor属性
var cm = new Ext.grid.ColumnModel([{
header: '编号',
dataIndex: 'id',
editor: new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank: false
//不允许在TextField中输入空值
header: '名称',
dataIndex: 'name',
editor: new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank: false
2、准备一个数组
var data = [
['1','Jason'],
['2','Jay']
3、创建Ext.data.Store，设置内存代理，设置ArrayReader解析数组
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'}
4、加载数据，创建EditorGridPanel
store.load();
var grid = new Ext.grid.EditorGridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
为可编辑表格添加和删除数据
1、使用Record的create方法创建一个记录集MyRecord,MyRecord相当于一个类
var MyRecord = Ext.data.Record.create([
{name: 'id', type: 'string'},
{name: 'name', type: 'string'}
store.load();
2、创建EditorGridPanel面板，在属性tbar中创建Ext.Toolbar
var grid = new Ext.grid.EditorGridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
tbar: new Ext.Toolbar(['-', {
//-表示菜单分隔符
text: '添加一行',
handler: function(){
var p = new MyRecord({
grid.stopEditing();
//关闭表格的编辑状态
store.insert(0, p);
//创建的Record插入store的第一行
grid.startEditing(0, 0);
//激活第一行第一列的编辑状态
text: '删除一行',
handler: function(){
Ext.Msg.confirm('信息', '确定要删除？', function(btn){
if (btn == 'yes') {
var sm = grid.getSelectionModel();
//获取表格的选择模型
var cell = sm.getSelectedCell();
//获取选中的单元格
var record = store.getAt(cell[0]);
//通过行号得到store这一行对应的Record
store.remove(record);
//移除数据
为可编辑表格保存修改的结果
在上面例子的基础之上，添加一个保存按钮
text: '保存',
handler: function(){
var m = store.modified.slice(0); //获得store中修改过得数据
for (var i = 0; i & m. i++) {
//验证表格信息是否正确，是否包含空格
var record = m[i];
var fields = record.fields.
for (var j = 0; j & fields. j++) {
var name = fields[j];
var value = record.data[name];
var colIndex = cm.findColumnIndex(name);
var rowIndex = store.indexOfId(record.id);
var editor = cm.getCellEditor(colIndex).
if (!editor.validateValue(value)) {
Ext.Msg.alert('提示', '请检查输入的数据是否正确！', function(){
grid.startEditing(rowIndex, colIndex);
var jsonArray = [];
Ext.each(m, function(item) {
jsonArray.push(item.data);
//把修改过得数据放到jsonArray中
Ext.lib.Ajax.request(
//使用Ajax请求提交给后台
'save_data.jsp',
{success: function(response){
//返回成功
Ext.Msg.alert('信息', response.responseText, function(){
store.reload();
},failure: function(){
//返回失败
Ext.Msg.alert("错误", "服务器保存数据出错！");
'data=' + encodeURIComponent(Ext.encode(jsonArray))
另外store可以设置属性pruneModifiedRecords: true。这样，每次remove或load操作时store会自动清除modified标记，可以避免出现下次提交时还会把上次那些modified信息都带上的现象。
限制表格输入的数据类型
NumberField
header:'ID',
dataIndex:'id',
editor:new Ext.grid.GridEditor(new Ext.form.NumberField({
//NumberField限制只能输入数字
allowBlank: false,
allowNegative: false,
//不能输入减号
maxValue: 10
var comboData = [
['0','Java'],
['1','Android']
header:'ComboBox',
dataIndex:'combo',
editor:new Ext.grid.GridEditor(new boBox({
store: new Ext.data.SimpleStore({
fields:['value','text'],
data: comboData
emptyText: '请选择',
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
readOnly:true
renderer: function(value){
return comboData[value][1];
header:'Date',
dataIndex:'date',
editor:new Ext.grid.GridEditor(new Ext.form.DateField({
format: 'Y-m-d',
minValue: '',
disabledDays: [0, 6],
disabledDaysText: '选择周一到周六之间的日期'
renderer: function(value) {
return value.format("Y-m-d");
属性表格控件PropertyGrid的使用
是在EditorGrid的基础上开发的更智能的高级表格组件
var grid = new Ext.grid.PropertyGrid({
title: '属性表格控件PropertyGrid',
autoHeight: true,
width: 400,
renderTo: 'grid',
viewConfig: {
forceFit: true
"String": "String",
"Date": new Date(Date.parse('07/24/2011')),
"boolean": false,
"float": .01
禁用PropertyGrid编辑功能的方法
grid.on('beforeedit', function(e){
e.cancel =
根据表格的name获取value
grid.store.getById('Jason').get(value);
除了文章中有特别说明，均为IT宅原创文章，转载请以链接形式注明出处。
本文链接：
Java技术交流群：，入门群：学习ExtJS TextField常用方法
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
作者 红领巾 ]
一、属性 fieldLabel：标签名称。 labelWidth：标签宽度。 ID：文件框ID。 二、构造参数 listeners：在对象初始化之前，将一系列事件进行绑定。 三、函数 getCmp(string _id)：得到id为_id的组件对象。 getValue()：得到文件框值。 四、其它 layout：只在在此布局下才能正确显示文件框的标签名，布局的宿主对象必面 是Ext.Container或者Ext.Container的子类。 在应用FormLayout布局时只要在宿主对象的构造参数中指定layout:"form"即可。 五、应用举例 复制代码 代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ renderTo:Ext.getBody(), layout:"form", labelWidth:30, listeners:{ "render":function(_panel){ _panel.add(new Ext.form.TextField({ id:"txt_name", fieldLabel:"姓名" })) ; } }}) ; new Ext.Button({ text:"确 定", renderTo:Ext.getBody(), handler:function(){ alert(Ext.getCmp("txt_name").getValue()) ; } }) ; }) ;
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
坚持是一种品格！
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net9889人阅读
extjs（21）
在开发的很多时候,在调用另一个弹出页面或修改完一个内容后,需及时地反应出来,就这需要在修改后及时的给原有的框框赋值... 实际操作也是很简单,如: Ext.getCmp('listname').setValue(updateitemname); 顺便也记录下网上收集来的一些总结经验.. ExtJS 给textfield赋值的方法总结& 省得忘了不知道去那找了._^ EXT.JS&&
18:37&& 阅读243&& 评论0&& 字号： 大大& 中中& 小小 var value="值"; (1) fs.form.findField(id/name).setValue(value); (2) Ext.get(id/name).setValue(value); (3) Ext.getCmp(id).setValue(value); & 获取form里面的field的三种方法 1)Ext.getCmp('id'); 2)FormPanel.getForm().findField('id/name'); 3)Ext.get('id/name');//前提是FormPanel在界面上显示出来了
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：73516次
排名：千里之外
原创：13篇
转载：49篇
(2)(3)(1)(1)(1)(1)(3)(4)(14)(16)(5)(11)