Develop Reference

How to update a Ext.form.ComboBox store (simple store) once created in a Ext.window (Extjs)

I tried the find a solution of my case on the sencha forms, but no success :(
I'm a beginner on js and Extjs 3.4, I'm trying to use Ext.form.ComboBox in a Ext.window to show the list of js objects (layers). the problem is when I create the window the first time and I click on the ComboBox trigger I get my layers list correctly, but when I remove or add a layer, and I click again on the trigger the store don't update and I find the same list :(((
Can you please help me to find a solution to this problem, for example when I click on the trigger it will update and load the new list store ?
Any suggestion is welcome,
Thank you in advance !
Here is a part of the code :
createWindow: function() {
var FIELD_WIDTH = 250,
base = {
forceSelection: true,
editable: true,
allowBlank: true,
triggerAction: 'all',
mode: 'local',
labelSeparator: OpenLayers.i18n("labelSeparator"),
valueField: 'value',
displayField: 'text',
labelWidth: 300
};
var addComboxFieldItemsWCS = function() {
layer_liste_WCS = [];
var empty = true ;
layerStore.each (function (record) {
var layer = record.get('layer');
var queryable = record.get('queryable');
// var type = record.get('type');
var hasEquivalentWCS = record.hasEquivalentWCS()
if (queryable && hasEquivalentWCS) {
empty = false;
var ObjectRecordType = Ext.data.Record.create(['text', 'value']);
var rec = new ObjectRecordType({ text: layer.name, value:record })
console.log(rec.data.value)
var liste = [rec.data.text, rec.data.value];
layer_liste_WCS.push(liste)
}
}) ;
if (empty) {
var ObjectRecordType = Ext.data.Record.create(['text', 'value']);
var rec = new ObjectRecordType({ text: "No based WCS layer !", value:"" })
var liste = [rec.data.text, rec.data.value];
layer_liste_WCS.push(liste)
disabled: true
}
};
addComboxFieldItemsWCS();
var WCS_store = new Ext.data.SimpleStore({
autoLoad: true,
fields: ['text','value'],
data: layer_liste_WCS
});
ImageField = new Ext.form.ComboBox(Ext.apply({
name: "Image_ref",
fieldLabel: OpenLayers.i18n("Spot Image Input (Required)"),
// fieldLabel: WPS_config.img.title, // From WPS Server
emptyText: OpenLayers.i18n("Select your Image"),
autoDestroy: true,
width: FIELD_WIDTH,
triggerAction: 'all',
queryMode: 'local',
store: WCS_store,
}, base));
return new Ext.Window({
title: OpenLayers.i18n("addon_wpsjussie_title"),
closable: true,
resizable: false,
shadow: false,
closeAction: 'hide',
region: "center", //"north","south","east","west"
width: 480,
height: 190,
iconCls: 'wind_icon',
plain: true,
layout: 'border',
buttonAlign: 'right',
layout: 'fit',
listeners: {
show: function() {
this.el.setStyle('left', '');
this.el.setStyle('top', '');
}
},
items: [{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
width: 50,
height:20,
items: [{ // we will declare 3 tabs
title: OpenLayers.i18n('Datas Inputs'),
closable:false,
iconCls: 'input_icon',
active: true,
items:[{
xtype: 'form',
autoWidth: true,
labelWidth: 185,
bodyStyle: "padding:10px;",
items: [
ImageField,
]
}]
}]
}],
});
},

first you need to set up a 'click' listener.
Every time it's performed, you have to reload the store 'WCS_store' :
WCS_store.load({ params: { param_1: value_1, param_2: value_2, etc...} });
Let me know if It works.

Here is the solution !
store: myArrayStore,
listeners:
{
beforequery:function() {
addComboboxItemsWFS();
this.store.clearData();
this.store.loadData(my_data);
}
}

Drag and Drop issue in Rally Grid

I have an issue in my recent implemented Rally Grid.
_CreatePSIObjectiveGrid: function(myStore) {
if (!this.objGrid) {
var colCfgs = [{
text: 'ID',
dataIndex: 'DragAndDropRank',
width: 50
}, {
text: 'Summary',
dataIndex: 'Name',
flex: 1
}, {
text: 'Success Rate',
dataIndex: 'c_SuccessRate',
width: 200
}];
if (!this.getSetting("useSuccessRatioOnly")) {
colCfgs.push({
text: 'Initial Business Value',
dataIndex: 'PlanEstimate',
width: 200
});
colCfgs.push({
text: 'Final Business Value',
dataIndex: 'c_FinalValue',
width: 200
});
}
this.objGrid = Ext.create('Rally.ui.grid.Grid', {
store : myStore,
enableRanking: true,
defaultSortToRank: true,
height: 550,
overflowY: 'auto',
margin: 10,
showPagingToolbar: false,
columnCfgs : colCfgs
});
Ext.getCmp('c-panel-obj-crud-table').add(this.objGrid);
}
}
Although I have set "enableRanking" to "true", the ranking drag and drop doesn't work if I add my grid to a component. However, the drag and drop function does work perfectly if I change the last statement from
Ext.getCmp('c-panel-obj-crud-table').add(this.objGrid);
to
this.add(this.objGrid);
I don't know if this is a Rally bug. Try to compare the final html file generated, no clue is found.

this few sec video shows that the code below, where a rankable grid is added to a child panel, and not directly to this (this points to the app's global scope) still preserves its ability to rerank:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var panel = Ext.create('Ext.panel.Panel', {
layout: 'hbox',
itemId: 'parentPanel',
componentCls: 'panel',
items: [
{
xtype: 'panel',
title: 'Panel 1',
width: 600,
itemId: 'childPanel1'
},
{
xtype: 'panel',
title: 'Panel 2',
width: 600,
itemId: 'childPanel2'
}
],
});
this.add(panel);
this.down('#childPanel1').add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Owner'
],
context: this.getContext(),
enableRanking: true,
defaultSortToRank: true,
storeConfig: {
model: 'userstory'
}
});
}
});

Ext.getCmp undefined

Though i checked other posts about the same question, they didn't prove to be much helpful.
Below is the code where i am trying to get value of text box but i am repeatedly getting same error.
Is there any alternative method available.
initComponent: function() {
this.items = [
{
xtype: 'form',
padding: '5 5 0 5',
border: false,
style: 'background-color: #fff;',
fieldDefaults: {
anchor: '100%',
labelAlign: 'left',
allowBlank: false,
combineErrors: true,
msgTarget: 'side'
},
items: [
{
xtype: 'textfield',
name : 'id',
fieldLabel: 'id',
hidden:true
},
{
xtype: 'textfield',
name : 'name',
id : 'idname',
fieldLabel: 'Name',
allowBlank:false,
blankText:'Name is required'
},
{
xtype: 'textfield',
name : 'accno',
maxLength: 16,
enforceMaxLength : true,
regex: /^.{16}$/,
regexText:'Only 16 Digits please',
//autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '10'},
fieldLabel: 'AccNo'
},
{
xtype: 'textfield',
name : 'trade',
fieldLabel: 'Trade'
},
{
xtype: 'datefield',
name : 'doi',
fieldLabel: 'Date Of Insurance',
editable: false,
value : new Date()
},
{
xtype: 'datefield',
name : 'dd',
fieldLabel: 'Due Date',
editable:false,
value : new Date()
}
]
}
];
this.dockedItems = [{
xtype: 'toolbar',
dock: 'bottom',
id:'buttons',
ui: 'footer',
items: ['->', {
iconCls: 'icon-save',
itemId: 'save',
text: 'Save',
handler: function (button) {
Ext.Msg.alert('You clicked the button');
var txt = Ext.getCmp('idname').value();
//var tf = button.up('window').down('#idname');
Ext.Msg.alert(txt);
},
action: 'save'
},{
iconCls: 'icon-reset',
text: 'Cancel',
scope: this,
handler: this.close
}]
}];
this.callParent(arguments);
}
});

I would try the Ext.ComponentQuery.query method
on your button to check
xtype: 'toolbar',
dock: 'bottom',
id:'buttons',
ui: 'footer',
items: ['->', {
iconCls: 'icon-save',
itemId: 'save',
text: 'Save',
scope:this,
handler: function (button) {
Ext.Msg.alert('You clicked the button');
var txtfield = this.query('#idname');
var txt = txfield.getValue();
Ext.Msg.alert(txt);
},
action: 'save'
}

Ext Window with custom template

I'd like to create a popup window, that'll have some custom template. The basic functionality is to have some text in header, then form, progressbar and buttons. Problem is that my custom template is rendered at the very end and doesn't really fit in the popup. What is the proper approach for this ? Any examples available anywhere ?
My shortened code :
Ext.define('MyTooltip', {
extend : 'Ext.window.Window',
title: 'Mywindow',
closeAction: 'hide',
width: 300,
height: 300,
layout: 'fit',
resizable: false,
draggable: true,
modal: true,
items: [],
data: {
bar: 'foo'
},
tpl : Ext.create('Ext.XTemplate', '<div class="tooltip"><h1>{bar}</h1><div>{form}</div></div>', {compiled: true}),
initComponent: function(){
var me = this;
//Create items
var progressBar = Ext.create('Ext.ProgressBar', {
text: 'Progress...',
width: 250,
animate: true,
hidden: true,
id: 'widget-progressbar'
});
me.items = [
Ext.create('Ext.form.Panel',{
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,
fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
items: [
{
width: 50,
xtype: 'combo',
mode: 'local',
value: 'Audi',
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Cars',
name: 'cars',
queryMode: 'local',
store: ["Audi", "BMW", "Citroen"]
},
progressBar
],
buttons: [
{
text: 'Start',
handler: function() {
},
scope: this
}
]
})
]
me.callParent(arguments);
}
});
EDIT
Following first answer tried to change my initComponent method, but how can I get my items rendered into tpl, or html ?
initComponent: function(){
(...)
me.callParent(arguments);
var tpl = Ext.create('Ext.XTemplate',
'<div>'+
'<div><h3>Available cars</h3>'+
'<div>{form}'+
'</div>'+
'</div>',
{compiled: true}
);
this.html = tpl.apply({
form: me.form.html
});
},

I would not go with using custom tpl property. It all depends on how are you planning to use this base class. In my projects I put common logic inside initComponent() constructor - like creating same toolbar for all child views.

ExtJs Grid in TabPanel auto Fit issue

I am having problems redering an grid in a a tab panel (Its made with Ext Designer.). the hierarchy is as follows ,
Viewport. -> tabPanel -> Panel -> Container -> Grid.
This is how its displayed now
Here is the code for viewport
mainWindowUi = Ext.extend(Ext.Viewport, {
layout: 'border',
id: 'mainWindow',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'Navigation',
region: 'west',
width: 200,
frame: true,
split: true,
titleCollapse: true,
collapsible: true,
id: 'navigation',
items: [
{
flex: 1,
xtype: 'mytreepanel'
}
]
},
{
xtype: 'tabpanel',
layoutOnTabChange: true,
resizeTabs: true,
defaults: {
layout: 'fit',
autoScroll: true
},
region: 'center',
tpl: '',
id: 'mainTabPanel',
layoutConfig: {
deferredRender: true
}
}
];
mainWindowUi.superclass.initComponent.call(this);
}
});
here is the code to create the tab.. (created from a nav panel programmatically)
var currentTab = tabPanel.findById(node.id);
// If not yet created, create the tab
if (!currentTab){
currentTab = tabPanel.add({
title:node.id,
id:node.id,
closable:true,
items:[{
xtype: 'phasePanel',
layout: 'fit',
autoscroll: true,
}],
autoScroll:true,
});
}
// Activate tab
tabPanel.setActiveTab(currentTab);
here is the code for the panel/container/grid
PhasePanelUi = Ext.extend(Ext.Panel, {
frame: true,
layout: 'anchor',
autoScroll: true,
autoWidth: true,
defaults: '',
initComponent: function() {
this.items = [
{
xtype: 'container',
autoScroll: true,
layout: 'fit',
defaults: {
layout: 'fit',
autoScroll: true
},
id: 'gridHolder',
items: [
{
xtype: 'grid',
title: 'Current Phases',
store: 'PhaseStore',
autoDestroy: false,
viewConfig: '',
deferRowRender: false,
autoLoad: '',
ref: '../phaseGrid',
id: 'phaseGrid',
columns: [
{
xtype: 'gridcolumn',
header: 'Name',
dataIndex: 'name',
sortable: true,
width: 200
},
{
xtype: 'gridcolumn',
header: 'Estate',
dataIndex: 'estate_name',
sortable: true,
width: 500
}
]
}
]
}
];
PhasePanelUi.superclass.initComponent.call(this);
}
});
i have tried all sorts of combinations. but just cant get the grid to render correctly any sort of assistance will be appreciated.

Your currentTab needs a layout of 'fit' also... you gave the phasePanel a layout of 'fit' and the container within the phasePanel a layout of 'fit', but you did not give the currentTab a layout of 'fit'...
The layout refers to how child items will be laid out within a container... and not how an item will fit into its container. So if you want an item to fit to its container, set layout:'fit' on the container, not the item.

You must set in the grid autoHeight: true
xtype: 'grid',
title: 'Current Phases',
autoHeight: true,
store: 'PhaseStore',
autoDestroy: false,
viewConfig: '',
deferRowRender: false,
autoLoad: '',
ref: '../phaseGrid',
id: 'phaseGrid',
And you can set in gridView the autoFill and forceFit attributes.

i seem to have solved the issue.
i removed the layout bit completely from the dynamic tab. i guess now it just picks the layout from the defaults. (still peculiar behavior :S)