We are using ExtJS4 in our application. We have a problem with grid focus.We are using grid.getView().focusEl.focus() in ExtJS3. Now it seems that this is not working.What is the replacement for this one in ExtJS4.
I have helped you checked on the differences in ExtJS3 and ExtJS4, the major changes is the focusEl has been removed from the gridView element.
In ExtJS3, focusEl is the anchor link in the view
<div class="x-grid3-scroller" id="ext-gen10" style="width: 298px; height: 174px; ">
<div class="x-grid3-body" style="width:100px;" id="ext-gen12">
<div class="x-grid3-row x-grid3-row-first x-grid3-row-last" style="width:100px;">
<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="width:100px;">
<tbody>
<tr><td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first " style="width: 100px;" tabindex="0"><div class="x-grid3-cell-inner x-grid3-col-0" unselectable="on">0</div></td></tr>
</tbody>
</table>
</div>
</div>
</div>
In ExtJS4, this anchor link doesn't exist
Solution
This is a small fiddle test I have created for you. Basically what you need to change is as follow:
grid.getView().el.focus();
Instead of getting the focusEl (an anchor link), we use the whole element.
Hope this solve your problem.
Related
I have the following code:
<div ng-cloak ng-init="viewAlbum()" class="ng-cloak">
<h3 ng-cloak class="ng-cloak" ng-bind="album.Title"></h3>
<table ng-cloak class="ng-cloak">
<tr>
<td class="label-col"><span class="album-label">Composer</span></td>
<td class="value-col">{{album.Composer}}</td>
</tr>
<tr>
<td class="label-col"><span class="album-label">Release Year</span></td>
<td class="value-col">{{album.ReleaseYear}}</td>
</tr>
<tr>
<td class="label-col"><span class="album-label">Rating</span></td>
<td class="value-col">{{album.Rating}}</td>
</tr>
<tr>
<td class="label-col"><span class="album-label">Reviews</span></td>
<td class="value-col">
<ol>
<li ng-repeat="review in album.Reviews">{{review.Text}}</li>
</ol>
</td>
</tr>
</table>
The problem is that I am seeing a quick flicker when the page load. I'm am not seeing raw unprocessed angular code. Instead, the entire table flickers including the static text such as the labels.
I did some experimenting - when I remove the H3 tag, I no longer see the flicker. So, I believe what is happening is the H3 tag is initially rendered with no value and therefore takes up no vertical space. When the value of the album title is rendered, the table is pushed down, and it is this "pushing down" that is causing the flicker. My theory could be wrong however.
The ng-clock attributes don't mitigate this. I tried a verbose option of surrounding the H3 tag in a container DIV and setting the height and min-height of that DIV in the css but that also isn't preventing the flicker.
As I said, if I remove the H3 tag, there is no flicker. Any suggestions please?
As mentioned in the below link you can Just wrap your h2/h3 tag in a div with display: inline-block; like this:
<div class="header2"><h3></h3></div>
and then add this to your css:
.header2 { min-width: 100px; width: auto; min-height:45px; background-color:#333; color:#FFF; display:inline-block; padding:10px; }
Here's a jsfiddle of two h2 tags with the above properties: https://jsfiddle.net/AndrewL32/e0d8my79/21/
Check :How do I make an inline element take up space when empty?
I recommend you also to use ng-bind for all your doms and remove the ng-cloak too
I'm trying to make an accessible calendar plugin where you can write the date in the input by hand or select it from a table. I'm using WAI-ARIA and I think I'm following the instructions correctly but the Chrome Developer Tools Accessibility audit gives me an error seen below
Instructions:
https://www.w3.org/TR/wai-aria-1.1/#combobox
https://www.w3.org/TR/wai-aria-1.1/#grid
Example:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/grid-combo.html
Error:
https://i.stack.imgur.com/OIX1f.png
My code:
<div class="container">
<label for="comboboxtextbox">the label</label>
<div role="combobox" aria-expanded="true" aria-owns="comboboxgrid" aria-haspopup="grid">
<input role="textbox" aria-multiline="false" id="comboboxtextbox" type="text" aria-controls="comboboxgrid">
</div>
<table role="grid" id="comboboxgrid">
<tbody>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tr>
<td role="gridcell">1</td>
<td role="gridcell">2</td>
<td role="gridcell">3</td>
</tr>
</tbody>
</table>
</div>
The error message is saying that anything with a role of combobox has required child elements but it can’t find them in your markup. There’s been some changes to the combobox role so if you’re working from an older example it’ll be out of date. Try removing the role attributes from both the div and the table, and see if that helps.
I have used ng-repeat numerous times already in the past, but for some reason I cannot yet understand why it is not on the following situation:
I have an array of objects called registers which I am referencing on the ng-repeat but nothing happens.
I know the array is populated because I have seen it on numerous console.log and because it works if I move the ng-repeat over to the <tbody>
<div ng-repeat = "r in registers">
<!-- START HEADER -->
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Denise Watson</td>
</tr>
</tbody> <!-- END HEADER -->
<tbody>
<tr>
<td class="text-center"></td>
<td>
<!-- Summernote Container -->
<div class="js-summernote-air">
<p>End of air-mode area!</p>
</div>
</td>
</tr>
</tbody>
<!-- END TABLE -->
</div>
I was hoping someone could tell me if there is something I may be ignoring.
Thanks in advance.
I think I just ran into this same problem. It stems from <div> not being a valid elment within a <table>.
I'm guessing that since you have <tbody> there, that there is a <table> tag that was left out of your snippet. <div>s aren't allowed in a table, so the browser moves it before the table. In my situation, doing this, causes the angular scope to change so that there was nothing to iterate over. You can verify this by using the developer tools of your browser.
So, my guess is that you probably want to move the ng-repeat onto the <tbody> or <table> tag.
If you want to use ng-repeat in "div" tag means use "span"
inside div tag. instead of using "table" and its sub attributes..
else use your ng-repeat inside "table" or "thead" or "tr" also
it will iterate rows ...
than only ng-repeat will works.
I am trying to sort my column using click event of column header.I am using angular js framework using filter orderBy .I saw a example which is working fine which is sort the column on click of header of column
http://plnkr.co/edit/aGAI6EmCwGyPKmFZAFb8?p=preview
I make a simple demo using above example try to sort my column on header click
.When I click on header it gives me alert of index , reverse parameter along with image is also change but the column is not sorted
can we sort column using header click as shown in above example
here is my code
http://plnkr.co/edit/r22YnCILVSuWPrMnTnv2?p=preview
please click on any column header and see the alerts but column is not sorted why ?
Please increase the output window screen of plunker to see the outputs .
<header-row ng-transclude class="row rowclassheaderClass" style="padding-bottom:1%">
<div class="col brd text-center brdleft_right gray-20 collapse-sm columnCss"
ng-repeat="d in invoice_column_name | filter:{checked: true}">
<sort-header label="{{d.label|uppercase}}" index="{{d.index}}"
sort-exp="setSort(idx, reverse)"></sort-header>
</div>
<div class="col col-10 text-center brd gray-20" ng-click="openSettingPopover($event)">
<button class="button-icon icon ion-ios-more fntandbg"></button>
</div>
</header-row>
Any update..?
It seems like you are trying to re-invent the wheel. There is a sortBy built directly into angular.
Take a look at
docs.angularjs.org/api/ng/filter/orderBy
In particular the first example for a basic overview and then the second one (I have outlined in the code sample below) it does exactly what you are trying to achieve but in much less code.
View Plunkr
<body ng-app="orderByExample">
<div ng-controller="ExampleController">
<table class="friend">
<tr>
<th>Name
(^)</th>
<th>Phone Number</th>
<th>Age</th>
</tr>
<tr ng-repeat="friend in friends">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
</div>
</body>
I'm working in a project where we are using Angular with ng-bootstrap and various other plugins and it's Great.
But when using ng-repeat inside a ng-template for some popover content, the placement of the popover gets wonky.
<script id="broken.html" type="text/ng-template">
<div>
<table class="table table-condensed table-popover">
<tbody ng-repeat="a in test">
<tr>
<th>test</th>
<td>aaa</td>
</tr>
</tbody>
</table>
</div>
</script>
Plunker example.
The "Broken" button that uses ng-repeat spwans a popup that is too far down. While the "Works" button that has the table hard coded works as intended.
Does anyone have an idea of how one might fix this problem?
Best regards, Fredrik