自动加载面板监听器 ExtJs
Posted
技术标签:
【中文标题】自动加载面板监听器 ExtJs【英文标题】：Autoload Panel Listener ExtJs 【发布时间】：2015-04-02 02:59:26 【问题描述】：我在 extjs 中有一个带有监听器代码的视图文件，这里是：
initComponent: function()
Ext.apply(this,
title : 'Form Order',
iconCls : 'orderIcon',
width : 850,
maxHeight : 600,
x : 200,
y : 50,
resizable : true,
resizeHandles : 's n',
constrainHeader : true,
closable : true,
modal : true,
autoShow : false,
autoScroll : true,
overflow : 'auto',
layout:
type: 'auto',
align: 'stretch'
,
items: [
this.createPanelMC()
]
);
this.callParent(arguments);
,
createPanelMC: function()
this.requiredSign = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
var panel = Ext.create('Ext.form.Panel',
defaultType: 'textfield',
name: 'nodebPanel',
width: '100%',
layout:
type: 'auto',
align: 'stretch'
,
items: [
xtype : 'fieldset',
name : 'modlayanan',
title : 'Data Pelanggan',
layout : 'column',
width : '95%',
margin : '10',
items: [
xtype : 'textfield',
name : 'nomor',
id : 'nomor',
itemId : 'nomor',
fieldLabel : 'PSTN',
emptyText : 'Nomor...',
margin : '10 0 0 0',
width : 350,
labelWidth : 100,
afterLabelTextTpl: this.requiredSign
,
xtype : 'textfield',
fieldLabel : 'Speedy',
name : 'speedy',
id : 'speedyVal',
itemId : 'speedyVal',
margin : '10 0 10 20',
width : 350,
labelWidth : 100
,
xtype : 'textareafield',
name : 'instaLAddress',
fieldLabel : 'Alamat Instalasi',
emptyText : 'Alamat Instalasi...',
readOnly : true,
labelWidth : 100,
autofocus: true,
//listener
listeners :
render: function()
this.getEl().on('mousedown', function(e, t, eOpts)
var nopstn = Ext.getCmp('nomor').getValue();
var speedy = Ext.getCmp('speedyVal').getValue();
if (nopstn != '' && speedy != '')
var store = Ext.ComponentQuery.query('#treeProduct')[0].getStore();
console.log(store);
store.load(
params:
nopstn: nopstn,
speedy: speedy
);
);
,
this.createTreePaketExist(),
]
]
);
return panel;
,
createTreePaketExist: function()
var storeTree = Ext.create('Ext.data.TreeStore',
proxy:
type: 'ajax',
url: 'data/newoss_get_paket.php',
actionMethods :
create: 'POST', read: 'POST', update: 'POST', destroy: 'POST'
);
var groupProduct = Ext.create('Ext.tree.Panel',
store : storeTree,
itemId : 'treeProduct',
renderTo : Ext.getBody(),
name : 'treeProduct',
rootVisible : false,
useArrows : true,
layout :'fit',
margin : '0 0 0 0',
autoScroll : true,
height : 150,
width : '93%',
listeners:
checkchange: function(node, checked, eOpts)
node.eachChild(function(n)
node.cascadeBy(function(n)
n.set('checked', checked);
);
);
p = node.parentNode;
var pChildCheckedCount = 0;
p.suspendEvents();
p.eachChild(function(c)
if (c.get('checked')) pChildCheckedCount++;
p.set('checked', !!pChildCheckedCount);
);
p.resumeEvents();
);
return groupProduct;
监听器将在createTreePaketExist() 中显示树形面板。问题是..我想在不点击任何东西的情况下显示树面板结果，只在面板加载时显示结果。
在我的代码中，结果将在我将指针放入 textareafield 后显示。它怎么能在没有任何点击的情况下显示，只在面板加载时显示？有人可以帮助我吗？谢谢..
【问题讨论】：
【参考方案1】：我想你之前的Question已经回答了这个问题。
您在这里遇到的问题是您的商店依赖于用户键入的值，因此您的商店在用户完成某些操作之前无法加载。
所以你不能在没有值的情况下自动加载商店，除非你提供默认值来加载商店，然后如果用户输入新信息，它可以用不同的数据重新加载。
如果不知道商店正在处理哪些数据、如何根据用户数据过滤数据、他们可以输入什么数据或您希望他们输入什么数据，就很难对此提供深入的回答。
【讨论】：
好的，我明白了，嗯..如果我把函数放到控制器中，有解决方案吗？ @Scriptable 如果文本字段不为空@Scriptable，我可以给听众吗？ 对不起，我只是看到这个评论，你把函数放在哪里并不重要，关键是商店数据在它有来自用户的参数之前是无效的。不需要真的是函数，只需要一个store，后面可以过滤以上是关于自动加载面板监听器 ExtJs的主要内容，如果未能解决你的问题，请参考以下文章