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.
Related
I have created one iFrame window and in that there is separate ext app.
Win = new Ext.IframeWindow({
id: 'MyWinID',
modal: true,
resizable: true,
title: 'H1',
closable: true,
constrain : true,
});
Win.width = (winWidth / 100) * 90,
Win.height = (winHeight / 100) * 90,
Win.show().center();
On the resize I wanted to access the app which is placed in iFrame.
listeners :{
resize : function(a,b,c){
// How to access element of main at this point. I am trying this
var WinFrame = window.frames['MyWinID']
}
}
My main of iFrame app is
Ext.define('My.view.main.Main', {
extend: 'Ext.panel.Panel',
xtype: 'app-main',
requires: [
'Ext.plugin.Viewport',
'Ext.tab.Panel',
],
controller: 'main',
viewModel: 'main',
layout: 'border',
items: [{
xtype: 'toolbar',
frame: true,
region: 'south',
items: [ some item]
},
{
title: 'App',
itemId: 'selectionPanel',
region: 'west',
xtype: 'panel',
scroll: 'y',
frame: true,
items: []
},
{
xtype: 'panel',
region: 'center',
frame: true,
scrollable: true,
scroll: 'y',
itemId: 'abc',
reference: 'abc',
layout: {
//type: 'anchor',
type: 'vbox',
align: 'stretch'
},
items: []
}]
});
Can you please suggest how to achieve this.
Javascript basic rule:
"global" variables (e.g. Ext) are available in the tree under window and vice versa, so window.Ext.getCmp("MyWinID") and Ext.getCmp("MyWinID") are the same.
Javascript rule for frames:
window.frames[id] contains the selected frame's window element.
Both together yield the answer your question, which can be summarized in this simple example:
window.frames['MyAppFrame'].Ext.getCmp("MyTestContainer").add({
xtype:'button',
handler:function(btn) {
btn.up('form').submit();
}
});
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);
}
}
I am trying to get an instance of my view within the controller. How can I accomplish this. The main reason I am trying to do this is that I have a grid in my view that I want to disable until a selection from a combobox is made so I need to have access to the instance of the view.
Help?
My controller:
Ext.define('STK.controller.SiteSelectController', {
extend: 'Ext.app.Controller',
stores: ['Inventory', 'Stacker', 'Stackers'],
models: ['Inventory', 'Stackers'],
views: ['scheduler.Scheduler'],
refs: [{
ref: 'stackerselect',
selector: 'panel'
}],
init: function () {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
/* render all default functionality */
onPanelRendered: function () {
var view = this.getView('Scheduler'); // this is null?
}
});
My view:
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '/extjs/examples/ux');
Ext.require([
'Ext.ux.grid.FiltersFeature',
'Ext.ux.LiveSearchGridPanel']);
var filters = {
ftype: 'filters',
autoReload: false,
encode: false,
local: true
};
Ext.define('invtGrid', {
extend: 'Ext.ux.LiveSearchGridPanel',
alias: 'widget.inventorylist',
title: 'Inventory List',
store: 'Inventory',
multiSelect: true,
padding: 20,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'invtGridDDGroup',
dropGroup: 'stackerGridDDGroup'
},
listeners: {
drop: function (node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('ordNum') : ' on empty view';
}
}
},
features: [filters],
stripeRows: true,
columns: [{
header: 'OrdNum',
sortable: true,
dataIndex: 'ordNum',
flex: 1,
filterable: true
}, {
header: 'Item',
sortable: true,
dataIndex: 'item',
flex: 1,
filterable: true
}, {
header: 'Pcs',
sortable: true,
dataIndex: 'pcs',
flex: 1,
filterable: true
}]
});
Ext.define('stackerGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.stackerselect',
title: 'Stacker Select',
store: 'Stacker',
padding: 20,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'stackerGridDDGroup',
dropGroup: 'invtGridDDGroup'
},
listeners: {
drop: function (node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('ordNum') : ' on empty view';
}
}
},
columns: [{
header: 'OrdNum',
dataIndex: 'ordNum',
flex: 1
}, {
header: 'Item',
dataIndex: 'item',
flex: 1
}, {
header: 'Pcs',
dataIndex: 'pcs',
flex: 1
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Submit',
action: 'submit'
}, {
text: 'Reset',
action: 'reset'
}]
}, {
xtype: 'toolbar',
dock: 'top',
items: [{
id: 'combo',
xtype: 'combobox',
queryMode: 'local',
fieldLabel: 'Stacker',
displayField: 'stk',
valueField: 'stk',
editable: false,
store: 'Stackers',
region: 'center',
type: 'absolute'
}]
}]
});
Ext.define('STK.view.scheduler.Scheduler', {
extend: 'Ext.panel.Panel',
alias: 'widget.schedulerview',
title: "Scheduler Panel",
layout: {
type: 'column'
},
items: [{
xtype: 'inventorylist',
width: 650,
height: 600,
columnWidth: 0.5,
align: 'stretch'
}, {
xtype: 'stackerselect',
width: 650,
height: 600,
columnWidth: 0.5
}]
});
As I said, Extjs creates getter for your views (those listed in the controller's view array) and you get access to them:
var view = this.getSchedulerSchedulerView();
Once you have the view reference you can do this to get access to the contained grid:
var grid = view.down('.inventorylist');
grid.disable();
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)
I am trying to learn Extjs and I am immediately coming up with an issue. My Html has ext-base.js and ext-all.js correctly included. I then have the following in my js file:
Ext.BLANK_IMAGE_URL = '<%= Url.Content("~/Content/ext/images/default/s.gif") %>';
Ext.ns('MyNamespace');
Ext.onReady(function() {
alert("onReady() fired");
});
So far everything is working, no errors and the alert is thrown correctly. I then add the following code after onReady:
MyNamespace.BaseLayout = Ext.Extend(Ext.Viewport({
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
html: '<p>North</p>'
}
})
]
}));
This causes the following javascript error in chrome:
Uncaught TypeError: Object #<an Object> has no method 'addEvents' ext-all.js:7
Ext.Component ext-all.js:7
Ext.apply.extend.K ext-base.js:7
Ext.apply.extend.K ext-base.js:7
Ext.apply.extend.K ext-base.js:7
(anonymous function) MyApp.js:13 (pointing to the Ext.Extend line)
If I take the Viewport code and put it directly into the OnReady function it (like the following)
Ext.onReady(function () {
var bl = new Ext.Viewport({
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
html: '<p>North</p>'
}
})
]
});
});
It works. Can anyone clue me in to what I am doing wrong with the Extend method?
To fix your code, the issue is simply bad syntax in the Extend statement. You need a comma after Ext.Viewport, not an extra () pair:
MyNamespace.BaseLayout = Ext.Extend(Ext.Viewport, {
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
html: '<p>North</p>'
}
})
]
});
However, I'd suggest taking #r-dub's advice and reading up more on what you're trying to do.
Here's a bit more complicated example of what you're trying to accomplish. I'd strongly suggest taking a look at Saki's 3 part series in building large apps with ExtJS, it'll help you understand how it use extend properly to create re-usable components.
Ext.ns('MyNamespace');
MyNamespace.BaseLayout = Ext.extend(Ext.Viewport, {
initComponent:function() {
var config = {
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
html: '<p>North</p>'
}
})
]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
MyNamespace.BaseLayout.superclass.initComponent.apply(this,arguments);
}//end initComponent
});
//this will give you an xtype to call this component by.
Ext.reg('baselayout',MyNamespace.BaseLayout);
Ext.onReady(function() {
new MyNamespace.BaseLayout({});
});
ExtJS recommend the use of define instead of extend. Here is how a similar example works with define:
Ext.define('Grid', {
extend: 'Ext.grid.Panel',
config: {
height: 2000
},
applyHeight: function (height) {
return height;
}
});
new Grid({
store: store,
columns: [{
text: 'Department',
dataIndex: 'DepartmentName',
renderer: function (val, meta, record) {
return '' + record.data.DepartmentName + '';
},
width: 440,
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Department Code',
dataIndex: 'DepartmentKey',
width: 100,
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Main Phone',
dataIndex: 'MainPhone',
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Room',
dataIndex: 'RoomLocation',
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Hideway Location',
dataIndex: 'HideawayLocation',
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Hideway Phone',
dataIndex: 'HideawayPhone',
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Has OEC',
dataIndex: 'OECFlag',
xtype: 'checkcolumn',
width: 50,
filter: {
type: 'boolean',
active: true
},
flex: 1,
sortable: true,
hideable: false
},
{
text: 'Action',
dataIndex: 'ID',
renderer: function (value) {
return 'Edit';
},
hideable: false
}],
forceFit: false,
split: true,
renderTo: 'departmentSearchGrid',
frame: false,
width: 1300,
plugins: ['gridfilters']
});
I used the following post as a reference:
http://docs.sencha.com/extjs/5.0/core_concepts/classes.html