I am using following code to create a form in my application.
var startAddressPanel = new Ext.form.FormPanel({
title: 'Address',
fullscreen: true,
scroll: 'vertical',
id: 'start_address',
defaults: {
labelWidth: '30%'
},
items: [txtFromStreet,
txtFromCity,
selFromProvince,
txtFromPostalCode,
selFromCountry]
});
In the resultant form each field has a small gap underneath.
Any suggestions.
Increase the labelWidth percentage until the gap no longer exists.
Related
How can I display all items in Ext.List that are nested in Ex.Panel dynamically,
that means the height of nested Ext.List must be dynamic, and how to add a scrollbar for parent, that is Ex.Panel?
Thanks!
Ext.define('framework.view.ShoppingCart', {
extend: 'Ext.Panel',
alias : 'widget.ShoppingCart',
id: 'ShoppingCart',
requires: [
],
config: {
autoDestroy: true,
fullscreen : true,
items: [
{
xtype: 'fieldset',
id: 'shoppingCartItemsTitle',
title: Util.getMessageInner('mstore_item_list',null,0),
height : 27,
border: 0,
margin: "10 10 6 10",
cls: 'items_hided'
},
{
xtype : 'list',
itemId : 'itemList2',
id: 'itemList2',
autoDestroy: true,
selectedCls: 'x-item',
scrollable: 'vertical',
height : '100%',
itemTpl: new Ext.XTemplate(
'<div class="as_icon_list as_icon_list_bg height_68">',
' <div style="margin:7px 0 0 10px; float:left">',
'<div style="display:block;">{gName}</div>',
'<div style="display:block;">',
ASVari.appInfo.currencyName + ' {[Util.formatMoney(values.gPrice)]} × ',
'{gQuantity}',
'</div>',
'</div>',
'</div>'
)
}
]
}
});
I am not sure what it is that you are trying to accomplish...
As far as dynamically setting the data dynamically, you can use the getData() and setData(), getHeight() and setHeight() method for Ext.Panel() and Ext.data.List().
Based on some event you can listen for in a controller you could get all the properties from one view and set them into another view.
For 'how to add a scrollbar for parent, that is Ex.Panel?' I'm really unsure about what you are asking but I think you are looking for something like a scrollable container with items next to a static container that contains a details view.
If that is the case check out the hbox layout. You would do something drop a list with flex : 1 next to a container with details and flex : 5 (or whatever). You would then listen for itemTap on the list and load the container view with the desired data.
Sorry that this was brief but with such a vague question I didn't want to spend the time answering a question you weren't asking.
Please let me know how I might get you some better information.
Good Luck,
Brad
I would like to hide clear icon from textbox in sencha control through code.
How to do it?
Please provide sample code.
Thanks
Try this ::
{
xtype : 'textfield',
clearIcon : false,
name : 'name',
id : 'whatever'
}
There's a config property called clearIcon that you can toggle.
You can add this to you global CSS
.x-field-clearable.clear-icon-hidden .x-field-input .x-clear-icon {
display: none;
}
and then when you want to hide the clear icon of a field you just get your field and do
field.addCls('clear-icon-hidden');
Hope this helps
You can simply set the clearIcon config to false. Like this,
Ext.getCmp('ID OF THE TEXTFIELD').setClearIcon(false);
Example:
xtype: 'fieldset',
title: 'MyFieldSet',
items: [
{
xtype: 'textfield',
id: 'textfield1',
label: ''
},
Solution:
Ext.getCmp('textfield1').setClearIcon(false);
Since I'm not sure what version of Ext JS this was pertaining to, here is an update for Ext JS 6.5.x as it no longer uses clearIcon.
{
xtype: 'textfield',
itemId: 'tfLastName',
label: 'Last Name',
value: 'Allord',
*clearable: false*,
editable: false
},
This is also for the modern toolkit, per Sencha documentation; the classic toolkit doesn't have this feature.
I am using extjs 4.0.7. I have a requirement wherein I have two combo boxes in the edit mode of a grid and I need to change the data in the second based on the value selected in the first one.
I am using MVC architecture for extjs and a java code that returns json string to populate data in the combo boxes. The code for my first combo box is:
view file:
items: [{
id: 'country',
header: 'Countries',
field: {
xtype: 'combo',
store: [
["USA","USA"],
["India","India"],
],
editable: false,
allowBlank: false,
listeners: {
select: function(combo, records, eOpts){
contactTypeGrid = combo.getValue();
myGrid.fireEvent('LoadStateOnSelect');
}
}
}
},
{
id: 'states',
header: 'Sates',
dataIndex: 'states',
field: {
xtype: 'combo',
store: 'StateStore',
valueField: 'stateDesc',
displayField: 'stateText',
}
}, ....
]
controller:
LoadStateOnSelect: function(){
contactTypeGrid = contactTypeGrid.toLowerCase();
var stateStore = this.getStateStoreStore();
stateStore.getProxy().url = "myURL.do";
stateStore.getProxy().extraParams.act = contactTypeGrid;
stateStore.load();
},
However, when I run this code, the data in the second store changes in the background but a Loading mask continues to appear in front due to which I cannot select any value.
How should I resolve the issue of connditional data load? Any help will be much appreciated.
Have you tried clearing the selected value in the combobox before reloading the store? You could try calling the clearValue() method on the combo.
I have a temporary fix for this. However, I am still looking for a solution that is more stable and workable.
Solution:
Whenever changing the data in the dependant store you could expand the combo box which loads the new data correctly.
LoadStateOnSelect: function(){
contactTypeGrid = contactTypeGrid.toLowerCase();
var stateStore = this.getStateStoreStore();
stateStore.getProxy().url = "myURL.do";
stateStore.getProxy().extraParams.act = contactTypeGrid;
statesCombo.expand(); //Here I am assuming that "statesCombo" has a
//reference to the dependant combo box.
stateStore.load();
},
This might save somebody else's time however, In case somebody finds a more viable solution, please let me know as well.
carStore- any store for main combo
carModelStore - store, the content of which should be depended on selection in the carStore
Consider more general and useful example when data is getting from server.
var carModelStore = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'car-model'],
root: 'rows'
}),
storeId: 'car-model-store',
proxy: new Ext.data.HttpProxy({
url: 'carmodeldataprovider.json?car-name=lamborghini'
}),
autoLoad: true
});
{ xtype: 'combo', name: 'car-name', fieldLabel: 'Car', mode: 'local', store: carStore, triggerAction: 'all',
listeners: {
select: function(combo, records, eOpts){
var carName = records.get('car-name');
var carModelStore = Ext.StoreMgr.lookup("car-model-store");
carModelStore.proxy.setUrl('carmodeldataprovider.json?car-name=' + carName, false);
carModelStore.reload();
}
}
}
I'm trying to display data in a Panel with this simple example with Sencha Touch 2, but it's not working :
var planetEarth = {
name: "Earth",
mass: 1.00
};
var planetInfo = new Ext.XTemplate("<h2>{name}</h2>mass: {mass}");
var profile = Ext.create('Ext.Panel', {
fullscreen: true,
xtype: 'panel',
layout: 'fit',
data : planetEarth,
tpl: planetInfo
});
Ext.Viewport.setActiveItem(profile);
Any idea why ?
Seems to work for me: http://www.senchafiddle.com/#KxGHo
[edit] To clarify, you need to wait until the document has finished loading before defining and executing any code that's used to build the user interface. Place your code in the application 'launch' method.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
header: 'User Login',
dataIndex: 'user_login',
width:150
},{
header: 'User Name',
dataIndex: 'user_nicename',
width:150
},{
header:'Privledge',
dataIndex:'admin',
width:150
}],
autoScroll: true,
layout:'fit',
selModel: gusersSel,
store: gusersStore
})
Hi I am using above code for the grid Panel in Extjs4.0.2a When I populate data dynamically in the store the scrollbars are not working .
I have also tried using doLayout() for grid Panel but dosent work too .
The grid Panel is in a Window .
Anything that can solve this problem ?
Actually it works for some time but dosen't work all the time .
I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). If you are not going to use infinite scroll the possible solution could be to remove custom scrollbar and use native one. To do that just add the following to the grid's config:
var gusersPanel = Ext.create('Ext.grid.Panel', {
scroll : false,
viewConfig : {
style : { overflow: 'auto', overflowX: 'hidden' }
},
// ...
});
I did gusersPanel.determineScrollbars() when i am adding and removing data from store and it is working fine .
The problem with this is the scroll listener is attached to the div element on the afterrender event, but then if the scrollbar is not needed after a layout operation the div element is removed from the dom. Then, when it's needed again it's added back, but only if enough time has passed the garbage collection makes extjs recreate the div node and this time it's added to the dom without attaching the scroll listener again. The following code solves the problem:
Ext.override(Ext.grid.Scroller, {
onAdded: function() {
this.callParent(arguments);
var me = this;
if (me.scrollEl) {
me.mun(me.scrollEl, 'scroll', me.onElScroll, me);
me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
}
}
});
You written code to layout: 'fit'. It did not work autoScroll.
Change the code to some height and remove layout: 'fit' code.
Like this.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
...........
}],
autoScroll: true,
//layout:'fit',
height: 130,
selModel: gusersSel,
store: gusersStore
It is help you. Cheers.