I am creating one window in extjs 3. In window I have a panel in which I am including item with afterrender. I place some button on window including cancle. after clicking on window close button or cancel buttonMy app getting stuck. What will be the possible reason.
My Panel Code :
{
xtype: 'panel',
title : "Records",
bodyStyle: 'background: #dfe8f6;border:#dfe8f6;',
id:'AlteredRecord',
region: 'center',
layout:{
type: 'vbox',
pack: 'start',
align: 'stretch'
},
items:[],
listeners:{
afterrender: function(){
debugger;
var grid = Ext.getCmp('GRID');
var record = grid.getSelectionModel().getSelections();
var actionRecItemsLen = record.length;
var multirfchelper = Ext.getCmp('multirfchelper');
var rec = Ext.getCmp('AlteredRecord');
var recItem = rec.items.items;
var clsName = new Recordrfc(),
for(var i=0;i<actionRecItemsLen; i++){
var sub = record[i].data.USUB;
var clsName = new Recordrfc();
recItem.push(clsName);
this.doLayout();
}
}
},
}
Related
How can I hide the bottom toolbar of agentTypeGridPanel ?
I tried .getDockedComponent('bottomtoolbar').hide() but its not working.
eci.admin.agentType.agentTypePanel = function(attributes){
var agentTypeGridPanel = eci.admin.agentType.agentTypeGrid(attributes);
var fieldsGridPanel = eci.admin.agentType.getFieldsGridPanel(attributes);
var dataPanel = new Ext.Panel({
itemId: 'eciAgentTypeDetails'+eci.admin.agentType.dataTypeId+'-panel',
title : 'Agent Type',
border : false,
//height : 300,
hideHeaders: true,
items : [agentTypeGridPanel, fieldsGridPanel]
});
//eci.admin.agentType.GridPanel.getDockedComponent('bottomtoolbar').hide();
//agentTypeGridPanel.getTopToolbar().hide();
return dataPanel;
};
I think this is what you are looking for.
GridPanel.getDockedItems('toolbar[dock="top/bottom"]').hidden = true;
You need to provide the grid code for further analysis.
So I am new to both Sencha and Javascript. I have been stuck on this for the last couple hours or so. I trying to append a standard HTML5 control to a Sencha ExtJS panel for use within the application. This is the control:
<input type="file" id="files" name="file" />
I found a couple forums that kinda explain how to do it but I am doing something wrong here is what the forums explain:
From the Forums:
Ext.DomHelper.append('parent-div', {tag: 'div', cls: 'new-div-cls', id: 'new-div-id'});
myEl = new Ext.Element(document.createElement('div'));
Ext.Get('par-div').appendChild(myEl);
Here is what I have tried:
Ext.onReady(function ()
{
Ext.DomHelper.append('parent-div', {tag: 'div', cls: 'new-div-cls', id: 'new-div-id'});
var c = Ext.Get('par-div');
//var myEl = new Ext.Element(document.createElement('div'));
//Ext.Get('par-div').appendChild(myEl.dom);
//var mi = document.createElement("input");
//mi.setAttribute('type', 'text');
//mi.setAttribute('value', 'default');
//var myEl = new Ext.Element(mi);
//Ext.Get('par-div').appendChild(myEl);
var viewport = Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [myEl]
});
});
The problem is I have no idea where to add this and how to display it.
Overall I am just trying to take an HTML 5 input control and add it to my Sencha app.
Thanks,
Josh
Update:
cpastore84, Thank you for the reply. So I have a bit of code that pretty much does what you have and works the issue now is that it is putting the input field behind the panel I am trying to place it in:
Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 500,
height: 500,
html: '<p>World!</p>',
renderTo: Ext.getBody(),
listeners:
{
render: function( sender, eOpts )
{
var form = document.createElement('form');
var input = document.createElement('input');
input.name = 'parentNode';
input.type = 'file';
form.appendChild(input);
//var myEl = new Ext.Element(form);
var h = document.getElementById(sender.id);
h.appendChild(form);
alert(h);
}
}
});
You can see the input box appear before the panel is rendered on top. I hope this is something simple to fix. Any idea's?
Update 2:
I have also tried grabbing the innerHTML from the element and replacing a dummy with the input. It does technically work but loses all of the original format when you set the innerHTML to the newly modified version. Any idea why it would do that when only changing one line?
Here is a JSFiddle showing an example.
The script itself is simple. Just pass the parent container's id to the append method:
Ext.DomHelper.append('parent-div', {tag:'input', type:'file', id:'files', name:'file'});
You can add the script to the head of your html file like so:
<html>
<head>
<script type="text/javascript">
Ext.onReady(function() {
Ext.DomHelper.append('parent-div', {tag:'input', type:'file', id:'files', name:'file'});
});
</script>
</head>
<body>
<div id="parent-div"></div>
</body>
</html>
then it will run after the page is loaded.
Update
It's easier to add the field to the panel using the panel's items array rather than try to manipulate the component's DOM directly. Here is an updated JSFiddle showing the relevant items array:
items : [
{
xtype: 'filefield',
name: 'file'
}
]
Update 2
You can render any markup by passing a DomSpec to the component's autoEl config:
{
xtype : 'component',
autoEl: {
tag : 'input',
type: 'file'
}
}
See the updated JSFiddle.
Hey Guys thanks for everyone's support. I was able to figure out how to do this and wanted to post the end all code for everyone. I could not have done it without everyone's help though. I hope this will be of assistance to someone else as well.
var myPanal = Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 500,
height: 500,
renderTo: Ext.getBody(),
items:
[
{xtype: 'datefield',fieldLabel: 'Start date'},
{xtype: 'panel', id: 'pnlTest', html: '<input type="file" id="files" width="500" name="file" />'},
{xtype: 'button', width:75, height: 25, text: 'Read', margin: '5 0 0 5', handler:function()
{
var inputFiles = document.getElementById('files');
var file = inputFiles.files[0];
var start = 0;
var stop = file.size - 1;
var reader = new FileReader();
reader.onloadend = function(evt)
{
if (evt.target.readyState == FileReader.DONE)
{
alert(evt.target.result);
}
};
var blob = file.slice(start, stop + 1);
reader.readAsBinaryString(blob);
}}
]
});
YUI().use('node-event-delegate', 'panel', function(Y){
(function createNewMetadataPanel() {
console.log('creating');
var panelContent = Y.Node.create('<div/>').set('id', 'newMetadataPanelContent');
var widget = Y.Node.create('<div/>').addClass('yui3-widget-bd');
var form = Y.Node.create('<form/>');
var set = Y.Node.create('<fieldset/>');
form.append(set);
widget.append(form);
panelContent.append(widget);
var metaDataName = Y.Node.create('<input type="text"name="metadataName"id="metadataName"placeholder="Please enter a new metadata field">');
var metaDataValue = Y.Node.create('<input type="text"name="metadataValue"id="metadataValue"placeholder="Please enter a new metadata value">');
set.append(metaDataName);
set.append(metaDataValue);
panel2 = new Y.Panel({
srcNode : '#newMetadataPanelContent',
headerContent: 'Add A New Member',
width : 250,
zIndex : 5,
centered : true,
modal : true,
visible : false,
render : false
});
panel2.addButton({
value: 'Create Member',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
e.preventDefault();
addMetaData();
}
});
});
When this code runs, the panel appears as soon as the page loads, at the bottom of the screen. It is not even centered. Shouldn't render : false prevent it from being added to the DOM, and visible : false prevent it from being shown?
Give you #newMetadataPanelContent element the CSS property display:none. Y.Panel will un-hide it when you show your panel.
I've got a bug which needs fixing in my iOS app developed on Appcelerator Titanium.
I've been using customTabBar (available on GitHub) to create a bespoke tabBar and it works great!
The only small issue is that it removes the option to tab on the icons and return to the root window (like a proper native tabBar would do in iOS).
So if I drill down 3 or 4 windows in my app, tapping the tab icon does nothing, I have to navigate back to the beginning by tapping back multiple times.
Here is the full customTabBar.js script I am using:
CustomTabBar = function(settings) {
var tabBarItems = [];
var tabCurrent = 2;
var resetTabs = function() {
for(var i = 0; i < tabBarItems.length; i++) {
// Clear all the images to make sure only
// one is shown as selected
tabBarItems[i].image = tabBarItems[i].backgroundImage;
}
};
var assignClick = function(tabItem) {
tabItem.addEventListener('click', function(e) {
// Just fetching the 'i' variable from the loop
var pos = e.source.pos;
if (tabCurrent == pos) {
// TODO
// Change back to root window, like the native tab action.
// code must go in here
return false;
}
// Switch to the tab associated with the image pressed
settings.tabBar.tabs[pos].active = true;
tabCurrent = pos;
// Reset all the tab images
resetTabs();
// Set the current tab as selected
tabBarItems[pos].image = settings.imagePath + settings.items[pos].selected;
});
};
// Create the container for our tab items
var customTabBar = Ti.UI.createWindow({
height: 48,
backgroundImage:'images/tabbarbackground.png',
bottom: 0
});
for(var i = 0; i < settings.items.length; i++) {
// Go through each item and create an imageView
tabBarItems[i] = Titanium.UI.createImageView({
// background is the default image
backgroundImage: settings.imagePath + settings.items[i].image,
width: settings.width,
height: settings.height,
left: settings.width * i
});
// Pass the item number (used later for changing tabs)
tabBarItems[i].pos = i;
assignClick(tabBarItems[i]);
// Add to the container window
customTabBar.add(tabBarItems[i]);
}
// Display the container and it's items
customTabBar.open();
// Set the first item as current :)
resetTabs();
//tabBarItems[0].image = settings.imagePath + settings.items[0].selected;
tabBarItems[2].image = settings.imagePath + settings.items[2].selected;
return {
hide: function() { customTabBar.hide(); },
show: function() { customTabBar.show(); }
};
};
The function that contains the bit I need adding is already marked up, but is just empty. Here it is:
var assignClick = function(tabItem) {
tabItem.addEventListener('click', function(e) {
// Just fetching the 'i' variable from the loop
var pos = e.source.pos;
if (tabCurrent == pos) {
// TODO
// Change back to root window, like the native tab action.
// code must go in here
return false;
}
// Switch to the tab associated with the image pressed
settings.tabBar.tabs[pos].active = true;
tabCurrent = pos;
// Reset all the tab images
resetTabs();
// Set the current tab as selected
tabBarItems[pos].image = settings.imagePath + settings.items[pos].selected;
});
};
customTabBar places a window (really, just a view) over the existing tab bar. Then it handles clicks that come through. But you must handle the click events to switch between tabs, and as you have noted, track all of the windows that are on the stack.
But you know what? You're working too hard. The platform already does all that for you.
Pass click events through (by disabling touch on the overlay), and the underlying tab group will work its own magic. Then all you need to do is update the UI with the tab group's focus event (evt.index is the focused tab, and evt.previousIndex the blurred).
app.js:
Ti.include('overrideTabs.js');
/*
This is a typical new project -- a tab group with three tabs.
*/
var tabGroup = Ti.UI.createTabGroup();
/*
Tab 1.
*/
var win1 = Ti.UI.createWindow({ title: 'Tab 1', backgroundColor: '#fff' });
var tab1 = Ti.UI.createTab({
backgroundImage: 'appicon.png',
window: win1
});
var button1 = Ti.UI.createButton({
title: 'Open Sub Window',
width: 200, height: 40
});
button1.addEventListener('click', function (evt) {
tab1.open(Ti.UI.createWindow({ title: 'Tab 1 Sub Window', backgroundColor: '#fff' }));
});
win1.add(button1);
tabGroup.addTab(tab1);
/*
Tab 2.
*/
tabGroup.addTab(Ti.UI.createTab({
backgroundImage: 'appicon.jpg',
window: Ti.UI.createWindow({ title: 'Tab 2', backgroundColor: '#fff' })
}));
/*
Tab 3.
*/
tabGroup.addTab(Ti.UI.createTab({
backgroundImage: 'appicon.png',
window: Ti.UI.createWindow({ title: 'Tab 3', backgroundColor: '#fff' })
}));
/*
Now call the overrideTabs function, and we're done!
*/
overrideTabs(
tabGroup, // The tab group
{ backgroundColor: '#f00' }, // View parameters for the background
{ backgroundColor: '#999', color: '#000', style: 0 }, // View parameters for selected tabs
{ backgroundColor: '#333', color: '#888', style: 0 } // View parameters for deselected tabs
);
tabGroup.open();
overrideTabs.js:
/**
* Override a tab group's tab bar on iOS.
*
* NOTE: Call this function on a tabGroup AFTER you have added all of your tabs to it! We'll look at the tabs that exist
* to generate the overriding tab bar view. If your tabs change, call this function again and we'll update the display.
*
* #param tabGroup The tab group to override
* #param backgroundOptions The options for the background view; use properties like backgroundColor, or backgroundImage.
* #param selectedOptions The options for a selected tab button.
* #param deselectedOptions The options for a deselected tab button.
*/
function overrideTabs(tabGroup, backgroundOptions, selectedOptions, deselectedOptions) {
// a bunch of our options need to default to 0 for everything to position correctly; we'll do it en mass:
deselectedOptions.top = deselectedOptions.bottom
= selectedOptions.top = selectedOptions.bottom
= backgroundOptions.left = backgroundOptions.right = backgroundOptions.bottom = 0;
// create the overriding tab bar using the passed in background options
backgroundOptions.height = 50;
var background = Ti.UI.createView(backgroundOptions);
// pass all touch events through to the tabs beneath our background
background.touchEnabled = false;
// create our individual tab buttons
var increment = 100 / tabGroup.tabs.length;
deselectedOptions.width = selectedOptions.width = increment + '%';
for (var i = 0, l = tabGroup.tabs.length; i < l; i++) {
var tab = tabGroup.tabs[i];
// position our views over the tab.
selectedOptions.left = deselectedOptions.left = increment * i + '%';
// customize the selected and deselected based on properties in the tab.
selectedOptions.title = deselectedOptions.title = tab.title;
if (tab.backgroundImage) {
selectedOptions.backgroundImage = deselectedOptions.backgroundImage = tab.backgroundImage;
}
if (tab.selectedBackgroundImage) {
selectedOptions.backgroundImage = tab.selectedBackgroundImage;
}
if (tab.deselectedBackgroundImage) {
deselectedOptions.backgroundImage = tab.deselectedBackgroundImage;
}
selectedOptions.visible = false;
background.add(tab.deselected = Ti.UI.createButton(deselectedOptions));
background.add(tab.selected = Ti.UI.createButton(selectedOptions));
}
// update the tab group, removing any old overrides
if (tabGroup.overrideTabs) {
tabGroup.remove(tabGroup.overrideTabs);
}
else {
tabGroup.addEventListener('focus', overrideFocusTab);
}
tabGroup.add(background);
tabGroup.overrideTabs = background;
}
function overrideFocusTab(evt) {
if (evt.previousIndex >= 0) {
evt.source.tabs[evt.previousIndex].selected.visible = false;
}
evt.tab.selected.visible = true;
}
https://gist.github.com/853935
In ExtJS 4, by default, the dragdrop proxy is displayed to the right bottom position of the mouse position during drag operation. Let say I click into the center of my target and move my mouse by 1 px. I would like the proxy to itself over the original element, shifted by 1 px.
Basically, I need proxy to behave like the example at http://jqueryui.com/demos/draggable/#sortable. In this example the proxy is over the original element and then moves around when the mouse is dragged.
How can I achieve this?
Here is sample code illustrating the problem when dragging a custom widget.
Ext.onReady(function(){
var hewgt = Ext.define('Demo.widget.Complex', {
extend: 'Ext.panel.Panel',
alias: 'widget.complex',
frameHeader: false,
draggable: false,
layout: 'table',
initComponent: function() {
this.callParent(arguments);
var txtFld;
this.superclass.add.call(this, txtFld = new Ext.form.field.Text({fieldLabel:'test'}));
this.superclass.add.call(this, new Ext.button.Button({text:'Save'}));
}
});
Ext.define('Demo.dd.DragSource', {
extend: 'Ext.dd.DragSource',
b4MouseDown: function(e) {
this.diffX = e.getX() - this.el.getX();
this.diffY = e.getY() - this.el.getY();
this.superclass.setDelta.call(this, 0, 0);
},
getTargetCoord: function(iPageX, iPageY) {
return {x: iPageX - this.diffX, y: iPageY - this.diffY};
}
});
var panel = Ext.create('Ext.panel.Panel', {
layout: 'absolute',
title: 'Navigation'
});
var vp = Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [panel]
});
var img = Ext.create('Demo.widget.Complex', { width: 400, height:100, x:20, y:20 });
panel.add(img);
new Demo.dd.DragSource(img.getEl());
img = Ext.create('Demo.widget.Complex', { width: 400, height:100, x:20, y:150 });
panel.add(img);
new Demo.dd.DragSource(img.getEl());
});
I am new to Ext JS.
Please let me know how can the dragged proxy be positioned correctly?
Thanks